It is fairly easy to distinguish a developer’s knowledge level by their usage of
label elements. To see how much they care about accessibility, usability and semantics.
If this is something new to you, I’d recommend that you first read Label – the secret element. What I wanted to touch on here is the semantic value on how you use the
label element together with form elements (e.g.
Ways to use
The most common is like this:
<label for="user-name">Name</label> <input id="user-name" type="text">
Another way which has become fairly popular is to wrap the corresponding form element within the label element, e.g:
<label> Name <input id="user-name" type="text"> </label>
With this approach you don’t need to specify the
for attribute to know which element should get focus when you click on the text name. That is, for most web browsers but Internet Explorer; there you still have to specify the
id of element you want to connect to the
However, looking at this last approach I’d say that it’s less good from a semantic standpoint. Just looking at the word label, tasting it, it is exactly what it is: a label. Putting any form element within the label takes away the value of the label, and instead becomes some sort of block element (
div), like a container, but with label functionality thrown in for good measure.
In my mind the form element isn’t a part of the label; it has a connection to it. I’m sure some people would like to argue that it is nice for the structure to put the connected form element within its label, but for such relations we have the
My recommendation is: no form elements within labels.