La majorité des sites Web comportent au moins un formulaire : pour entrer en contact avec l'administrateur, pour gérer les données (si on détient les droits requis), etc.
Votre expérience en tant qu'utilisateur de différents sites Web vous a sans doute démontré que certains formulaires sont très rapides à remplir alors que d'autres prennent une éternité. Certains sont agréables alors que d'autres sont carrément mal conçus. Certains sont clairs alors que pour d'autres, on se demande qu'est-ce qui est attendu de nous.
Voici à titre indicatif quelques commentaires positifs et constructifs sur un formulaire réel.
En tant que développeur Web, vous devez connaître les principales règles qui permettront de rendre un formulaire Web ergonomique. Voici donc quelques-unes des meilleures pratiques pour développer un formulaire.
▼Publicité Le texte se poursuit plus bas
Le formulaire débutera toujours par un titre clair suivi, si nécessaire, d'une indication du rôle de ce formulaire.
Le focus doit être dans la première case de saisie dès le départ.
L'usager doit savoir ce qui doit être entré dans une zone de saisie dès le premier coup d'oeil et ce, même lorsque certains champs sont déjà remplis. Il faut donc éviter de n'utiliser comme libellé que le filigrane (en anglais : watermark), identifié par l'attribut placeholder.
L'usager doit connaître les règles de validation des informations saisies dès le premier coup d'oeil.
Petit truc : il est possible d'ajouter une règle CSS qui insère automatiquement un astérisque devant les libellés qui ont la classe "requis".
Ex :
/* ************************************************************************************* */
/* champs de saisie obligatoires */
/* source : christianelagace.com */
/* ************************************************************************************* */
label.requis:before {
content: "* ";
}
<div class="form-group col-lg-4">
<label for="nom" class="requis">Nom</label>
<input type="text" class="form-control" name="nom" id="nom">
</div>
Voici à titre d'exemple un formulaire qui fournit une rétroaction intéressante.
Formulaire tiré de https://community.silabs.com/SL_CommunitiesSelfReg
Le formulaire doit être aussi court que possible (lire : facile à remplir).
« 10 Best Practices for Web Forms ». JotForm. http://www.jotform.com/help/121-10-Best-Practices-for-Web-Forms
« Contact Us Page Best Practices with 22 Fabulous Showcases ». OXP. http://www.onextrapixel.com/2009/10/15/contact-us-page-best-practices-with-22-fabulous-showcases/
Site fièrement hébergé chez A2 Hosting.