Communications numériques gouvernementales Beta

Système de design gouvernemental

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é, 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 extralarge 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é 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 : 1rem

 

CSS du champ
Border : 1px solid ##808A9D
Height : 40 px

 

Dimension des champs

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
 


Espace entre les champs

Le dégagement 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 : 600
Font-size : 1rem
Color : #cb381f

 

Espace réservé et précision

L'espace réservé 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 : 0.875 rem
Color : #223654

 

CSS de l'espace réservé
Font-size : 1 rem
Color : #647287

 

Focus du champ texte

Lorsqu’il est actif, une bordure bleue est ajoutée au champ.

Exemple
 


CSS du focus
Border : 3px solid #89bce5

 

Dernière mise à jour : 17 juillet 2020