Balise HTML <datalist>
La balise HTML <datalist> crée une liste de suggestions pour un champ <input>. Apprenez à l'utiliser avec des exemples concrets.
La balise <datalist> est l'un des éléments HTML5. Elle fournit une liste de suggestions prédéfinies pour un champ <input>, offrant un menu déroulant de type autocomplétion tout en permettant à l'utilisateur de saisir n'importe quelle valeur. Au fur et à mesure que l'utilisateur tape, le navigateur filtre les suggestions et affiche celles qui correspondent.
C'est ce qui distingue <datalist> d'un menu <select> : un <select> limite l'utilisateur à un ensemble fixe de choix, tandis qu'un <datalist> ne fait que suggérer des valeurs — le champ reste en saisie libre.
Les options prédéfinies sont contenues dans des éléments <option> imbriqués.
Comment les trois éléments s'articulent
Une datalist fonctionnelle implique toujours trois parties reliées par un identifiant :
- Un élément
<input>avec un attributlist. - Un élément
<datalist>dont l'idcorrespond à la valeur de cet attributlist. - Un ou plusieurs éléments
<option>à l'intérieur de la<datalist>contenant les suggestions.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>Le lien est purement par nom : la valeur de list sur l'input ("ice-cream-flavors") doit être identique à l'id de la <datalist>. S'ils ne correspondent pas exactement, aucune suggestion n'apparaît. La <datalist> elle-même n'est pas affichée sur la page — seules ses options s'affichent, dans le menu déroulant de l'input.
Les enfants <option>
Chaque suggestion est un élément <option> individuel. Il existe deux façons de fournir son texte :
- Attribut
value— le texte inséré dans le champ lorsque l'option est sélectionnée. - Label visible — texte entre les balises ouvrante et fermante, affiché à l'utilisateur.
Si vous ne définissez que value, cette même chaîne est à la fois affichée et insérée :
<option value="Firefox"></option>Vous pouvez également associer une valeur technique à une description plus lisible en utilisant l'attribut label (ou un texte de label), que certains navigateurs affichent à côté de la valeur :
<option value="FF" label="Firefox"></option>Ici, le champ reçoit FF, tandis que le menu déroulant peut afficher le Firefox plus lisible. Le rendu des paires valeur/label séparées varie selon les navigateurs ; dans la plupart des cas, garder value lisible par un humain est l'approche la plus simple et la plus fiable.
<datalist> vs. <select>
Les deux présentent une liste de choix, mais ils résolvent des problèmes différents :
<datalist> | <select> | |
|---|---|---|
| Saisie utilisateur | Texte libre — peut taper n'importe quoi | Limité aux options listées |
| Rôle de la liste | Suggestions / autocomplétion | Les seules valeurs autorisées |
| Filtrage à la frappe | Oui, filtre pendant la frappe | Limité |
| Valeur soumise | Contenu du champ | Toujours l'une des options |
| À utiliser quand | Vous souhaitez des suggestions mais autorisez des valeurs personnalisées (champ de recherche, domaine e-mail, ville) | La réponse doit être l'une d'un ensemble fixe (code pays, niveau d'abonnement) |
Choisissez <datalist> quand les suggestions aident mais qu'une valeur personnalisée reste valide ; choisissez <select> quand seules les valeurs proposées sont acceptables.
Syntaxe
La balise <datalist> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<datalist>) et fermante (</datalist>).
Exemple de la balise HTML <datalist> :
Balise HTML <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>L'utilisation d'un vrai <label> (au lieu d'un simple <div>) avec son attribut for pointant vers l'id de l'input relie la légende au champ, de sorte que les lecteurs d'écran l'annoncent et qu'un clic sur le label donne le focus à l'input.
Exemple : un sélecteur de pays
Une datalist fonctionne bien pour les champs avec de nombreuses valeurs connues où vous souhaitez quand même autoriser la saisie libre — comme sélectionner un pays dans un formulaire :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Compatibilité des navigateurs
<datalist> est pris en charge par tous les navigateurs de bureau modernes. Soyez attentif aux limitations mobiles : la prise en charge sur iOS Safari a historiquement été incomplète ou incohérente selon les versions, et certains navigateurs plus anciens ou moins courants ignorent complètement l'élément. Étant donné que le champ est un simple input de type texte, les navigateurs qui ne rendent pas les suggestions affichent simplement un champ de saisie ordinaire — utilisez donc <datalist> comme une amélioration progressive, et non comme seul moyen de communiquer les valeurs valides.
Attributs
La balise <datalist> ne possède aucun attribut spécifique à l'élément. Tout son fonctionnement repose sur l'id (associé à l'attribut list de l'input), et les suggestions se trouvent dans ses éléments enfants <option>. Elle prend en charge les attributs globaux et les attributs d'événement.