23. Étiquettes et placeholders pour guider l'utilisateur
De bons formulaires sont utilisables et accessibles. Les étiquettes et les placeholders sont vitaux pour guider l'utilisateur.
23.1 L'élément <label> (Obligatoire pour l'accessibilité)
Un <label> (étiquette) associe un texte à un contrôle de formulaire spécifique. C'est obligatoire pour l'accessibilité car les lecteurs d'écran ont besoin de savoir quel texte correspond à quelle saisie.
Pour lier un label à un input, l'attribut for du label doit correspondre à l'attribut id de l'input.
html
Astuce : Si vous cliquez sur le texte de l'étiquette, le champ de saisie associé recevra automatiquement le focus.
23.2 L'attribut placeholder
Le placeholder fournit un court texte d'indice affiché à l'intérieur du champ de saisie lorsqu'il est vide. Ce texte disparaît lorsque l'utilisateur commence à taper.
html
Attention : Les placeholders ne doivent pas remplacer les étiquettes. Les étiquettes sont des instructions permanentes, tandis que les placeholders sont des indices temporaires.