Simon Willison’s Weblog

Label elements

Peter Van Djick asks why does hardly anyone use LABEL tags? It’s a very good question—in my opinion label tags, like title attributes on links, are a complete no-brainer. They’re well supported by all modern browsers, completely backwards compatible (in that there are no ill effects for older browsers), great for accessibility and easy to implement. They’re much more than just an accessibility issue—the usability of a form is dramatically increased by the addition of label tags, especially for radio and check boxes where they greatly increase the “target area” for the user to click on.

In case you haven’t come across them before, here’s how they work:

<label for="myFormElement">Your name:</label>
<input name="yourName" type="text" id="myFormElement" />

The for attribute on the label links it to the form element with that ID. When the user clicks on the label, their cursor will jump to the form field. If the targetted form element is a check box or radio box clicking the label text will toggle it. Labels can by styled using CSS just like any other element—I often use display: block to stack them above their corresponding form elements to save me from having to mess around with the layout of a form, as can be seen on my Contact Page.

If you aren’t using label elements, now’s the time to start.