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’une étiquette claire et succincte. Elle 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’une étiquette claire et succincte;
- d’un espace réservé (placeholder), au besoin;
- d’une courte phrase sous l’étiquette, 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 de l’étiquette, avant le champ texte.
Exemple
Informations techniques
Champ et étiquette
L’étiquette est placée au-dessus du champ, et la distance entre le champ et l’étiquette est de 4 px.
CSS de l'étiquette
font-family: Open Sans
font-weight: bold
font-size: 16px
CSS du champ
border: 1px solid ##808A9D
height: 40 px
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 l'étiquette 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: #647287
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 : 15 août 2022