====== 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.


<code html>
<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>
</code>

<note>**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.

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

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.
</note>

<note attention>**Warning**

It is important to [[notices:graphique-ergonomique:prevoir-des-intitules-identiques-pour-les-champs-dont-la-fonction-est-identique|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.

</note>


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:signaler-l-ouverture-des-nouvelles-fenetres]]
  * Next recommendation: [[notices:html-css:integrer-les-informations-utiles-a-la-saisie-directement-dans-les-balises-label]]
</note>