code Mieux gérer les messages d’erreur de vos formulaires

Comment multiplier les éléments label peut améliorer l'ergonomie pour vos utilisateurs.

Un problème vieux comme le formulaire web

Lorsqu’un envoi de formulaire est bloqué pour cause d’erreurs de saisie, une bonne pratique est d’afficher en début de formulaire la description des problèmes rencontrés, avec des liens pour accéder directement au champs posant problème.

Voici un exemple avec un simple formulaire de publication d’article.

Le formulaire original :
Formulaire simple

Le même après une saisie incorrecte :
Affichage des erreur de saisie

Nombreux sont les développeurs ayant eu à mettre en place ce genre de liste d’erreurs, il n’est pas toujours simple de mettre en place le lien entre l’erreur et le champ correspondant.

La documentation peut vous inspirer

Il y a quelques jours, j’ai (re)lu sur le site du w3c la documentation de la balise label que connaissent bien tous ceux qui se sont déjà attelés à la création d’un formulaire web :

La définition de l’élément label en html 4.01 :

L'élément label peut s'utiliser pour attacher des informations aux commandes. Chaque élément label est associé à exactement une commande de formulaire.

L'attribut for associe explicitement un label à une autre commande : la valeur de l'attribut for doit être la même que celle de l'attribut id de l'élément de commande associé. On peut associer plusieurs éléments label à la même commande en créant plusieurs références via l'attribut for.

En clair, au-delà du label usuel utilisé pour sa légende un champ de formulaire a le droit d’en posséder plusieurs autres apportant diverses informations.

Pourquoi ne pas utiliser des champs label pour afficher des messages d’erreur ?

Avec peu d’efforts, la solution consistant à utiliser des label au lieu de liens permet d’obtenir une structure html intuitive et d’améliorer l’accessibilité de vos formulaires.

<div id="error_list">
  <p><strong>Enregistrement impossible :</strong></p>
  <ul>
    <li><label for="auteur">Auteur</label> champs obligatoire</li>
    <li><label for="categorie">Catégorie</label> champs obligatoire</li>
    <li><label for="contenu">Contenu</label> trop court, 30 caractères minimum</li>
  </ul>
</div>
#error_list label
{
  cursor: pointer;
  color: #900;
  text-decoration: underline;
}

Le code fonctionne également avec les anciennes version d’Internet Explorer, à partir d’IE5.

C’est le genre de petite découverte qui me fait aimer l’intelligence de ce bon vieux html, alors qu’on croyait en connaître toutes les subtilités.

photo by The Akshay

À PROPOS DE L'AUTEUR

Avant de fonder UI Studio, Éric Rogé a travaillé dans différentes agences web et sociétés de service en tant que chef de projet et développeur. Il s’est spécialisé dans la création de sites flexibles, modulables et accessibles aux handicapés.

DERNIERS ARTICLES