Champ de recherche du site

Statut

Stable

Type

Fonctionnalité du site Canada.ca

Dernière révision

2025-04-14

Version de la composante

Version 1.0

Objectif

Le champ de recherche du site est un élément de l’en-tête général. Il permet aux gens de lancer une recherche dans le contenu du gouvernement du Canada au moyen d’un champ de recherche simple.

Les résultats de la recherche dans le site sont présentés pour l’ensemble du contenu Web du gouvernement du Canada ou pour un sous-ensemble de contenu au niveau du ministère ou de l’organisme.

Comment mettre en œuvre

Veuillez vous référer aux exemples de code ci-dessous.

Exemple de base du champ de recherche du site

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Recherche</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca" />
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Recherche</span>
			</button>
		</div>
	</form>
</section>

Exemple de recherche personnalisée du champ de recherche du site

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Recherche</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Rechercher dans [département/thème]</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans [département/thème]" />
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Recherche</span>
			</button>
		</div>
	</form>
</section>