Composants - Formulaire
Champ de saisie
Les champs de saisie autorisent l'utilisateur à interagir avec le site ou l'application, en lui permettant de saisir des données (le plus souvent textuelles) qui seront ensuite traitées.
Les types de champs
L'élément de base prend la forme d'uninput type="text".
Par défaut
Il s'agit du champ basique de recueil d'information textuelle.
Avec une icône contextuelle
Il est possible d'agrémenter le champ de saisie d'une icône.
Dans ce cas, ne pas oublier de cacher l'icone pour les lecteurs d'écran via l'attribut aria-hidden="true"
Le champ de saisie « mail »
Ce type de champ contrôle automatiquement que la valeur saisie correspond bien à l'un des 3 formats considérés comme valides :
- chaîne de caractères vide ;
- adresse mail correctement formée (chaîne de caractères - arobase - nom de domaine - extension) ;
- éventuellement une suite d'adresses mail correctes (si et seulement si l'attribut
multipleest utilisé).
Le champ de saisie « date »
Il autorise la saisie d'une date composée d'une année, d'un mois et d'un jour.
La prise de charge native est très variable en fonction du navigateur.
Les différents états
En fonction du degré d'interaction souhaité avec l'utilisateur, ces champs peuvent passer par différents états.
Champ obligatoire
Une fois l'attribut required ajouté à l'input, ce champ doit comporter une value non nulle pour que le formulaire puisse être validé.
Désactivé
L'ajout de l'attribut booléen disabled rend impossible la saisie d'une valeur par l'utilisateur.
L'élément est également non mutable et non focusable.
Message
Permet notamment de spécifier une aide à la saisie pour l'utilisateur (format, exemples, etc.).
Description helper text
Message d’erreur
Si une erreur est détectée dans la valeur saisie, la classe is-invalid peut être ajoutée au div.form-group ainsi qu'à l'input. Le message d'erreur doit être explicite et si possible prévoir des suggestions de correction.
Error helper text