Question

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> 

Answer 1

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.