Steps for displaying input forms in rows one by one

Question

Steps for displaying input forms in rows one by one

I am currently struggling to format a form properly. In the form I'm working on, I want the first name and last name to be displayed in one row, followed by email and phone number in the same row but different column, and below that, password and confirm password fields. Despite trying various solutions, I can't seem to achieve the desired layout as shown in this image: example

Please review my code snippet and assist me with this issue:

code and help me with this case

html css

Answer 1

Answer №1

To organize the labels and input fields, I would split them into three separate rows within divs. Each label and input field pair would be wrapped in its own div for better alignment. One way to position them effectively is by utilizing flexbox properties. For instance, setting the container div.row as a flex container with a fixed width (such as max-width: 50%) and justify-content: space-between can push the columns to either end of the container for a clean layout.

.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>

Answer 2

To organize the labels and input fields, I would split them into three separate rows within divs. Each label and input field pair would be wrapped in its own div for better alignment. One way to position them effectively is by utilizing flexbox properties. For instance, setting the container div.row as a flex container with a fixed width (such as max-width: 50%) and justify-content: space-between can push the columns to either end of the container for a clean layout.

.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>

Answer 3

Answer №2

If you want to display inputs row by row, follow this structure:

Enclose each label and its corresponding input within a div. Place two of these div wrappers inside another div with the class "row".

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

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

To learn more about flexbox and how to use it, visit this link.

Add the following CSS for the "row" class:

.row {
  display: flex;
  /* ensures children elements are in one row */
  flex-wrap: wrap;
  /* allows children to move to the next line if space is insufficient */
  gap: 10px;
  /* creates spacing between children */
  padding-top: 10px;
  /* adds 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="text" id="firstName" name="first Name" />
      </div>

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

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

      <div>
        <label for="phoneNumber"> Phone Number </label>
        <input type="tel" id="phoneNumber" name="phone Number">>;
      </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="password" id="confirmPassword" name="Confirm Password">>;
      </div>
    </div>
  </form>

Answer 4

If you want to display inputs row by row, follow this structure:

Enclose each label and its corresponding input within a div. Place two of these div wrappers inside another div with the class "row".

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

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

To learn more about flexbox and how to use it, visit this link.

Add the following CSS for the "row" class:

.row {
  display: flex;
  /* ensures children elements are in one row */
  flex-wrap: wrap;
  /* allows children to move to the next line if space is insufficient */
  gap: 10px;
  /* creates spacing between children */
  padding-top: 10px;
  /* adds 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="text" id="firstName" name="first Name" />
      </div>

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

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

      <div>
        <label for="phoneNumber"> Phone Number </label>
        <input type="tel" id="phoneNumber" name="phone Number">>;
      </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="password" id="confirmPassword" name="Confirm Password">>;
      </div>
    </div>
  </form>

Steps for displaying input forms in rows one by one

Answer №1

Answer №2

Similar questions

Is the table not displaying properly in the print preview with a messy

Button with embedded Bootstrap dropdown

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

seamless blending effect as the opacity transitions smoothly on an element with a applied filter

Ways to duplicate a letter in HTML?

Trouble with closing Bootstrap 4 modal

Navigating users through websites using AJAX techniques

Overflow of text arranged horizontally within a span element situated inside a div container

The Datalist feature in the MVC application is malfunctioning on the production server, yet it is functioning properly

HTML5 CSS and Rails theme

Moving items in a leftward direction

Maximize the YouTube video for full screen viewing

Modifications made to the content of the element can disrupt the functioning of the delegated event handlers tied to its parent

Make sure to always retrieve the previous state in your React application

Python Issue with BeautifulSoup: find_all() returning incorrect list of elements

Having trouble with the display of styles on Material UI Cards?

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

Transforming HTML div elements into a PHP array

How to reset an HTML5 form using the submit button

Endless Loop Seamless Vertical JavaScript Experience