Bases des formulaires

Clique sur le mot Email à côté d'un champ de formulaire bien construit et le curseur saute dans la case. Ce petit détail, c'est l'élément label qui fait son travail.

À quoi sert un formulaire

Les champs de recherche, les pages d'inscription et les écrans de paiement sont tous des formulaires. Un élément <form> regroupe les contrôles, et quand le visiteur l'envoie, le navigateur transmet le name de chaque contrôle avec sa valeur à l'adresse indiquée dans l'attribut action du formulaire. L'attribut method dit comment : get met les données dans l'adresse, ce qui convient aux recherches que l'on pourrait mettre en favori, alors que post les envoie dans le corps de la requête, ce qui convient à tout ce qui modifie des données, comme une commande. HTML construit le formulaire ; un programme sur le serveur décide quoi faire de ce qui arrive.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Chaque contrôle a besoin d'un label

L'élément <label> nomme un contrôle. Relie les deux en donnant à l'input un id et au label un attribut for identique, ou en plaçant l'input à l'intérieur du label. Ce lien fait deux choses. Les lecteurs d'écran lisent le label quand le champ reçoit le focus : l'utilisateur entend Email, zone de texte, au lieu de simplement zone de texte. Et cliquer sur le label donne le focus au champ ou coche la case, ce qui offre à tout le monde, surtout sur téléphone, une cible plus grande. Un placeholder (texte d'aide gris dans la case) n'est pas un label : il disparaît dès que tu tapes, il est souvent peu contrasté, et certaines technologies d'assistance l'ignorent.

Les types d'input

L'attribut type de <input> change le contrôle. text est la case d'une ligne par défaut. email, tel et url se ressemblent mais affichent un clavier adapté sur les téléphones, et le navigateur vérifie qu'une adresse e-mail a la bonne forme. number accepte des chiffres et peut avoir min et max. password masque ce que tu tapes, date propose un calendrier, et checkbox et radio sont des cases à cocher. Pour un texte plus long, utilise <textarea>, et pour un choix dans une liste, <select> avec des éléments <option> à l'intérieur.

Regrouper les choix

Les boutons radio d'une même question partagent le même name, et on ne peut en choisir qu'un à la fois. Entoure le groupe avec <fieldset> et place la question dans <legend>. Un lecteur d'écran lit alors la question avec chaque option : Taille du pain, Petit, bouton radio, 1 sur 2. Chaque bouton radio garde son propre label.

Boutons et vérifications intégrées

Un <button> dans un formulaire l'envoie par défaut ; écrire type="submit" le rend explicite, et type="button" crée un bouton qui ne fait rien tant que JavaScript ne lui donne pas un rôle. Avant l'envoi, le navigateur peut vérifier les champs pour toi. required bloque le formulaire si le champ est vide, type="email" refuse un texte sans @, et minlength, min et max fixent des limites. Ces vérifications aident le visiteur à corriger ses erreurs tôt, mais elles s'exécutent dans son navigateur et peuvent être contournées : le serveur doit donc vérifier les données à nouveau. L'attribut autocomplete, avec des valeurs comme email ou name, permet au navigateur de remplir des informations enregistrées, ce qui évite de taper pour tout le monde et aide surtout les personnes qui ont des difficultés motrices ou de mémoire.