<datalist>

Description

L’élément <datalist> contient un ensemble d’éléments <option> représentant des suggestions pour un <input>. L’input est lié au datalist via list (sur l’input) et id (sur le datalist). L’utilisateur peut saisir n’importe quelle valeur ou choisir parmi les suggestions — contrairement à <select>, la saisie libre est toujours possible.

Syntaxe

<input type="text" id="ville" list="villes">
<datalist id="villes">
  <option value="Paris">
  <option value="Lyon">
  <option value="Marseille">
</datalist>

Exemples

Autocomplétion de frameworks :

<label for="framework">Framework CSS :</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
  <option value="Tailwind CSS">
  <option value="Bootstrap">
  <option value="Bulma">
  <option value="Foundation">
</datalist>

Avec descriptions (certains navigateurs les affichent) :

<input type="text" id="couleur" list="couleurs">
<datalist id="couleurs">
  <option value="#ff0000">Rouge</option>
  <option value="#00ff00">Vert</option>
  <option value="#0000ff">Bleu</option>
</datalist>

Notes

Saisie libre autorisée : <datalist> est différent de <select> : l’utilisateur n’est pas contraint aux options proposées. Si une saisie stricte est nécessaire, utiliser <select>.

Support navigateurs : bien supporté par tous les navigateurs modernes. Le rendu des suggestions varie selon les navigateurs (popover natif, pas de style possible).