for (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA3.1+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

for="field ID"

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.

User-contributed notes

Related Products