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

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec