How to make <label> and <input> appear on the same line on an HTML form?

Question

I am creating a registration form for a website. I want each label and its corresponding input element to appear on the same line.

Here's my code:

#form {   background-color: #FFF;   height: 600px;   width: 600px;   margin-right: auto;   margin-left: auto;   margin-top: 0px;   border-top-left-radius: 10px;   border-top-right-radius: 10px;   padding: 0px;  }    label {   font-family: Georgia, "Times New Roman", Times, serif;   font-size: 18px;   color: #333;   height: 20px;   width: 200px;   margin-top: 10px;   margin-left: 10px;   text-align: right;   clear: both;  }    input {   height: 20px;   width: 300px;   border: 1px solid #000;   margin-top: 10px;   float: left;  }

<div id="form">     <form action="" method="post" name="registration" class="register">        <fieldset>       <label for="Student"> Name: </label>     <input name="Student" />     <label for="Matric_no"> Matric number: </label>     <input name="Matric_no" />     <label for="Email"> Email: </label>     <input name="Email" />     <label for="Username"> Username: </label>     <input name="Username" />     <label for="Password"> Password: </label>     <input name="Password" type="password" />          <input name="regbutton" type="button" class="button" value="Register" />    </fieldset>     </form>  </div>  

Answer 1

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {     /* Other styling... */     text-align: right;     clear: both;     float:left;     margin-right:15px; } 

#form {      background-color: #FFF;      height: 600px;      width: 600px;      margin-right: auto;      margin-left: auto;      margin-top: 0px;      border-top-left-radius: 10px;      border-top-right-radius: 10px;      padding: 0px;      text-align:center;  }  label {      font-family: Georgia, "Times New Roman", Times, serif;      font-size: 18px;      color: #333;      height: 20px;      width: 200px;      margin-top: 10px;      margin-left: 10px;      text-align: right;      clear: both;      float:left;      margin-right:15px;  }  input {      height: 20px;      width: 300px;      border: 1px solid #000;      margin-top: 10px;      float: left;  }  input[type=button] {      float:none;  }

<div id="form">      <form action="" method="post" name="registration" class="register">          <fieldset>              <label for="Student">Name:</label>              <input name="Student" id="Student" />              <label for="Matric_no">Matric number:</label>              <input name="Matric_no" id="Matric_no" />              <label for="Email">Email:</label>              <input name="Email" id="Email" />              <label for="Username">Username:</label>              <input name="Username" id="Username" />              <label for="Password">Password:</label>              <input name="Password" id="Password" type="password" />              <input name="regbutton" type="button" class="button" value="Register" />          </fieldset>      </form>  </div>

Alternatively, a more common approach would be to wrap the input/label elements in groups:

<div class="form-group">     <label for="Student">Name:</label>     <input name="Student" id="Student" /> </div> 

#form {      background-color: #FFF;      height: 600px;      width: 600px;      margin-right: auto;      margin-left: auto;      margin-top: 0px;      border-top-left-radius: 10px;      border-top-right-radius: 10px;      padding: 0px;      text-align:center;  }  label {      font-family: Georgia, "Times New Roman", Times, serif;      font-size: 18px;      color: #333;      height: 20px;      width: 200px;      margin-top: 10px;      margin-left: 10px;      text-align: right;      margin-right:15px;      float:left;  }  input {      height: 20px;      width: 300px;      border: 1px solid #000;      margin-top: 10px;  }

<div id="form">      <form action="" method="post" name="registration" class="register">          <fieldset>              <div class="form-group">                  <label for="Student">Name:</label>                  <input name="Student" id="Student" />              </div>              <div class="form-group">                  <label for="Matric_no">Matric number:</label>                  <input name="Matric_no" id="Matric_no" />              </div>              <div class="form-group">                  <label for="Email">Email:</label>                  <input name="Email" id="Email" />              </div>              <div class="form-group">                  <label for="Username">Username:</label>                  <input name="Username" id="Username" />              </div>              <div class="form-group">                  <label for="Password">Password:</label>                  <input name="Password" id="Password" type="password" />              </div>              <input name="regbutton" type="button" class="button" value="Register" />          </fieldset>      </form>  </div>

Note that the for attribute should correspond to the id of a labelable element, not its name. This will allow users to click the label to give focus to the corresponding form element.