Thursday, February 20, 2020

Should I put input elements inside a label element?

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

Example 1:

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

Example 2:

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

Example 3:

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

Note: 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.

No comments:

Post a Comment