7.1.1. Use the <label> tag as well as the “for” and “id” attributes to associate form controls with their text labels

Each form control (except buttons) must be associated with a label.

To do this, proceed as follows:

Use <label> to tag each text label.
Add a for attribute to each <label> tag as well as an id attribute to each form control.
Enter an identical value for the id and for attributes for each text label/form control pair.

<label for="name">Your name</label>
<input type="text" id="name" name="name" />
 
[…]
 
<label for="birth-year">Year of birth</label>
<select id="birth-year" name="birth-year">
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    […]
</select>

Note

Sometimes, some form controls do not have a visible text label. In this context, use the title attribute to associate a label with a form control.

<input type="text" title="Your search" name="search" />

Note that the title attribute must not be used if the for and id attributes already have values to associate a text label with a form control.

Warning

It is important to use the same text labels for form controls with identical functions.

For example, if several authentication forms are present in a website, do not use the text label “Name” for one and “Login” for another.

Previous recommendation: 6.3.1. Indicate the opening of new windows
Next recommendation: 7.1.2. Include information about expected field values directly in <label> tags

7.1.1. Use the <label> tag as well as the “for” and “id” attributes to associate form controls with their text labels

Related recommendations