Remplir un formulaire est parfois fastidieux. Il est important de donner aux utilisateurs des choix multiples tout en leur permettant de taper librement. Grâce à l'élément datalist
(qui vient d'arriver sur Chrome Canary (M20), c'est un jeu d'enfant.
En utilisant datalist
, votre application peut définir une liste de suggestions de résultats parmi lesquelles les utilisateurs doivent sélectionner. Ils peuvent sélectionner une option dans la liste ou saisir un texte au format libre.
Les options peuvent être associées à un datalist
en spécifiant son id
dans l'attribut list
d'un élément input
:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist
est disponible pour les utilisateurs dans les dernières versions de Firefox, d'Opera et d'Internet Explorer à partir de la version 10. Vous n'avez donc pas à vous soucier trop de la compatibilité. Toutefois, pour vous assurer qu'elle fonctionne sur tous les navigateurs, procédez comme suit:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Si datalist
est disponible dans votre navigateur, tous les éléments sous datalist
, à l'exception des éléments option
, seront masqués. Si vous utilisez ce mécanisme de remplacement, assurez-vous que votre serveur intercepte à la fois "fruit_sel" et "fruit" comme paramètres de requête.