Champ texte
Le champ texte est un espace dans lequel est saisie une information qui tient sur une ligne de texte. Il peut s’agir d’une combinaison de lettres, de chiffres et de symboles.
Le champ texte est accompagné d’un libellé clair et succinct. Il permet d’identifier au premier coup d’œil l’information requise dans le champ. Les signes de ponctuation sont à éviter.
On évite aussi d’ajouter des compléments d’information entre les champs d’un formulaire. Les précisions sont fournies à l’aide :
- d’un libellé clair et succinct;
- d’un espace réservé (placeholder), au besoin;
- d’une courte phrase sous le libellé, au besoin;
- d’un libellé de section qui regroupe plusieurs champs (par exemple, une section Coordonnées).
Quand l'utiliser
Le champ texte est utilisé dans un formulaire. La longueur du champ doit être adaptée à la réponse requise, selon 4 formats disponibles.
Le champ extra-large peut contenir jusqu’à 58 caractères.
Il est utilisé pour les adresses et les villes, par exemple.
Le champ large peut contenir jusqu’à 26 caractères.
Il est utilisé pour les noms et prénoms, le téléphone et le courriel.
Le champ moyen peut contenir jusqu’à 16 caractères.
Il est utilisé pour le code postal, la date et l’heure.
Le champ petit peut contenir jusqu’à 5 caractères.
Il est utilisé pour l’âge, le numéro de poste et le numéro de bureau ou d’appartement.
Comment l'utiliser
Les champs texte sont placés les uns au-dessus des autres par défaut.
Dans le format bureau et le format tablette, deux champs peuvent être placés côte à côte seulement s’ils sont complémentaires.
À faire
Espace réservé
Un espace réservé (placeholder) permet de préciser comment saisir les informations. Il est utilisé dans les champs dont le format est particulier, comme le code postal, le numéro de téléphone ou la date.
Exemple
Précision
Si certaines informations permettent de mieux comprendre ce qui doit être inscrit dans un champ, elles peuvent s’ajouter à la suite du libellé, avant le champ texte.
Exemple
Informations techniques
Champ et libellé
Le libellé est placé au-dessus du champ, et la distance entre le champ et le libellé est de 4 px.
CSS du libellé
font-family: Open Sans;
font-weight: bold;
font-size: 16px;
CSS du champ
border: 1px solid #8893a2;
height: 40px;
Dimensions
Champ extra-large
Largeur : 528 px
Hauteur : 40 px
Exemple
Champ large
Largeur : 249 px
Hauteur : 40 px
Exemple
Champ moyen
Largeur : 156 px
Hauteur : 40 px
Exemple
Champ petit
Largeur : 63 px
Hauteur : 40 px
Exemple
Espacements
L'espacement entre un champ et le libellé du champ qui le suit est de 32 px.
Une gouttière de 32 px doit se trouver entre les champs placés sur une même ligne.
Erreur dans un champ texte
Une erreur dans un champ texte est indiquée par un contour rouge et un message contextuel placé sous le champ.
Le message d’erreur est placé 8 px sous le champ concerné.
À ne pas faire
À faire
CSS du champ en erreur
border: 3px solid #cb381f;
CSS du message d'erreur
font-family: Open Sans;
font-weight: bold;
font-size: 16px;
color: #cb381f;
Espace réservé et précision
L'espace réservé (placeholder) est placé dans le champ et est précédé de « ex. : ».
La précision est située à 4 px, au-dessus du champ.
CSS de la précision
font-size: 14px;
color: #223654;
CSS de l'espace réservé (placeholder)
font-size: 16px;
color: #6b778a;
Focus du champ texte
Lorsqu’il est actif, une bordure bleue est ajoutée au champ.
Exemple
CSS du focus
outline: 2px solid #4a98d9;
border: 2px solid #5b6476;
Dernière mise à jour : 30 août 2023