Associer chaque champ à un libellé

Un formulaire peut sembler compréhensible à l’écran tout en laissant vos champs difficiles à identifier, notamment avec un lecteur d’écran ou lorsque la personne navigue au clavier. Vous allez associer chaque champ de réservation à un libellé visible, afin que son rôle soit clairement annoncé et que la zone de saisie soit facile à atteindre.

Dans la leçon « Délimiter le contenu principal », vous avez déjà appris à identifier les zones sémantiques de la page. Ici, concentrez-vous sur la relation entre le texte qui nomme un champ et le champ lui-même : cette relation doit être explicite dans le HTML, et pas seulement suggérée par la disposition visuelle.

Associer un libellé à un champ

L’élément label fournit le libellé d’un champ. Pour établir l’association, donnez au champ un attribut id, puis donnez au label un attribut for dont la valeur est exactement la même. Dans l’exemple ci-dessous, le texte « Nom complet » est associé au champ dont l’identifiant est nom.

<div class="atelier-champ">
    <label for="nom">Nom complet</label>
    <input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>

L’association ne dépend pas de la proximité des éléments dans le code : c’est la correspondance exacte entre for="nom" et id="nom" qui la crée. Lorsque la personne active le libellé, le navigateur place le focus sur le champ correspondant. Le texte reste également visible pour toutes les personnes qui remplissent le formulaire, sans leur demander de deviner le rôle de la zone de saisie.

Vérifier toutes les associations du formulaire

Le formulaire de réservation contient plusieurs champs, dont une liste déroulante pour la formule. Chacun doit avoir son propre texte de libellé et un identifiant distinct. Vérifiez notamment que la valeur de for reprend sans modification la valeur de id : une différence de lettre ou de casse suffit à rompre l’association.

<div class="atelier-champ">
    <label for="courriel">Adresse courriel</label>
    <input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
    <label for="telephone">Téléphone</label>
    <input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
    <label for="date">Date souhaitée</label>
    <input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
    <label for="participants">Nombre de participants</label>
    <input id="participants" name="participants" type="number" min="1" max="8" value="1" required>
</div>
<div class="atelier-champ">
    <label for="formule">Formule</label>
    <select id="formule" name="formule" required>
        <option value="">Choisissez une formule</option>
        <option value="decouverte">Découverte</option>
        <option value="complete">Complète</option>
    </select>
</div>

Le libellé de la formule est aussi associé à un contrôle, même si celui-ci est un élément select plutôt qu’un élément input. La même règle s’applique : for="formule" correspond à id="formule". Les types de champs et leurs contraintes sont déjà présents dans l’état du projet ; leur choix et leur fonctionnement seront étudiés dans les prochaines leçons.

À retenir

• Placez un libellé visible dans un élément `label` pour chaque champ du formulaire.
• Faites correspondre exactement la valeur de `for` avec celle de `id`.
• Donnez à chaque champ un identifiant distinct afin que l’association désigne une seule cible.
• Appliquez aussi cette association aux contrôles qui ne sont pas des éléments `input`, comme `select`.
• Vérifiez les libellés et leurs associations avant de poursuivre le formulaire.

Dans la leçon suivante, vous choisirez des types de champs adaptés aux informations demandées dans le formulaire.