CODEWITHSUNDEEP
javascripthtmlcssformsgoogle-web-designer
user15375345
user15375345

Reputation:

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

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.

Upvotes: 1

Views: 1172

Answers (2)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

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>

Upvotes: 1

ajay 24
ajay 24

Reputation: 329

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

Upvotes: 1

Related Questions