Nouvelle balise Datalist en HTML5

Lors de mes récentes expérimentations HTML5, j'ai eu l'occasion de tester la nouvelle balise <datalist> qui permet de définir des choix à associer à un <input type="text"> standard. En effet, on avait l'habitude d'utiliser une balise <select> avec une série de <option> pour obtenir ce résultat. La nouveauté du datalist HTML5 permet de créer une extension à un input pour en faire un hybride entre le champ de saisie et le selectbox.



Exemple de code :

<input type="text" list="listeDesProvinces">
<datalist id="listeDesProvinces">
   <option label="Ontario" value="ON">
   <option label="Québec" value="QC">
   <option label="Nouvelle-Écosse" value="NS">
   <option label="Nouveau-Brunswick" value="NB">
   <option label="Manitoba" value="MB"></option>
   <option label="Colombie-Britannique" value="BC">
   <option label="Ile-du-Prince-Edouard" value="PE">
   <option label="Saskatchewan" value="SK">
   <option label="Alberta" value="AB">
   <option label="Terre-Neuve-et-Labrador" value="NL">  
   <option label="Territoires du Nord-Ouest" value="NT">
   <option label="Yukon" value="YT">
   <option label="Nunavut" value="NU">
</datalist>

Dans la balise input, la valeur de l'attribut "list" indique l'ID de l'élément datalist à lui associer pour obtenir la liste des choix.

Un point intéressant est que les valeurs d'un datalist peuvent être partagées entre différents éléments dans la page. Ce qui l'est moins, c'est qu'il n'est pas tout à fait prêt à être intégré dans un projet car il ne fonctionne que sous Opera. Chrome, Safari et Firefox ont échoué le test.