Search code examples
htmlsemantics

Should I put input elements inside a label element?

Is there a best practice concerning the nesting of label and input HTML elements?

classic way:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

or

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>
Solution

  • From the W3's HTML4 specification:

    The label itself may be positioned before, after or around the associated control.

    <label for="lastname">Last Name</label>
<input type="text" id="lastname" />

    or

    <input type="text" id="lastname" />
<label for="lastname">Last Name</label>

    or

    <label>
   <input type="text" name="lastname" />
   Last Name
</label>

    Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.

    Either one is valid. I like to use either the first or second example, as it gives you more style control.