In this article I describe two under-used HTML features that can be used to improve the usability of your HTML forms.
All common desktop window managers support the labelling of input fields, so by clicking on say the label of a checkbox, the checkbox itself is selected. They also support keyboard shortcuts (access keys) to move around the form quickly.
Checkboxes and radio buttons are inherently small and thus a hard target to click on. Windows applications almost always allow you to click on label text to use the form element. Why should web pages be any different? I've gotten so used to putting labels on my form elements that I get frustrated when using websites that have not done so.
Labels
Internet Explorer and Mozilla both support the LABEL HTML element. This is used for marking a span of text as the label of a checkbox or radio button. This allows you to click on the text to activate the related form element, and also causes the text to be placed in a dashed box when the element has the input focus.
The LABEL element syntax is simple. Just surround the label text with a label tag, with the attribute FOR giving the ID of the form element to which it is related. Don't forget to close the element.
Note that you must give the ID of the form element as specified by the ID attribute, the NAME attribute will not do - especially when you consider that many radio buttons can share the same name.
Example Labels
Example:
Other form elements
You can use the LABEL element on any form element, though it is most useful on a checkbox or radio control. For example, click on the label of the text below:
Access Keys
Access keys are perhaps less useful in typical websites, but can be used to great effect in HTML-based applications. You can specify an access key on a form element or hyperlink (and, more recently, a bunch of other elements). Pressing ALT in conjuntion with the access key will give that element the focus (scrolling it into view if necessary). On some elements, such as checkboxes and radio buttons (but not hyperlinks), it will also perform a click action.
The ACCESSKEY attribute is set on the element to which it applies and contains a single character to specify the keypress.
You can also use a label in conjunction with an access key, and since the label can contain any HTML content you can even underline the key letter:
Of course, you could have acheived the same effect with an access key on the form element itself.
Compatibility
LABEL is defined in HTML 4.0 (earlier?) and is supported in Internet Explorer 4.0 onwards. In Mozilla, only labels for checkboxes and radio buttons are supported.
ACCESSKEY is defined in HTML 4.0 (earlier?) and is supported in Internet Explorer 4.0 for form elements, hyperlinks and some others. They are supported on labels in IE5, where support is also added for access keys on a bunch of useless elements. Mozilla supports accesskeys also but will not scroll the element into view.
A note on images as part of labels: In Mozilla you can click on the image to activate the associated form element correctly. In Internet Explorer, including IE6, you can mouseover the image to highlight the checkbox but clicking on the image does nothing.
Footnote
This article was originally written in April 2002. Since then I am pleased to report that many more (but far from all) websites are using labels.