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.