How to make input forms appear row by row - Html

LSJ32141
April 2, 2023
239 views
0 votes
2 Answers

I am currently having difficulties with a form: In the form I am creating I want first name and last name to appear in a row, then under that in the 2nd column email and phone number in the same row, then below that one password and confirm password. I have tried multiple fixes but can’t seem to get the input format like in this image: https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png

Please view my

* {
  font-family: "Alata", sans-serif;
  margin: 0;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.leftScreen {
  background-image: url("bg.jpg");
  background-size: cover;
  height: 100vh;
  width: 34%;
}

.logoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 15vh;
  margin-top: 165px;
}

.logo {
  background-image: url("logo.png");
  background-size: cover;
  background-color: transparent;
  height: 30vh;
  width: 300px;
  margin-bottom: 40px;
}

.formScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 66%;
  background-color: #f9fafb;
}

.upper {
  display: flex;
  align-items: left;
  justify-content: center;
  flex-direction: column;
  height: 35vh;
  width: 100%;
}

.upperText {
  font-size: 1.5rem;
  margin-top: 50px;
  margin-left: 40px;
  width: 75%;
}

.lowerText {
  font-size: 1.5rem;
  margin-left: 40px;
}

.form {
  font-size: 1 rem;
  height: 30vh;
  width: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.form h2 {
  margin-top: 20px;
  margin-left: 40px;
}

.finish {
  display: flex;
  align-items: left;
  justify-content: center;
  flex-direction: column;
  height: 35vh;
  width: 100%;
}

.accountBtn {
  background-color: rgb(89, 108, 72);
  font-size: 1rem;
  color: white;
  border-radius: 10px;
  border: 0;
  width: 200px;
  height: 45px;
  margin-left: 40px;
  margin-bottom: 150px;
}

.finish h3 {
  margin-left: 40px;
  margin-bottom: 40px;
  position: absolute;
}

.login {
  color: green;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <div class="leftScreen">
        <div class="logoBox">
          <div class="logo"></div>
        </div>
      </div>

      <div class="formScreen">
        <div class="upper">
          <div class="upperText">
            This is not a real online service! You know you need something like
            this in your life to help you realize your deepest dreams.
            <br />Sign up <em>now</em> to get started.<br />
          </div>
          <br />
          <div class="lowerText">You <em>know</em> you want to.</div>
        </div>

        <div class="form">
          <h2>Let's do this!</h2>
          <form action="#" method="get">
          <div class="input">
            <label for="firstName"> First Name </label>
          </div>
          <input type="firstName" id="firstName" name="firstName" />

          <div class="input">
            <label for="lastName">Last Name</label>
          </div>
          <input type="lastName" id="lastName" name="lastName">

          <div class="input">
            <label for="email">Email</label>
          </div>
          <input type="email" id="email" name="email">

          <div class="input">
            <label for="lastName">Phone Number</label>
          </div>
          <input type="phoneNumber" id="phoneNumber" name="phoneNumber">  

          <div class="input">
            <label for="password">Password</label>
          </div>
          <input type="password" id="password" name="password">

          <div class="input">
            <label for="confirmPassword">Confirm Password</label>
          </div>
          <input type="confirmPassword" id="confirmPassword" name="confirmPassword">

        </div>
      </form>

        <div class="finish">
          <button class="accountBtn">Create Account</button>
          <h3>
            Already have an account?<a class="login" href="/login"> Log In</a>
          </h3>
        </div>
      </div>
    </div>
  </body>
</html>

code and help me with this case

Tags: css html

Answers

I’d divide them in 3 different rows as divs, then wrap each label and its input field in a div. Then, you can choose how to position them, one possible way would be to make the div.row a flex container with a fixed width (I put max-width: 50% but you can change or use margins instead) and justify-content: space between so the two columns go to the extreme left and right of the container.

.row {
  display: flex;
  justify-content: space-between;
  max-width: 50%;
}

<div class="form">
          <h2>Let's do this!</h2>
          <form action="#" method="get">
         <div class="row"> <div><div class="input">
            <label for="firstName"> First Name </label>
          </div>
          <input type="firstName" id="firstName" name="firstName" />
</div><div>
          <div class="input">
            <label for="lastName">Last Name</label>
          </div>
          <input type="lastName" id="lastName" name="lastName">
            </div></div>
          <div class="row"><div><div class="input">
            <label for="email">Email</label>
          </div>
          <input type="email" id="email" name="email">
</div><div>
          <div class="input">
            <label for="lastName">Phone Number</label>
          </div>
          <input type="phoneNumber" id="phoneNumber" name="phoneNumber">  
</div></div><div class="row"><div>
          <div class="input">
            <label for="password">Password</label>
          </div>
          <input type="password" id="password" name="password">
            </div><div>
          <div class="input">
            <label for="confirmPassword">Confirm Password</label>
          </div>
          <input type="confirmPassword" id="confirmPassword" name="confirmPassword">

        </div></div>
      </form>

To make inputs appear row by row then follow this structure

Wrap each label and it’s input in a div. Place two such div wrappers inside another div with class row.

    <div class="row">
      <div>
        <label for="firstName"> First Name </label>
        <input type="firstName" id="firstName" name="firstName" />
      </div>

      <div>
        <label for="lastName">Last Name</label>
        <input type="lastName" id="lastName" name="lastName">
      </div>
    </div>

learn more about flexbox and it’s usage here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Add the below css for row class

.row {
  display: flex;
  /* this will make children elements to be placed in one row*/
  flex-wrap: wrap;
  /* children will wrap to next line if space is not available*/
  gap: 10px;
  /* creates a gap between the childern */
  padding-top: 10px;
  /* to create some space above the row */
}

h2 {
  margin-bottom: 0px
}

label {
  display: block;
}

<div class="form">
  <h2>Let's do this!</h2>
  <form action="#" method="get">

    <div class="row">
      <div>
        <label for="firstName"> First Name </label>
        <input type="firstName" id="firstName" name="firstName" />
      </div>

      <div>
        <label for="lastName">Last Name</label>
        <input type="lastName" id="lastName" name="lastName">
      </div>
    </div>

    <div class="row">
      <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
      </div>

      <div>
        <label for="lastName">Phone Number</label>
        <input type="phoneNumber" id="phoneNumber" name="phoneNumber">
      </div>
    </div>

    <div class="row">
      <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
      </div>

      <div>
        <label for="confirmPassword">Confirm Password</label>
        <input type="confirmPassword" id="confirmPassword" name="confirmPassword">
      </div>
    </div>
  </form>

Please signup or login to give your own answer.

Click here to cancel reply.

How to make input forms appear row by row – Html

Answers