Balise HTML `<datalist>`

La balise <datalist> est l'un des éléments HTML5. Elle est utilisée pour créer une liste d'options de saisie, définies à l'intérieur de l'élément <datalist> et liées à un champ <input> via l'attribut list. Initialement, les options sont masquées, et la liste devient accessible lorsque l'utilisateur commence à taper. L'attribut list de la balise <input> doit correspondre à l'id de l'élément <datalist>.

Les options prédéfinies pour la saisie sont contenues dans des éléments <option> imbriqués.

Syntaxe

La balise <datalist> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<datalist>) et de fermeture (</datalist>).

Exemple de la balise HTML `<datalist>` :

Balise HTML <datalist>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>Choose browser</div>
    <input list="browsers" />
    <!-- The list attribute value matches the datalist id -->
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Try it Yourself »

Résultat

Choisissez un navigateur

Attributs

La balise <datalist> prend en charge les Attributs globaux et les Attributs d'événement.

Pratique

À quoi sert la balise HTML <datalist> ?

Elle spécifie une liste d'options prédéfinies pour un élément <input>.Elle est utilisée pour insérer des images dans une page web.Elle définit une légende pour un élément <figure>.Elle fournit une fonctionnalité de saisie semi-automatique sur les champs de formulaire.Elle est utilisée pour créer des graphiques animés.

Balise HTML <datalist> ​

Syntaxe ​

Exemple de la balise HTML <datalist> : ​

Résultat ​