<datalist>

Une liste de suggestions pour un champ `<input>`. Vous pouvez choisir une proposition ou saisir votre propre valeur.

Affichage: none
Balise fermante: Obligatoire
Contenu autorisé: Éléments <option>

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<label for="city">Ville</label>
<input id="city" name="city" list="cities" placeholder="Commencez à écrire…">
<datalist id="cities">
  <option value="Bordeaux">
  <option value="Lyon">
  <option value="Marseille">
  <option value="Paris">
  <option value="Toulouse">
</datalist>

Aperçu

Définition et utilisation

L’élément <datalist> contient un ensemble de valeurs proposées pour un champ <input>. Vous les reliez en indiquant l’id de la liste dans l’attribut list du champ. Pendant la saisie, le navigateur affiche les propositions correspondantes, un peu comme un moteur de recherche avec autocomplétion.

À la différence de <select>, la liste ne limite pas le choix. L’utilisateur peut saisir n’importe quoi, et les suggestions ne font qu’accélérer la frappe. C’est pourquoi <datalist> convient bien à des champs comme « Ville » ou « Langage préféré », où il existe des réponses courantes, mais où la liste n’est pas fermée.

L’élément lui-même ne s’affiche pas sur la page. Les suggestions fonctionnent avec les champs de texte, ainsi qu’avec des types comme email, url, number ou range, bien que leur apparence dépende du navigateur. Firefox sur Android ne les affiche pas du tout, donc le champ doit rester pratique même sans les suggestions.

Syntaxe

<input list="id-de-la-liste">
<datalist id="id-de-la-liste">
  <option value="…">
</datalist>

Attributs

Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.

Compatibilité des navigateurs

Prise en charge limitée

Tous les navigateurs ne le prennent pas en charge. Vérifiez avant de l’utiliser en production.

Bonnes pratiques

N’utilisez pas <datalist> là où une seule des valeurs proposées est autorisée. <select> est alors préférable, et le serveur doit de toute façon vérifier la valeur.
Une option peut aussi avoir un attribut label, que certains navigateurs affichent à côté de la valeur comme description de la suggestion.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours