How to place two elements together and next element in next line in form CSS and HTML?

Question

I am beginner in HTML,CSS,JavaScript

I wish to place "enter username" box and "OK" image together, the OK image should be next to input box, and the next elements next in next line.

.check1 {
    display: inline;
    margin-right: -4px;
    float: inline-end;
}
.check2 {
    display: inline;
    margin-right: -4px;
    float: inline-start;
}
.login-form {
    margin: 50px auto;
    width: 300px;
    font-family: Tahoma, Geneva, sans-serif;
}
.login-form h2 {
    text-align: left;
    color: rgb(124, 34, 105);
}
.login-form input{
    width: 100%;
    padding: 15px 15px 15px 15px;
    margin: 10px 0 10px 0px;
    box-sizing: border-box;
    outline-color: rgb(38, 179, 235);
}
.login-form button{
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 15px;
    background-color: rgb(148, 53, 127);
    color: white;
    box-sizing: border-box;
    outline: none;
}
.login-form button:hover {
    opacity: 90%;
}
#username {
    width: 20px;
    height: 20px;
}
#password {
    width: 20px;
    height: 20px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" href="css/main.css"/ >
    </head>
    <body>
                <div class="login-form">
            <h2>Student Record Management</h2>
            <form action="auth" method="POST">
                <div class="check1">
                    <img id="username" src="ok.png" alt="ok">
                    <input type="text" name="userid" placeholder="Enter Username" required autofocus autocomplete="off" / >
                </div>
                <div class="check2">
                    <input type="password" name="password" placeholder="Enter Password" required / >
                    <img id="password" src="wrong.png" alt="wrong">
                <div>
                <button type="submit">Login</button>
                <label><pre>Create account <a href="signup.html">here</a></pre></label>
            </form>
        </div>
    </body>
</html>

the next element should be in next line and same the box and the image should be in same line.

and if someone tells me how to access the HTML elements in JavaScript would be really appreciated.

score 1 · Accepted Answer · answered May 25 '21 at 13:49

1

This code will align the input box and ok image as an inline element.

.check1 {
    display: flex;
   flex-direction: row-reverse;
    margin-right: -4px;
    float: inline-end;
}

answered May 25 '21 at 13:49

ajay 24

304
3
13

Sir Thank You for your help, But as yow suggested tried the code and it work but i have little problem the image appears at the top but it is lifted like subscript, how to place image in center line with box? – May 25 '21 at 14:32
add align-items: center; in check1. I highly recommend you to search on the flex box. – ajay 24 May 26 '21 at 07:00

score 1 · Answer 2 · answered May 25 '21 at 13:59

Can you please check the below code? Hope it will work for you. We have used display:flex in check1 and check2 and applied margin-right to input element as per your requirement

Please refer to this link: https://jsfiddle.net/yudizsolutions/vpr7qLy6/

.check1,
.check2 {
  display: flex;
  margin-right: -4px;
  align-items: center;
}

.login-form {
  margin: 50px auto;
  width: 300px;
  font-family: Tahoma, Geneva, sans-serif;
}

.login-form h2 {
  text-align: left;
  color: rgb(124, 34, 105);
}

.login-form input {
  width: 100%;
  padding: 15px 15px 15px 15px;
  margin: 10px 10px 10px 0px;
  box-sizing: border-box;
  outline-color: rgb(38, 179, 235);
}

.login-form button {
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 15px;
  background-color: rgb(148, 53, 127);
  color: white;
  box-sizing: border-box;
  outline: none;
}

.login-form button:hover {
  opacity: 90%;
}

#username {
  width: 20px;
  height: 20px;
}

#password {
  width: 20px;
  height: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Welcome</title>
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <div class="login-form">
    <h2>Student Record Management</h2>
    <form action="auth" method="POST">
      <div class="check1">

        <input type="text" name="userid" placeholder="Enter Username" required autofocus autocomplete="off" />
        <img id="username" src="https://via.placeholder.com/60x60?text=ok" alt="ok">
      </div>
      <div class="check2">
        <input type="password" name="password" placeholder="Enter Password" required />
        <img id="password" src="https://via.placeholder.com/60x60?text=wrong" alt="wrong">
      </div>
      <button type="submit">Login</button>
      <label><pre>Create account <a href="signup.html">here</a></pre></label>
    </form>
  </div>
</body>

</html>

How to place two elements together and next element in next line in form CSS and HTML?

2 Answers2