| Depr. | Version |
|---|---|
| No | HTML 4 |
| IE5.5+ | FF1+ | SA3.1+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
The for
attribute is the glue that binds the text contained inside the
label element to the form control to which it relates.
There’s another way that descriptive text can be linked to a form control:
instead of using a for attribute, the opening
<label> and closing </label> tags can be
wrapped around the form control (known as implicit association). In that
instance, the example code would look like this:
<label accesskey="b"><input type="radio" name="radFriendship"
value="Not_Applicable" id="b"/> Not_Applicable</label>
Finally, you could take the belt-and-braces approach and do
both: wrap the label around the form control
and link it using the for
attribute:
<label for="b" accesskey="b"><input type="radio"
name="radFriendship" value="Not_Applicable" id="b"/>
Not_Applicable</label>
Note that the former method—using the
for attribute, known as explicit association—is by
far the safer option (at least one screen reader, Window Eyes, is not able
to make the correct association when the label is
wrapped around the related text).
Example
This for
attribute points to a form control with the
id of "b":
<input type="radio" name="radFriendship" value="Not_Applicable"
id="b"/>
<label for="b" accesskey="b">Not_Applicable</label>
Value
This attribute takes as its value a
reference to an existing (and valid) id of a form
control.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | None | None | Full | Full | Full | Full | Full | Full |
The
for attribute (explicit association) is more widely
supported than the approach that involves simply wrapping the
label around the control, and is the preferred method.
It’s also more flexible, as the text and control may be separated by other
HTML structural elements that would make it impossible to wrap the inline
label around the control and the associated text. For
example, the label may be contained inside one
div element while the form control may be contained
inside a separate div, or perhaps the two elements are
(unfortunately) laid out using a table and hence in different table
td elements. It would not be possible to have the
opening <label> tag in one of these elements and the
closing </label> tag in the other without creating
invalid/broken HTML.
