<search>
Marque la partie d’une page contenant un champ de recherche ou des filtres de résultats.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux
Exemple
#<search>
<form action="/recherche">
<label for="query">Rechercher dans la documentation</label>
<input type="search" id="query" name="q" placeholder="par ex. flexbox">
<button>Rechercher</button>
</form>
</search>Définition et utilisation
#L’élément <search> englobe les contrôles servant à rechercher ou à filtrer : un champ de recherche dans l’en-tête d’un site, un champ « Rechercher dans la documentation », des filtres de liste de produits. Il ne contient pas les résultats eux-mêmes, seulement la partie où l’utilisateur saisit ou choisit des critères.
Les lecteurs d’écran le reconnaissent comme un point de repère « search », vers lequel on peut passer rapidement. Auparavant, on obtenait le même effet en ajoutant à un formulaire l’attribut role="search".
Il peut contenir un <form> qui envoie la requête au serveur, ou simplement des champs qui filtrent une liste en direct avec JavaScript. N’utilisez pas <search> pour d’autres types de formulaires, comme une inscription à une newsletter ou une connexion.
C’est un élément relativement récent : tous les grands navigateurs le prennent en charge depuis 2023.
Syntaxe
#<search>
<form>…</form>
</search>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<search>
<label for="filter">Filtrer les formations</label>
<input type="search" id="filter" placeholder="par ex. script">
</search>
<ul id="courses">
<li>HTML et CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Python</li>
</ul>
<script>
const input = document.getElementById('filter');
const items = document.querySelectorAll('#courses li');
input.addEventListener('input', () => {
const query = input.value.trim().toLowerCase();
items.forEach((item) => {
item.hidden = !item.textContent.toLowerCase().includes(query);
});
});
</script>Tapez « script » : il ne restera que JavaScript et TypeScript dans la liste. La liste de résultats se trouve en dehors de l’élément <search>.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
search {
display: block;
}Compatibilité des navigateurs
#Largement disponible · depuis 2023
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Placez les résultats de recherche hors de
<search>, par exemple dans<main>ou dans une<section>séparée. - Associez toujours un champ de recherche à un
<label>. Un placeholder disparaît pendant la saisie et ne remplace pas une étiquette. - S’il y a deux champs de recherche sur une page, donnez-leur un nom avec
aria-label, par exemple « Rechercher dans les formations ».
Entrées associées
#- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <input>Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <nav>Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.