rocknbil - 6:54 pm on Nov 20, 2009 (gmt 0)

Well, common sense dictates that anything inside a label should be just that, a label, right? So semantically, a label should only contain a label.

Second, it's also an accessibility tool. Code up a test:

<form action="">
<p><label for="test">Test</label> <input type="text" name="test" id="test"></p>
<p><label for="test2">Test 2</label> <input type="text" name="test2" id="test2"></p>
<p><label for="test3">Test 3</label> <input type="text" name="test3" id="test3"></p>
</form>

On load - nothing new. But mouse over the text "Test 2" and click.

What happens? It tabs the cursor to the field "test2", and does so for any of the other labels.

This still works if the label surrounds the controls, but like tables for layout, <br><br> for space when you don't care about the semantics of <p> or how to style it for the effect you want, and other "perversions" of elements, it's not how the element was intended to be used. Also like those examples, "if it works it works," and if presentation is your only directive, it doesn't matter (but should . . . )

It's also a great tool for screen readers when correctly used.