Twitter Bootstrap: proper way of aligning checkbox with checkbox label

Question

I am trying out the following three examples from the O'Reilly book Bootstrap by Jake Spurlock. When I paste the code into JSFiddle it highlights an error in red, presumably because embedding a checkbox input element inside a label element does not produce valid HTML.

<!-- First example from book's Bootstrap CSS -> Forms section: -->
<form>
  <fieldset>
    <legend>Legend</legend>
    <label for="name">Label name</label>
    <input type="text" id="name" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox" for="checkbox">
      <input type="checkbox" id="checkbox">
      Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

<!-- Second example from book's Bootstrap CSS -> Forms section: -->
<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox">
    Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

<!-- Third example from book's Bootstrap CSS -> Forms section: -->
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox">
        Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

In particular in all three cases the code that causes the HTML error is the following:

      <label class="checkbox">
        <input type="checkbox">
        Remember me
      </label>

The following related post seems to deal with the same problem but the code in the answer doesn't seem to fix the HTML problem I describe.

So what is the correct way to style the form in bootstrap so that the html is valid, and so that the browser properly displays the checkbox followed by the checkbox text on a single line by itself? I would prefer an answer that does not require creating any custom CSS.

It is absolutely valid to include an input inside a label. There is nothing wrong with that code **assuming you are using HTML5** otherwise you need to use a self closing input tag: ``. Ignore JSFiddles red highlighting. It doesn't deal well with HTML5 tags that no longer need to be closed. — Turnip, Nov 06 '14 at 12:41

micebrain · Accepted Answer · 2014-11-06T13:45:16.167

1

For the class for label should be control-label, checkbox is not valid

<div>
  <label class="control-label">
    <input type="checkbox">
    Remember me
  </label>
</div>
<button type="submit" class="btn">Submit</button>

edited Nov 06 '14 at 13:45

answered Nov 06 '14 at 13:03

micebrain

568
2
9

Thank you for your reply. I've tried [your suggestion](http://jsfiddle.net/aL8yvw1t/2/) but as a side effect either the code that precedes the checkbox and its text or the code that follows the checkbox and its text is on the same line as the checkbox and its text. How do I fix this? Thanks. – John Sonderson Nov 06 '14 at 13:27
1

You can either wrap only the label and input tag in a div, or use a br tag for line break. Please see edited answer for example – micebrain Nov 06 '14 at 13:44
1

by the way, here is the example on Bootstrap website http://getbootstrap.com/css/#forms – micebrain Nov 06 '14 at 13:51

Twitter Bootstrap: proper way of aligning checkbox with checkbox label

1 Answers1