Balise HTML <datalist >


Exemple

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

<label for="browser">Choose your browser from the list:</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>

Définition et utilisation

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

La <datalist>balise est utilisée pour fournir une fonction "autocomplete" pour les éléments <input>. Les utilisateurs verront une liste déroulante d'options prédéfinies lorsqu'ils saisiront des données.

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


Prise en charge du navigateur

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

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

Attributs globaux

La <datalist>balise prend également en charge les attributs globaux en HTML .


Attributs d'événement

La <datalist>balise prend également en charge les attributs d'événement en HTML .


Pages connexes

Référence HTML DOM : objet de liste de données


Paramètres CSS par défaut

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

datalist {
  display: none;
}