HTML <datalist> Tag


Exemple

Un datalist avec des options prédéfinies (connecté à un élément <input>) :

<label for="browser">Choisissez votre navigateur dans la liste :</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Essayez-le vous-même »

Définition et Utilisation

Le <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.

Le <datalist> est utilisé pour fournir une fonctionnalité d'"autocomplétion" pour les éléments <input>. Les utilisateurs verront une liste déroulante d'options prédéfinies au fur et à mesure qu'ils saisissent des données.

L'attribut id de l'élément <datalist> doit être égal à l'attribut list de l'élément <input> (ce qui les lie ensemble).


Support des Navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.

Élément
<datalist> 20.0 10.0 4.0 12.1 9.5

Attributs Globaux

Le <datalist> prend également en charge les Attributs Globaux en HTML .


Attributs d'Événements

Le <datalist> prend aussi en charge les Attributs d'Événements en HTML .


Pages Associées

Référence DOM HTML : Objet Datalist


Paramètres CSS par Défaut

La plupart des navigateurs afficheront l'élément <datalist> avec les valeurs par défaut suivantes :

datalist {
display: none;
}