Nested format for HTML label tag

Introduction to the label element

The modest HTML label element is unlikely to stimulate any undue media hype. It has quietly fulfilled its function since the beginning of time, providing a built-in way to improve our form interactions. As a basic example let us apply labels to a set of radio buttons:

    
    
<p>Which is your favourite teenage mutant ninja turtle?</p>
<ul>
  <li>
    <input id="leonardo" name="turtle" value="leonardo" type="radio">
    <label for="leonardo">Leonardo</label>
  </li>
  <li>
    <input id="raphael" name="turtle" value="raphael" type="radio">
    <label for="raphael">Raphael</label>
  </li>
  <li>
    <input id="donatello" name="turtle" value="donatello" type="radio">
    <label for="donatello">Donatello</label>
  </li>
  <li>
    <input id="michelangelo" name="turtle" value="michelangelo" type="radio">
    <label for="michelangelo">Michelangelo</label>
  </li> 
</ul>
<footnote>
 Of course, everyone knows that the only acceptable answers are <label for="leonardo">Leonardo</label> 
  or <label for="raphael">Raphael</label>.
</footnote>
    
  

In the code sample above we can see how we use the for attribute on the label element to wire it to an input element with a matching id. But what are the benefits in writing our markup with the label, would a simple TextNode not suffice? The benefits are two-fold:

1. Because the label defines which input it relates to, if the user clicks the label the browser will focus the associated input field. In our example, if you click the label you will select the radio button. This provides a substantial improvement in user experience for touch-screen devices.
2. Explicitly tying the label with the input also improves accessiblity, as screen-readers can read out the label when the input element has focus.

The code sample above is rendered below, see how the label, itself, captures clicks and taps to pass focus to the associated input element:

The label and input elements happen to be placed adjacent to one another in the markup, but this is not a requirement; a fact I have tried to highlight by including additional labels connected to the same input elements in the footnote. If you click the labels in the footnote you should also see the radio selection updated.

The fact that the for attribute identifies the target input elment by its id has a semantic significance: a label is associated with a single input element (as an id should be unique to a page). By contrast, and from the example above, you can see that there is nothing preventing an input element from having many associated labels.

Tidy things up with nested format

Using the for attribute on your label to tie it to an arbitrary input, anywhere on the page, is very flexible. But it is also verbose and error-prone, make a typo on either side and the elements will not get associated correctly. And whilst it might, in some case, be useful to have your input and label in different locations, for most cases these elements are usually tightly coupled on the page. In these cases it can be neater to use the nested format for the label. In this format the ilabel defines and HTML block in which the input field is nested. The association between input and input is implicit and there is no need of the for attribute, nor an id on the input. We rewrite our example above using this alternative format:

    
    
<p>Which is your favourite teenage mutant ninja turtle?</p>
<ul>
  <li>
    <label><input name="turtle" value="leonardo" type="radio"> Leonardo</label>
  </li>
  <li>
    <label><input name="turtle" value="raphael" type="radio"> Raphael</label>
  </li>
  <li>
    <label><input name="turtle" value="donatello" type="radio"> Donatello</label>
  </li>
  <li>
    <label><input name="turtle" type="radio"> Michelangelo</label>
  </li> 
</ul>
    
  

This is equivalent to our original markup, with the exception of the footnote which will not work unless we reintroduce the ids to the input elements. This aside, the new format is terser, with much less fluff and much easier to maintain. Beautiful.

Beware the traps

Whilst, ostensibly, being a simple HTML element, the label comes with a few gotchas to be aware of:

1. Don't embed buttons or links within a label. Should clicking the label activate the form input, or trigger your button/link?
2. Don't embed heading elements within a label, as this can confuse navigation with assistive technologies.
3. Don't apply a label to a button element or input element with type="button" and valid value. In both cases the label is not needed and can interfere with assistive technologies.

Summary

We looked at the label tag as a simple way to make our input elements more user-friendly and accessible. We also looked at how the nested format for label tags can be less error-prone and easier to maintain.

Do you have a different opinion? Let me know.

References

1. MDN docs for the label element