CODEWITHSUNDEEP
htmlcss
Sarid Ruiz
Sarid Ruiz

Reputation: 43

How to align input boxes in 2 lines

I'm doing a form where I want 3 input boxes to the left and to the right. Now, I copied the code from a past project of mine where it worked but now it wont work in this new project. I've tried every text-align and float I know about. I really don't know what to do anymore.

This is the code i have for this so far.

input[id=fname], input[id=lname], input[id=phone], input[id=city],i nput[id=email], input[id=birthday] {
    width: 420px;
    margin-bottom: 15px;
    padding: 3px;
}


#left {
    width: 40px;
    display: inline-block;
    box-sizing: border-box;
}

#right {
    width: 440px;
    display: inline-block;
    float: right;
    padding-left: 8px;
    box-sizing: border-box;
}
<!doctype html>

<html>
    
    <head>
       <title>Employee Directory</title>
        <link rel="stylesheet" type="text/css" href="css/Styles.css">
    </head>
    
    <body>
       <div class="form">
           <form method="post">
               <div id="left">
                   <label>First Name</label>
                   <input id="fname" type="text" tabindex="1" >
                   
                   <label>Phone</label>
                   <input id="phone" type="phone" tabindex="3">
                   
                   <label>City</label>
                   <input id="city" type="text" tabindex="5">   
               </div>
               
               <div id="right" class="box">
                   <label>Last Name</label>
                   <input id="lname" type="text" tabindex="2">
                   
                   <label>Email</label>
                   <input id="email" type="email" tabindex="4">
                   
                   <label>Birthday</label>
                   <input id="bday" type="date" tabindex="6">
               </div> 
           </form>
       </div>
       
    </body>
    
</html>

Upvotes: 0

Views: 69

Answers (2)

symlink
symlink

Reputation: 12209

You can simplify the HTML and CSS a lot here. Use display:grid to align everything: 

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px 20px;
}

input {
  display: block;
  width: 100%;
}
<form class="form" method="post">
  <label>First Name
      <input name="fname" type="text">
  </label>
  <label>Last Name
      <input name="lname" type="text">
   </label>
  <label>Phone
      <input name="phone" type="phone">
  </label>
  <label>Email
      <input name="email" type="email">
    </label>
  <label>City
      <input name="city" type="text">
  </label>
  <label>Birthday
      <input name="bday" type="date">
  </label>
</form>

Upvotes: 1

MomasVII
MomasVII

Reputation: 5061

You should try to make it so your order of inputs is left to right down the page as tabbing from first name to Phone and then back up to last name is not very intuitive (Although fixed with tabindex this can be default).

Here is how I would do it.

input[id=fname], input[id=lname], input[id=phone], input[id=city],input[id=email], input[id=birthday] {
    width: 50%;
    margin-bottom: 15px;
    padding: 3px;
}


#form_fields {
  display:flex;
  flex-wrap:wrap;
}

#form_fields label {
    width:50%;
}

#form_fields label input {
    width:50%;
}
<!doctype html>

<html>
    
    <head>
       <title>Employee Directory</title>
        <link rel="stylesheet" type="text/css" href="css/Styles.css">
    </head>
    
    <body>
       <div class="form">
           <form method="post">
               <div id="form_fields">
                   <label>First Name<br />
                       <input id="fname" type="text" />
                   </label>
                              
                   <label>Last Name<br />
                       <input id="lname" type="text" />
                   </label>
                   
                   <label>Phone<br />
                       <input id="phone" type="phone" />
                   </label>
                   
                   <label>Email<br />
                       <input id="email" type="email" />
                   </label>
                   
                   <label>City<br />
                       <input id="city" type="text" />   
                   </label>
                       
                   <label>Birthday<br />
                       <input id="bday" type="date" />
                   </label>
               </div> 
           </form>
       </div>
       
    </body>
    
</html>

Upvotes: 1

Related Questions