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:

  1. Use <label> to tag each text label.
  2. Add a for attribute to each <label> tag as well as an id attribute to each form control.
  3. 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>


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.


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.

notices/html-css/utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-associer-les-champs-a-leurs-intitules.txt · Last modified: 30 December 2013 at 18:07 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: