How can I get form elements to display as two in a row?

[Tony Webb]

Hi,

I've spen tsome time trying to work out how to set up an address form so that the elements (fields) display in rows of 2.

I'm not having much luck.

I've tried display-grid , display: flex, display: inline and a few others without success.

I'm almost there with using display flex but the titles show by the side of the field and sometimes it looks confusing ie three titles and only two fields on one row and the next row starting with a grid.

An example of the HTML code that I have used

How can I sort this out.

<div class="address-form">
    <form action="action_page.php">
 
      <label for="fname">
        <span>First Name</span>
        </label>         
      <input type="text" id="fname" name="firstname" placeholder="Hew"/>
    
      <br>
 
      <label for="lname"><span>Last name</span></label>
      <input type="text" id="lname" name="lastname" placeholder="Mcgrew"/>
      
      <br>
      
      <label for="ad-1">
        <span>First line of address</span>
      </label>
      <input type="text" id="ad-1" name="ad-1" placeholder="25 Camberwick green">
      <br>
      
      <label for ad-2>
        <span>Second Line of address</span>
      </label>
      <input type="text" id="ad-2" name="ad-1" placeholder="Fire Station">
      <br>
      
      <label for="county">
        <span>County</span>
        </label>
      <input type="text" id="county" name="county" placeholder="Wessex">
      <br>
      
      <label form="p-code">
        <span>Post Code</span>
      </label>
      <input type="text" id="p-code" name="post code" placeholder=" XY12 45CD">
      <br>   
      
      <label form="fone">Phone number</label>
      <input type="text" id="fone" name="phone" placeholder=" 012345678">
      <br> 

      <label form="emale">
        <span>Email Address</span>
      </label>
      <input type="email" id="emale" name="email" placeholder=" [email protected]">
      <br> 
</div>

.address-form {margin-top: 20px;
    margin-left: 20px;
    color: blue;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
 
  
}
 
 
    
 }
input[type=text], select, textarea {
margin-top: 100px;
width: 35%;
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;


}

 

[Johna]

Hi there.
Rather than using the line break element (<br>) to put the input fields on new lines, use div elements for each row.
In my opinion, line breaks should only ever be used in text for a new line/paragraph.

So for your HTML, if you want 2 input elements per row, I'd put 2 input elements in a div container for each row. Something like this:

<div class="address-form">
  <form action="action_page.php">
    <div class="row">
      <label for="fname"><span>First Name</span></label>         
      <input type="text" id="fname" name="firstname" placeholder="Hew"/>
      <label for="lname"><span>Last name</span></label>
      <input type="text" id="lname" name="lastname" placeholder="Mcgrew"/>
    </div>
    <div class="row">
      <label for="ad-1"><span>First line of address</span></label>
      <input type="text" id="ad-1" name="ad-1" placeholder="25 Camberwick green">
      <label for ad-2><span>Second Line of address</span></label>
      <input type="text" id="ad-2" name="ad-1" placeholder="Fire Station">
    </div>
    <div class="row">
      <label for="county"><span>County</span></label>
      <input type="text" id="county" name="county" placeholder="Wessex">
      <label form="p-code"><span>Post Code</span></label>
      <input type="text" id="p-code" name="post code" placeholder=" XY12 45CD">
    </div>
    <div class="row">
      <label form="fone">Phone number</label>
      <input type="text" id="fone" name="phone" placeholder=" 012345678">
      <label form="emale"><span>Email Address</span></label>
      <input type="email" id="emale" name="email" placeholder=" [email protected]">
    </div>
  </form>
</div>

 

[tomliv]

To elaborate on Johna's answer, if you are looking to have the 2 groups of fields and labels be side-by-side you could do a couple of things.

Add another div around each pair of label and field (my preference) OR move the field inside the label. Then use display:flex on the outer div Johna mentioned.

That should give you:

label label
field field

label label
field field

label label
field field