Spécifications du W3C / Spécifications de WHATWG

L'élément datalist propose une liste d'éléments option prédéfinis qui seront utilisés par un autre contrôle.

<datalist> permet d'associer une sorte d'autocomplete au champ de saisie. Le champ peut également être rempli manuellement.


Exemple

Le champ de saisie ci-dessous est lié a un datalist. Lorsque le visiteur tape une lettre, les éléments du datalist qui contiennent cette lettre apparaîtront dans une liste déroulante, sous le champ de saisie.


Capture d'écran

Capture d'écran de datalist sous firefox


Code

L'attribut list de l'élément <input> doit être identique à l'attribut <datalist>. Dans notre exemple l'attribut list et l'id de la datalist est "genre".

<label for="musique"> Style de musique:</label>
<input type="text" id="musique" list="genre">
<datalist id="genre">
<option value="Classique">
<option value="Pop">
<option value="Rock">
<option value="Hip-hop">
<option value="Metal">
<option value="Dance">				
</datalist>

Support

Navigateurs

Les navigateurs doivent afficher sous le champ de saisie une liste déroulante des éléments de la datalist qui contiennent la lettre tapée.

Lecteurs d'écran

Support par les lecteurs d'écran
VoiceOver 6 pas de support par Safari
Jaws 14 et Firefox 26 JAWS ne vocalise pas qu'il s'agit d'un champ avec 'autocomplete' ou une liste. JAWs n'informe pas qu'une liste apparaît sous le controle.
Jaws 14 et IE9 Pas d'application. JAWS vocalise bien qu'il s'agit d'une zone d'edition avec liste, mais IE9 n'affiche pas la liste.
NVDA 2013.3 avec Firefox 26 OK
NVDA 2013.3 avec IE9 Pas d'application car IE9 ne supporte pas datalist
SuperNova 2013.54 Pas d'application car IE9 ne supporte pas datalist

Clavier

Pas de problème. Utilisez les fleches pour selectionner les options et ENTER pour confirmer.


Conseils

L'élément datalist présente une liste de valeurs optionnelles à l'utilisateur. Comme il est possible de remplir manuellement le champ de saisie, sans contraidre l'utilisateur à choisir l'une des valeurs proposées, datalist ne présente aucun problème d'accessibilité et peut donc être utilisé.