Voir le flux RSS

Bovino

[Actualité] Comprendre les éléments HTML5 <datalist>

Note : 2 votes pour une moyenne de 4,50.
par , 02/04/2015 à 15h58 (1303 Affichages)
L'autocomplétion native en HTML5

L'autocomplétion, ou liste de suggestions, est l'une des fonctionnalités les plus courantes du développement Web.
Il s'agit de suggérer des choix possibles lors de la saisie dans un champ de formulaire.

Jusqu'à présent, il était obligatoire de développer cette fonctionnalité en JavaScript, mais grâce à HTML5, il est possible désormais de se passer de langage de script avec l'élément <datalist>.
Cet élément va permettre d'indiquer un certain nombre d'éléments prédéfinis à suggérer lors de la saisie.

Vous pouvez voir un exemple fonctionnel sur cette page.

Syntaxe

La syntaxe est un peu particulière car il va s'agir de lier un champ de formulaire avec un groupe d'options via des attributs, à l'image de ce qui existe déjà avec les attributs for ou usemap des balises <label> ou <img>.
Dans notre cas, la balise <input> devra posséder un attribut list dont la valeur vaudra celle de l'identifiant de la balise <datalist> associée :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<input list="maliste" />
<datalist id="maliste">
</datalist>
Vous pouvez constater que la balise <datalist> nécessite une balise fermante, car elle ne doit pas être vide : elle contiendra des balises <option> qui vont correspondre à toutes les valeurs prédéfinies :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<input list="langues" placeholder="Choisir une langue" onfocus="this.value=''" />
<datalist id="langues">
	<option value="fr">Français</option>
	<option value="en">Anglais</option>
	<option value="de">Allemand</option>
	<option value="bg">Bulgare</option>
	<option value="hr">Croate</option>
	<option value="da">Danois</option>
	<option value="es">Espagnol</option>
	<option value="et">Estonien</option>
	<option value="fi">Finnois</option>
	<option value="el">Grec</option>
	<option value="hu">Hongrois</option>
	<option value="ga">Irlandais</option>
	<option value="it">Italien</option>
	<option value="lv">Letton</option>
	<option value="lt">Lituanien</option>
	<option value="mt">Maltais</option>
	<option value="nl">Néerlandais</option>
	<option value="pl">Polonais</option>
	<option value="pt">Portugais</option>
	<option value="ro">Roumain</option>
	<option value="sk">Slovaque</option>
	<option value="sl">Slovène</option>
	<option value="sv">Suédois</option>
	<option value="cs">Tchèque</option>
	<option>Franglais</option>
</datalist>
L'on peut noter dans l'exemple ci-dessus que les options peuvent posséder un attribut value. Lorsque l'on sélectionne une valeur, si l'option associée possède un attribut value, c'est la valeur de cet attribut qui sera placée dans le champ texte, sinon, c'est le texte affiché par l'option.
Il faut aussi noter que les options ne limitent pas la saisie dans le champ : il est toujours possible d'entrer la valeur que l'on veut même si celle-ci ne correspond à aucune option de <datalist>.

Voir un exemple d'utilisation.

Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Viadeo Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Twitter Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Google Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Facebook Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Digg Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Delicious Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog MySpace Envoyer le billet « Comprendre les éléments HTML5 <datalist> » dans le blog Yahoo

Mis à jour 02/04/2015 à 17h28 par Bovino

Catégories
HTML / CSS , Développement Web

Commentaires

  1. Avatar de kolodz
    • |
    • permalink
    Merci pour le billet, c'est une fonctionnalité HTML5 très intéressante !
  2. Avatar de Z4ng3tsu
    • |
    • permalink
    Merci beaucoup pour ce billet ! Fonctionnalité qui sera sûrement utilisée plus d'une fois. Moins de prise de tête pour du css/javascript maintenant !