Accueil >Web >Référence HTML – éléments et attributs >label – étiquette du champ

label – étiquette du champ

<label for="id-du-champ">étiquette</label>

L’étiquette d’un champ de formulaire. On la relie au champ par l’attribut for (même valeur que l’id du champ) ou en entourant le champ. Un clic sur l’étiquette place alors le focus dans le champ et coche la case ou le bouton radio – la zone à toucher s’agrandit.

  • Affichage par défaut : display: inline
  • Balise de fermeture : obligatoire
  • Contenu : contenu phrasé, au plus un champ et sans autre label
  • Où il peut figurer : partout où le contenu phrasé est autorisé
  • Interface DOM : HTMLLabelElement

Attributs

  • for – id du champ auquel appartient l’étiquette.

Exemples

Une étiquette via for et une étiquette qui entoure le champ :

<p><label for="tel">Téléphone</label> <input type="tel" id="tel" name="tel" autocomplete="tel"></p>
<p><label><input type="checkbox" name="consent"> J’accepte les conditions générales</label></p>
Résultat

Accessibilité

Le texte de l’étiquette est le nom accessible du champ – le lecteur d’écran le lit quand le champ reçoit le focus. Sans étiquette, l’utilisateur n’entend que « zone de saisie ». L’étiquette doit être visible ; si la mise en page ne le permet pas, aria-label ou un label masqué visuellement aident.

Points d’attention

  • La valeur de for doit correspondre exactement à l’id du champ, qui doit être unique dans la page. Avec deux formulaires identiques sur une page (en-tête et pied de page), chacun a besoin de ses propres id.
  • Ne placez ni liens ni boutons dans une étiquette – un clic dessus se confond avec un clic sur l’étiquette.
  • placeholder n’est pas une étiquette : il disparaît dès que le visiteur commence à écrire.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 4. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
input – champ de formulaire
select – liste déroulante
textarea – texte sur plusieurs lignes
fieldset – groupe de champs
legend – légende du groupe de champs
id – identifiant (attribut)