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

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>

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


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


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.

Tags:

Html

Css

Forms

Recent Posts