CODEWITHSUNDEEP
htmlcssforms
luchxo
luchxo

Reputation: 1273

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

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>

Upvotes: 127

Views: 518664

Answers (13)

Divyansh Mittal
Divyansh Mittal

Reputation: 49

**<div style="display: flex; align-items: center;">
  <label for="textInput" style="margin-right: 10px;">First Name</label>
  <input type="text" id="textInput">
</div>**

Use the above snippet for brining label and input in same line





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
















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

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9053

UPDATE: mid 2022

I do it like this these days

<form>
    
    <field class='text'> 
        <label for='firstName'>First name</label>
        <input type='text' id='firstName'>
    </field>
    
    <field class='text possible-further-unique-class'> 
        <label for='lastName'>Last name (family name)</label>
        <input type='text' id='lastName'>
    </field>

    <!-- just showing varying label text length -->
</form>

<!-- 
    regarding the .text class on the custom field element,
    usually have a little framework depending on the type of field - 
    so, checkbox would apply different layout styles
-->

I could use a div, but creating a custom element is readable and just gets practically stripped away by things like a screen-reader - leaving the semantic elements clearly there. Maybe if we use this pattern (or some pattern) enough, we might even get an official grouping element for inputs like this.

I'm also likely to reach for CSS grid in situations like this. Flexbox for more squishy dashboards and Grid for when I know how I want it aligned.

I also try and avoid Sass these days too when I can (who knew I could live without it!?)

* {box-sizing:border-box;} /* global + reset */


field.text {
    /* it's display: inline by default! */
    display: grid; /* naturally 1 column and will stack */
    gap: 4px;
}

field.text label {
    font-size: 16px;
}

field.text input {
    font: inherit;
    padding: 5px 10px;
}

form {
    display: grid;
    gap: 20px;
    max-width: 300px; /* or some parent context to constrain it */
}

@media (min-width: 500px) {
    form {
        max-width: 500px;
    }
    
    field.text {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 20px;
    }

    field.text label {
        white-space: nowrap; 
    }
}

Live example on CodePen

UPDATE: mid-2016 + with mobile-first media queries and flex-box

This is how I do things these days.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

oldest answer

HTML

I would suggest you wrap them in a div, since you will likely end up floating them in certain contexts.

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

Then within that div, you can make each piece inline-block so that you can use vertical-align to center them - or set baseline etc. (your labels and input might change sizes in the future...

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

Upvotes: 27

Karan Goyal
Karan Goyal

Reputation: 457

This thing works well.It put radio button or checkbox with label in same line without any css. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Upvotes: 2

W Kenny
W Kenny

Reputation: 2089

I am using Angular 6 with Bootstrap 4 and find this way works:

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>

Upvotes: 5

Josh Crozier
Josh Crozier

Reputation: 241238

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.

Upvotes: 90

Grigory Kislin
Grigory Kislin

Reputation: 18030

For Bootstrap 4 it could be done with class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>

Upvotes: 7

Jay Wright
Jay Wright

Reputation: 21

Wrap the label and the input within a bootstraps div 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>

Upvotes: 2

facebook-100006652272506
facebook-100006652272506

Reputation: 1250

I found "display:flex" style is a good way to make these elements in same line. No matter what kind of element in the div. Especially if the input class is form-control,other solutions like bootstrap, inline-block will not work well.

Example:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

More detail about display:flex:

flex-direction: row, column

justify-content: flex-end, center, space-between, space-around

align-items: stretch, flex-start, flex-end, center

Upvotes: 61

user7119463
user7119463

Reputation: 21

#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" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Upvotes: 1

Tom Berthold
Tom Berthold

Reputation: 552

I've done this several different ways but the only way I've found that keeps the labels and corresponding text/input data on the same line and always wraps perfectly to the width of the parent is to use display:inline table.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>

Upvotes: 2

Padawan
Padawan

Reputation: 728

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.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

Upvotes: 5

checkmate711
checkmate711

Reputation: 3461

Another option is to place a table inside the form. (see below) I know tables are frowned upon by some people but I think they work nicely when it comes to responsive form layouts.

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>

Upvotes: -2

Provision
Provision

Reputation: 271

What you were missing was the float: left; here is an example just done in the HTML

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

The more efficient way to do this is to add a class to the labels and set the float: left; to the class in CSS

Upvotes: 5

Related Questions