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
- Notes on the new Claude analysis JavaScript code execution tool - 24th October 2024
- Initial explorations of Anthropic's new Computer Use capability - 22nd October 2024
- Everything I built with Claude Artifacts this week - 21st October 2024