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
- Prompts.js - 7th December 2024
- First impressions of the new Amazon Nova LLMs (via a new llm-bedrock plugin) - 4th December 2024
- Storing times for human events - 27th November 2024