Barre de recherche

    La composante barre de recherche permet à l’utilisateur de faire des recherches dans un site Internet ou une application à partir de mots clés. 

    Quand l'utiliser

    On place la barre de recherche lorsqu’on veut mettre de l’avant l’option de recherche. Par exemple sur une page d’accueil, ou pour donner accès plus facilement à une base de données.

    Il existe deux types de barre de recherche : simple et avancée.

    Barre de recherche simple

    La barre de recherche simple permet à l’utilisateur de faire des recherches à partir de mots simples ou de courtes phrases. Elle est constituée d’un champ texte ainsi que de l’icône de la loupe.

    Exemple


    Barre de recherche avancée

    La barre de recherche avancée est similaire à la barre de recherche simple, mais se distingue par l’ajout de l’option « Recherche avancée » sous le champ texte, ce qui permet l’affichage des filtres à la recherche. On utilise la barre de recherche avancée lorsque des options de raffinement de recherche sont disponibles à l’utilisateur (exemples : dates, thèmes, régions).

    Exemple


    Comment l’utiliser

    Une barre de recherche doit être facilement accessible pour permettre à l’utilisateur d’effectuer des requêtes rapidement.

    L’option de recherche avancée est présentée sous la forme d’un lien situé sous le champ texte à gauche.

    La barre de recherche doit être permissive afin d’accepter les erreurs et les fautes d’orthographe.

    L’icône de la loupe est située à droite du champ texte. L’icône doit être présentée sous la forme d’un bouton cliquable qui permet de lancer la recherche.

    Le texte de l’espace réservé (placeholder) permet d’indiquer à l’utilisateur à quel endroit il effectue sa recherche. Ce texte indicatif doit être situé dans la barre de recherche avec la mention « Rechercher sur [nom du site ou de la plateforme] ». La couleur du texte indicatif doit être distincte du texte de saisie du champ d’un gris clair pour ne pas confondre avec le texte d’une recherche.

    Informations techniques

    Dimensions

    Le champ texte et le bouton ont une hauteur totale de 40 px. La largeur est variable selon la grille employée. Lorsque le texte saisi dans le champ déborde, le texte glisse vers la gauche en masquant le début du texte.

    En format mobile, la barre de recherche garde les mêmes caractéristiques. La largeur est variable selon la grille employée et elle prend toujours la pleine largeur de celle-ci.

    Le bouton de recherche est un carré de 40 px par 40 px avec l’icône de la loupe centrée dans celui-ci. La hauteur et la largeur de l’icône sont de 24 px.

    Le bouton garde les mêmes caractéristiques et les mêmes dimensions en format mobile.

    Espacements

    Espace réservé

    L’espace réservé est à 8 px de la limite gauche et droite du champ de recherche.

    Barre de recherche avancée

    En plus des informations données pour la barre de recherche simple, la barre de recherche avancée comprend l’ajout du texte « Recherche avancée ». Il doit être situé sous le champ texte avec un espacement de 12 px et aligné à la gauche de celui-ci.

    La barre de recherche avancée en format mobile garde les mêmes caractéristiques. 

    Exemple


    CSS du champ
    border: 1px solid #808a9d;
    height: 40px;
    width: 765px;

    CSS du texte de l’espace réservée
    font-family: Open Sans;
    font weight: regular;
    font-size: 14px;
    color: #647287; 

    CSS du bouton
    height: 40px;
    width: 40px;
    color: #095797;

    CSS du lien de recherche avancée
    font-family: Open Sans;
    font weight: regular;
    font-size: 14px;
    color: #095797;

    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