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