Accueil    HTML    Balise Datalist
 



balise datalist  Balise DATALIST : liste de valeurs

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <datalist> permet de définir une liste de valeurs qui sont associées à un élément de type <input> pour proposer un mécanisme d'auto complétion lors de la saisie de texte par l'utilisateur. Les valeurs ajoutées dans la balise <datalist> sont encadrées par des éléments <option> (mise en place similaire à la balise <select>).

Le lien entre la balise <datalist> et la balise <input> se fait en valorisant l'attribut "list" de la balise <input> avec l'identifiant de la balise <datalist> :

<input type="text" list="iddatalist" />
<datalist id="iddatalist">
   <option value="valeur"></option>
   ...
</datalist>


Exemple d'utilisation de la balise datalist :




Entrez le nom d'une capitale d'Europe :
<input type="text" list="lst-capitale" style="width:200px;" />

<datalist id="lst-capitale">
   <option>Berne (Suisse)</option>
   <option>Bruxelles (Belgique)</option>
   <option>Paris (France)</option>
   ...
</datalist>



Entrez le nom d'une capitale d'Europe :