Label elements
11th February 2003
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.
More recent articles
- OpenAI DevDay: Let’s build developer tools, not digital God - 2nd October 2024
- OpenAI DevDay 2024 live blog - 1st October 2024
- Weeknotes: Three podcasts, two trips and a new plugin system - 30th September 2024