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

Question

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

973 Views Asked by AudioBubble At 20 October 2024 at 13:01

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.

Original Q&A

There are 2 best solutions below

Yudiz Solutions On 25 May 2021 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>

**ajay 24** · Accepted Answer

ajay 24 On 25 May 2021 at 13:49 BEST ANSWER

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;
}

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in FORMS

Related Questions in GOOGLE-WEB-DESIGNER

Trending Questions

Popular # Hahtags

Popular Questions