Le tag <datalist> est utilisé pour créer une liste d'options d'entrée prédéfinies par le tag <input>. Initialement, les options sont masquées, la liste des options devient disponible lorsque l'utilisateur commence à taper. L'attribut list du tag <input> doit correspondre à l'ID de l'élément <datalist>.

Options prédéfinies pour la saisie des prisonniers dans l'élément <option> ci-joint.

Syntaxe

Le contenu du tag est entre le tag ouvrant (<datalist>) et le tag fermant (</datalist>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <div>Choisissez le navigateur</div>
    <input list="browsers" />
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Résultat

Choisissez le navigateur

Attributs

Le tag <datalist> supporte également les Attributs globaux et les Attributs d'événements.

Support de Navigateurs

chrome firefox safari opera
12+ 49+ 6+ 15+

Pratiquez vos connaissances

Que pouvez-vous faire avec la balise HTML <datalist>?
Trouvez-vous cela utile?