L'élément HTML <datalist>
contient un ensemble d'éléments <option>
qui représentent les valeurs possibles pour d'autres contrôles.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Catégories de contenu | Contenu de flux, contenu phrasé. |
---|---|
Contenu autorisé | Soit du contenu phrasé ou zéro ou plus d'éléments <option> . |
Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
Parents autorisés | N'importe quel élément qui accepte du contenu phrasé. |
Rôles ARIA autorisés | Aucun. |
Interface DOM | HTMLDataListElement |
Attributs
Cet élément ne possède que les attributs universels, communs à tous les éléments.
Exemples
HTML
<label for="monNavigateur">Veuillez choisir un navigateur parmi ceux-ci :</label> <input list="navigateurs" id="monNavigateur" name="monNavigateur"/> <datalist id="navigateurs"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
HTML Living Standard La définition de '<datalist>' dans cette spécification. |
Standard évolutif | |
HTML5 La définition de '<datalist>' dans cette spécification. |
Recommendation |
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet 20 | Edge Support complet Oui | Firefox Support complet 4 | IE Support complet 10 | Opera Support complet 9.5 | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Support complet 33 | Edge Mobile Support complet Oui | Firefox Android Support complet 4 | Opera Android ? | Safari iOS Aucun support Non | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
Prothèse d'émulation (polyfill)
Il est possible d'utiliser cette bibliothèque pour émuler la fonctionnalité dans les anciens navigateurs.