L'étiquette datalist

L'étiquette datalist crée une saisie semi-automatique pour les champs de saisie input dans un formulaire HTML.

L'essence de la saisie semi-automatique : lorsque l'utilisateur essaiera de taper quelque chose dans le champ de saisie, une suggestion contextuelle apparaîtra en dessous, qui représentera une liste d'options disponibles. L'utilisateur pourra choisir l'une des options proposées, sans avoir à la saisir entièrement.

Pour lier une saisie semi-automatique à l'étiquette input, il est nécessaire de lui attribuer l'attribut list, dans lequel il faut spécifier l'attribut id de l'étiquette datalist à lier.

Les options de choix sont stockées dans les étiquettes option, qui sont elles-mêmes stockées dans l'étiquette datalist.

Exemple

Saisissons un pays dans le champ de saisie. Saisissons d'abord la lettre 'b' - et nous verrons une suggestion contextuelle de trois pays. Puis saisissons en plus la lettre 'e' - le nombre de pays proposés se réduira à deux :

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Exemple

Ajoutons maintenant l'attribut value à l'étiquette option. Lors de la sélection d'un pays spécifique, ce ne sera pas le nom du pays qui sera placé dans le champ lié, mais le contenu de l'attribut value :

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Exemple . Influence de l'attribut autocomplete

L'attribut autocomplete a un impact sur la liste déroulante des suggestions. S'il est activé (ce qui est le cas par défaut), alors aux valeurs que vous avez définies dans l'étiquette datalist se mélangeront les valeurs que l'utilisateur a précédemment saisies dans ce champ.

Tapez 'Brazil' dans le champ et cliquez sur le bouton d'envoi (sans envoi, le navigateur ne mémorisera pas ce pays). Ensuite, revenez à cet exemple et saisissez la lettre 'b' - dans la liste apparaissant, vous verrez non seulement 3 pays du datalist, mais aussi le pays saisi précédemment (en plus de cela, si vous faites la même chose avec le mot 'Belarus' - dans la liste déroulante, cette valeur apparaîtra deux fois).

Si cela vous gêne - désactivez l'attribut autocomplete, en lui ajoutant la valeur off.

Répétez les manipulations décrites ci-dessus avec l'exemple :

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Voir aussi

l'attribut autocomplete,
qui définit la saisie semi-automatique pour les champs de formulaire