<label>

Description

L’élément <label> associe une description textuelle à un contrôle de formulaire. L’association se fait via l’attribut for (pointant vers l’id du contrôle) ou en encapsulant le contrôle dans le <label>. Cette association agrandit la zone cliquable et est indispensable pour les lecteurs d’écran.

Syntaxe

<label for="email">Email :</label>
<input type="email" id="email" name="email">

Exemples

Association explicite via for/id :

<label for="nom">Nom complet :</label>
<input type="text" id="nom" name="nom" required>

Association implicite (label enveloppant) :

<label>
  Nom complet :
  <input type="text" name="nom" required>
</label>

Checkbox avec label cliquable :

<label>
  <input type="checkbox" name="newsletter">
  Recevoir la newsletter
</label>

Attributs spécifiques

Attribut	Type	Description
for	string	ID du contrôle de formulaire associé. Si absent, le <label> doit contenir le contrôle.

Notes

Pourquoi <label> est essentiel :

1. Accessibilité : les lecteurs d’écran annoncent le label quand le champ reçoit le focus.
2. Zone cliquable : cliquer sur le label active le champ associé (case à cocher, bouton radio, champ texte).
3. Mobile : un label visible agrandit la cible tactile effective.

placeholder ≠ label : placeholder disparaît à la saisie et n’est pas toujours lisible par les technologies d’assistance. Il ne remplace jamais un <label>.