<datalist> : l'élément de liste des données
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
L'élément HTML <datalist> contient un ensemble d'éléments HTML <option> qui représentent les options permises ou recommandées à choisir dans d'autres contrôles.
Exemple interactif
<label for="ice-cream-choice">Choisissez une saveur :</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolat"></option>
<option value="Noix de coco"></option>
<option value="Menthe"></option>
<option value="Fraise"></option>
<option value="Vanille"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
Pour lier l'élément <datalist> au contrôle, on lui donne un identifiant unique via l'attribut id, puis on ajoute l'attribut list à l'élément HTML <input> avec le même identifiant en valeur.
Seuls certains types de <input> prennent en charge ce comportement, et cela peut aussi varier selon le navigateur.
Chaque élément <option> doit avoir un attribut value, qui représente une suggestion à saisir dans le champ. Il peut aussi avoir un attribut label, ou, à défaut, un contenu textuel, qui pourra être affiché par le navigateur à la place de value (Firefox), ou en complément de value (Chrome et Safari, comme texte supplémentaire). Le contenu exact du menu déroulant dépend du navigateur, mais lors du clic, la valeur saisie dans le champ proviendra toujours de l'attribut value.
Note :
<datalist> n'est pas un remplacement de <select>. Un <datalist> ne représente pas un champ de saisie en soi ; il s'agit d'une liste de valeurs suggérées pour un contrôle associé. Le contrôle peut toujours accepter toute valeur qui passe la validation, même si elle n'est pas dans cette liste de suggestions.
Attributs
Cet élément inclut uniquement les attributs universels.
Accessibilité
Avant d'utiliser l'élément <datalist>, voici quelques points d'attention concernant l'accessibilité :
- La taille de police des options de la liste de données ne s'agrandit pas, elle reste toujours identique. Le contenu de la saisie semi-automatique ne grossit ni ne rétrécit lorsque le reste du contenu est zoomé ou dézoomé.
- Il est très difficile, voire impossible, de cibler la liste d'options avec du CSS, donc l'affichage ne peut pas être adapté pour un mode à contraste élevé.
- Certaines combinaisons lecteur d'écran/navigateur, notamment NVDA et Firefox, n'annoncent pas le contenu de la fenêtre de saisie semi-automatique.
Exemples
Types textuels
Les valeurs recommandées pour les types text, search, url, tel, email et number s'affichent dans un menu déroulant lorsque l'utilisateur·ice clique ou double-clique sur le contrôle. En général, le côté droit du contrôle affiche aussi une flèche indiquant la présence de valeurs prédéfinies.
<label for="monNavigateur"
>Veuillez choisir un navigateur parmi ceux-ci :</label
>
<input list="navigateurs" id="monNavigateur" name="monNavigateur" />
<datalist id="navigateurs">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
Types date et heure
Les types month, week, date, time et datetime-local peuvent afficher une interface permettant de sélectionner facilement une date ou une heure. Des valeurs prédéfinies peuvent y être proposées, permettant à l'utilisateur·ice de remplir rapidement le champ.
Note :
Lorsque ces types ne sont pas pris en charge, un champ de type text classique sera affiché à la place. Ce champ reconnaîtra correctement les valeurs recommandées et les affichera dans un menu déroulant.
<input type="time" list="heuresPopulaires" />
<datalist id="heuresPopulaires">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
Type range
Lorsque des attributs value sont présents sur les éléments <option> d'une liste associée à un champ range, ils s'affichent comme une série de repères facilement sélectionnables.
<label for="pourboire">Montant du pourboire :</label>
<input
type="range"
list="reperes"
min="0"
max="100"
id="pourboire"
name="pourboire" />
<datalist id="reperes">
<option value="0" label="0%"></option>
<option value="10" label="Pourboire minimum"></option>
<option value="20" label="Standard"></option>
<option value="30" label="Genereux"></option>
<option value="50" label="Tres genereux"></option>
</datalist>
Note :
L'attribut label est destiné à fournir des étiquettes pour les repères, comme défini dans la spécification HTML (angl.). Cependant, la prise en charge actuelle par les navigateurs varie ; les étiquettes peuvent ne pas s'afficher visuellement ou comme info-bulle.
Type color
Le type color peut afficher des couleurs prédéfinies dans une interface fournie par le navigateur.
<label for="couleurs"
>Choisissez une couleur (de preference une teinte rouge) :</label
>
<input type="color" list="couleursRouges" id="couleurs" />
<datalist id="couleursRouges">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
Résumé technique
| Catégories de contenu | Contenu de flux, contenu phrasé. |
|---|---|
| Contenu autorisé |
Soit du
contenu phrasé
ou entre zéro et plusieurs éléments HTML
<option>.
|
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autorisés | N'importe quel élément qui accepte du contenu phrasé. |
| Rôle ARIA implicite |
listbox
|
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLDataListElement |
Spécifications
| Specification |
|---|
| HTML # the-datalist-element |