Composants - Formulaire
Usages
Certaines bonnes pratiques générales sont à respecter pour que les formulaires restent intelligibles et faciles d'utilisation.
Les champs erreur
Ils doivent comporter une indication précise sur le format de saisie attendue.
A faire :
Message d’erreur clair permettant une correction aisée
A ne pas faire :
Pas de message d’erreur incompréhensible pour l’utilisateur
Largeur et proximité
Bien qu'une grande partie de l'apparence soit prise en charge par la feuille de style, une vigilance reste nécessaire dans la disposition des champs entre eux.
Largeur des champs
Les champs de saisie doivent être proportionnés à la quantité de texte qu'ils seront amenés à recevoir.
A faire :
Largeur adaptée
A ne pas faire :
Largeur disproportionnée
Proximité des champs
Pour éviter toute confusion entre le label d'un champ et un autre champ, un écart raisonnable doit être maintenu entre ceux-ci.
![[TODO Edito]](img/form/Champ-proximite-DO.png)
A faire :
Écart raisonnable pour distinguer chaque couple champ-étiquette
![[TODO Edito]](img/form/Champ-proximite-DONT.png)
A ne pas faire :
Risque de confusion entre le premier champ et la seconde étiquette
Labels
Les label sont porteurs d'informations pour tous les types d'utilisateurs. À ce titre il est important de soigner leur contenu comme leur format.
Explicites
Quand c'est justifié, ne pas hésiter à préciser le format de saisie attendue. Être suffisamment précis pour lever toute incertitude quant au type d'information attendu.
![[TODO Edito]](img/form/Champ-explicite-DO.png)
A faire :
Format et type d'informations clairement spécifiés
![[TODO Edito]](img/form/Champ-explicite-DONT.png)
A ne pas faire :
Risque d'incertitudes
Capitales
Pour une question de cohérence d'ensemble, évitez les label en capitales.
![[TODO Edito]](img/form/Champ-capitales-DO.png)
A faire :
Label en casse de phrase
![[TODO Edito]](img/form/Champ-capitales-DONT.png)
A ne pas faire :
Label en capitales
Champ obligatoire
Le symbole avec l'astérisque doit être explicité avant d'être utilisé. Si tous les champs sont obligatoires, le mentionner en début de formulaire (les astérisques ne sont dès lors plus utiles).
![[TODO Edito]](img/form/Champ-obligatoire-DO.png)
A faire :
Mention explicite
![[TODO Edito]](img/form/Champ-obligatoire-DONT.png)
A ne pas faire :
Mention non explicite
Checkbox, radios, select
Utilisation des boutons radios
De façon générale, pour une question d'ergonomie, on préférera un input type="radio" pour une liste de choix courte et un select pour une liste de choix longue.
![[TODO Edito]](img/form/Radio-max-DO.png)
A faire :
Select adapté
![[TODO Edito]](img/form/Radio-max-DONT.png)
A ne pas faire :
Radio peu pratique avec de nombreuses options
Zone de clic
Pour les input type="checkbox" et les input type="radio", le label doit être cliquable au même titre que l'input lui-même.
![[TODO Edito]](img/form/Radio-clic-DO.png)
A faire :
Label cliquable
![[TODO Edito]](img/form/Radio-clic-DONT.png)
A ne pas faire :
Label non cliquable