Label relié au champ texte
Donne au champ de nom un libellé visible relié par for/id, un nom de soumission et un indice d'autocomplétion adapté.
Objectifs de la leçon
- Construire le nom accessible d'un champ avec un élément HTML adapté.
- Ajouter les attributs qui rendent la structure testable.
- Expliquer l'impact utilisateur de la décision prise.
Construire une saisie exploitable
Un formulaire fiable indique ce qui est attendu, transmet des données nommées et utilise les capacités natives du navigateur avant d'ajouter du JavaScript.
« Label relié au champ texte » sert ici à rendre le nom accessible d'un champ explicite dans le document.
Décision de saisie
Choisis le contrôle selon la donnée, relie toujours son libellé visible et donne un name aux valeurs qui doivent être envoyées.
Évite de traiter le nom accessible d'un champ comme un simple détail visuel : le choix doit rester compréhensible dans le DOM et justifiable en revue de code.
Test de saisie et d'envoi
Utilise le formulaire au clavier, soumets des valeurs valides et invalides, puis vérifie que la requête contient des noms et valeurs compréhensibles.
Pour html-06-label-input-text, commence par le premier test en échec et relie son message à l'élément, l'attribut ou la relation concernée.
Vocabulaire lié
- form — Zone de saisie envoyable.
- label — Nom accessible visible d'un champ.
- input — Contrôle de saisie.
- required — Contrainte native obligatoire.
- autocomplete — Indice de remplissage automatique.
Validation
- Je sais expliquer pourquoi le nom accessible d'un champ améliore PulsaConf.
- Je peux relier chaque test à une exigence utilisateur.
- Je garde une structure compréhensible sans style CSS.