<datalist> : Démo HTML5
Mise à jour : 2017-01-22
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 :
- Firefox ne fait apparaître la liste qu'au 2ème clique sur le champ.
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émonstration du résultat HTML5
Vous pouvez aussi taper les premiers caractères (insensible à la casse).
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isTagSupported("datalist")</script>