Pour améliorer un formulaire, vérifiez trois moments : comprendre la demande, saisir une valeur et corriger une erreur. Commencez par un formulaire court et un scénario réaliste. Un bouton qui fonctionne ne suffit pas si la personne ne sait pas quel champ corriger après l'envoi.
Inventorier ce que chaque champ demande
Pour chaque entrée, relevez son nom visible, son caractère obligatoire, son format et la raison de sa présence. Supprimez les demandes inutiles avant d'ajouter des explications. Un formulaire plus complexe exige davantage de contrôles et multiplie les occasions d'erreur.
Associez un intitulé explicite au champ. Avec un contrôle HTML courant, un élément label dont le for correspond à l'identifiant du champ est une solution habituelle. Le tutoriel formulaires du W3C décrit l'étiquetage, les instructions et les retours à l'utilisateur. D'autres associations sont possibles ; ce mécanisme n'est pas une règle exclusive pour tous les composants.
Écrire une aide qui reste disponible
Une indication de format doit être lisible avant et pendant la saisie. Ne comptez pas seulement sur le texte provisoire à l'intérieur du champ, qui disparaît quand une valeur est entrée. Évitez aussi les formats implicites : si une date est attendue selon une notation précise, montrez un exemple adapté.
Essayez la saisie avec une valeur plausible, puis avec une valeur incomplète. Observez si le formulaire explique l'erreur sans effacer les autres réponses. Le message doit permettre une action : « Ajoutez le nom de votre organisation » est plus utile que « Échec » lorsque c'est réellement la donnée manquante.
Exemple fictif : une inscription à un atelier
Imaginons deux champs, « Votre nom » et « Votre adresse e-mail ». La personne oublie le second et valide. La version à corriger colore seulement sa bordure en rouge et affiche « Formulaire incorrect » en haut de page.
Préparez une version qui nomme l'erreur près du champ et indique clairement comment la corriger. Reliez le message au contrôle dans le code, puis vérifiez son annonce avec les technologies d'assistance pertinentes. Choisissez un comportement de focus cohérent avec le formulaire ; une annonce répétée à chaque touche peut devenir gênante.
La fiche de contrôle contient la valeur soumise, le texte du message, l'emplacement du focus après validation et la conservation des réponses déjà saisies. Refaites enfin une soumission valide pour vérifier la confirmation et éviter un parcours qui ne teste que l'erreur.
Contrôler le parcours développé
Reprenez ces étapes sans souris grâce au guide de navigation au clavier. Vérifiez aussi un écran étroit et un niveau de zoom plus élevé : les aides ne doivent pas se détacher visuellement des champs concernés.
Si le formulaire n'existe qu'en maquette, vous pouvez éprouver son scénario dans un prototype. Ce travail prépare les messages et les états ; il ne démontre pas que le futur code annoncera correctement les erreurs. Documentez séparément ce qui a été vérifié sur le prototype et sur le site.
Questions fréquentes
Un astérisque suffit-il pour un champ obligatoire ?
Il faut que son sens soit explicite pour la personne et que le caractère requis soit transmis correctement dans l'implémentation. Une légende claire évite de demander au lecteur de deviner la convention.
Faut-il afficher toutes les erreurs pendant la frappe ?
Pas systématiquement. Une saisie temporairement incomplète peut être normale. Choisissez le moment du retour selon le champ et vérifiez qu'il n'interrompt pas inutilement la saisie.
Peut-on se limiter à la validation du navigateur ?
Elle constitue une aide, mais ne couvre pas toute la compréhension du formulaire ni le traitement serveur. Contrôlez les messages, les données effectivement acceptées et les échecs de soumission réels.
Sources
Documentation consultée lors de la relecture du 10 septembre 2026.