Des étiquettes à l'intérieur ou à l'extérieur des entrées de texte?
Duplicata possible:
Sur les formulaires, le texte d'espace réservé en ligne est-il meilleur qu'une étiquette à l'extérieur de chaque champ?
Y a-t-il des avantages/inconvénients à placer ses étiquettes en dehors des entrées de texte comme la boîte de connexion de Gmail par rapport à les placer à l'intérieur (en tant qu'espaces réservés) comme la boîte de connexion de Twitter (autre que le manque de support de ce dernier sur les anciens navigateurs)?
Les étiquettes dans les champs disparaissent lorsque vous commencez à taper, ce qui signifie que le contexte de la réponse disparaît. Si vous oubliez la question à laquelle vous répondez, vous devez effacer le champ et espérer revoir l'étiquette. De plus, il n'y a aucun moyen de revenir en arrière et de vérifier vos réponses, un cauchemar sur une forme plus longue.
Notez qu'en termes de sémantique et d'accessibilité, il existe une différence entre un label et un placeholder
La clé est de ne pas supposer qu'un espace réservé peut prendre la place d'une étiquette sur un champ de formulaire.
La question de savoir comment mettre cela en œuvre est discutable. Avant l'attribut d'espace réservé de HTML 5, il existait deux méthodes courantes:
Masquez l'étiquette avec CSS, ajoutez du texte dans le champ lui-même et supprimez-le sur le focus avec JS
Déplacez l'étiquette de sorte qu'elle se trouve physiquement au-dessus du champ.
Je préférais généralement la deuxième option car elle semblait plus pure.
Aujourd'hui, cependant, avec HTML 5, nous avons un attribut réel pour cela appelé "espace réservé". De plus, nous pouvons utiliser aria-label pour l'accessibilité:
En théorie, un champ avec ces deux attributs définis sur le texte que vous voulez pour une étiquette devrait fonctionner - à la fois du point de vue de l'utilisabilité et du point de vue de l'accessibilité.
En ce qui concerne l'utilisation, je suggère généralement de toujours utiliser une balise label appropriée et de la placer à côté ou au-dessus du champ de formulaire. Il s'agit de l'option la plus claire pour la plupart des utilisateurs et la plus appropriée en termes de balisage. En outre, vous pouvez toujours utiliser un attribut d'espace réservé pour plus de précisions si nécessaire.
Quand mettre une étiquette dans le champ? Je dirais que cela se résume généralement à des considérations d'espace et de conception visuelle.
Étiquettes à l'extérieur, exemple de copie ou conseils sur l'achèvement à l'intérieur (qui disparaît à l'entrée). Donc une étiquette "Date de naissance" mais "jj/mm/aaaa" à l'intérieur du champ pour indiquer le format attendu.