How to make 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:

Answer 1

Aside from using floats, as others have suggested, you can also rely on a framework such as Bootstrap where you can use the "horizontal-form" class to have the label and input on the same line.

If you're unfamiliar with Bootstrap, you would need to include:

• the link to the Bootstrap CSS (the top link where it says < -- Latest compiled and minified CSS -- >), in the head, as well as add some divs:
• div class="form-group"
• div class="col-..."
• along with class="col-sm-2 control-label" in each label, as Bootstrap shows, which I included below.
• I also reformatted your button so it's Bootstrap compliant.
• and added a legend, to your form box, since you were using a fieldset.

It's very straight forward and you wouldn't have to mess with floats or a ton of CSS for formatting, as you listed above.

  

    

      

        

        
Address Form

      

        Name:
          

            
          
      

      

        Matric number: 
          

            
          
      

      

        Email: 
          

            
          
      

      

        Username: 
          

            
          
      

      

        Password: 
          

            
          
      

      

        Submit