Un champ de saisie peut-il avoir deux étiquettes ?

Question

Mary avait un petit formulaire, et ses champs étaient étiquetés exactement comme ça.
Dès qu'une erreur se glissait, elle semait la confusion.

J'ai une étiquette pour chaque champ de saisie... une affaire assez classique. Après avoir validé le formulaire, j'affiche un petit paragraphe utile en haut du formulaire détaillant les informations manquantes ou incorrectes.

Puis-je avoir deux étiquettes pour le même champ de saisie ? L'une dans le formulaire proprement dit, et l'autre dans le texte de rappel de validation ? Y a-t-il une raison pour laquelle je ne devrais pas le faire ?

Answer 1

Je suppose que cette question concerne les formulaires HTML. De la spécification :

L'élément LABEL peut être utilisé pour joindre des informations aux contrôles. Chaque élément LABEL est associé à un seul contrôle de formulaire.

Ainsi, chaque contrôle de formulaire peut être référencé par plusieurs étiquettes, mais chaque étiquette ne peut référencer qu'un seul contrôle. Ainsi, s'il est utile d'avoir une deuxième étiquette pour un contrôle (et dans la situation que vous décrivez, c'est le cas), n'hésitez pas à ajouter une deuxième étiquette.

Answer 2

Le code HTML est légal et fonctionne (un clic sur l'une des étiquettes transfère le focus sur le champ en question).

C'est un peu plus délicat à faire correctement pour des raisons d'accessibilité.

Ce n'est pas une approche "commune", et pour cette raison, au moins un lecteur d'écran commun (j'ai testé avec NVDA) ne lit que la première étiquette lorsque vous déplacez le focus dans le champ - il ignore toute étiquette supplémentaire pour le même champ.

Ainsi, si votre message d'erreur se trouve en haut de la page, un utilisateur aveugle ou malvoyant qui navigue dans les champs n'entendra que le message d'erreur lorsqu'il tombera sur le champ en question, et non le "vrai" libellé à côté.

Par conséquent, si vous formulez correctement le message d'erreur, cela peut être une bonne chose (c'est certainement mieux que de simplement mettre en évidence le champ non valide en rouge !)

Answer 3

Oui, vous pouvez faire pointer plusieurs étiquettes sur le même contrôle de formulaire. Ceci est parfaitement légal :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Ceci n'est qu'un exemple... normalement, vous devriez envelopper ces lignes avec une étiquette puisqu'elles sont proches.

Answer 4

Je n'ai pas essayé, mais je suppose que c'est possible. Mais je ne recommande pas de l'utiliser, parce qu'une étiquette définit ce à quoi le champ est destiné, un message d'erreur ne le fait pas. Je ne devrais donc pas utiliser d'étiquette pour les avertissements de validation.

Answer 5

Avez-vous essayé ce qui se passe ? Si cela fonctionne, je ne pense pas que cela puisse causer des dommages à votre formulaire ou à la page. Et vous obtiendrez un plus car l'utilisateur pourra cliquer sur l'erreur de validation et mettre l'accent sur le bon champ.