lucian.jp lucian.jp - 2 months ago 12
HTML Question

Should I put input tag inside label tag?

I was just wondering if there is a best practice concerning label and input tag :

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>

Answer

From w3: 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.

Comments