<datalist> : Page de démonstration et tutoriel - <html5> par l'exemple - Le site français de démo des balises HTML5 et de test du support des navigateurs.

Inchangés depuis HTML2 (1996), les formulaires ont fait l'objet de débauches techniques.
L'enjeu des formulaires HTML5 est l'intégration de nouvelles fonctionnalités et l'automatisation de certains comportements, se plaçant comme un intermédiaire entre les formulaires actuels et XForms.

<datalist>

Définit une liste de données sélectionnables.

Notes sur le tuto

Le projet webforms2 est une implémentation JavaScript de ces nouveaux formulaires, pour les navigateurs qui ne les supportent pas nativement.
Limitations :
- IE et Firefox ne font apparaître la liste qu'au 2^ème clique sur le champ.
- Opera a un petit bug, car lors du défilement vertical de la page la datalist reste fixe. De plus, après une première apparition la datalist ne réapparaîtra pas avant un clic ailleurs sur la page ou un refresh.

Exemple de code HTML5

<input list="cars" value="Cliquez pour voir la liste" onclick="this.value=''"/>
<datalist id="cars">
	<option value="BMW">BMW</option>
	<option value="Ford">Ford</option>
	<option value="Volvo">Volvo</option>
</datalist><br/>
Vous pouvez aussi taper les premiers caractères (insensible à la casse).

<!-- Détection automatique -->
<script src="_html5detect.js"></script>
<script>isTagSupported("datalist")</script>

Librairie JavaScript de détection automatique.

Démonstration du résultat HTML5

Vous pouvez aussi taper les premiers caractères (insensible à la casse).