Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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émentHTML<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" name="ice-cream-choice" /><datalist> <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'attributid, puis on ajoute l'attributlist à 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 attributvalue, qui représente une suggestion à saisir dans le champ. Il peut aussi avoir un attributlabel, ou, à défaut, un contenu textuel, qui pourra être affiché par le navigateur à la place devalue (Firefox), ou en complément devalue (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'attributvalue.
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 lesattributs 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 typestext,search,url,tel,email etnumber 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" name="monNavigateur" /><datalist> <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 typesmonth,week,date,time etdatetime-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 typetext 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> <option value="12:00"></option> <option value="13:00"></option> <option value="14:00"></option></datalist>Typerange
Lorsque des attributsvalue sont présents sur les éléments<option> d'une liste associée à un champrange, 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" name="pourboire" /><datalist> <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'attributlabel est destiné à fournir des étiquettes pour les repères, comme défini dans laspé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.
Typecolor
Le typecolor 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" /><datalist> <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 ducontenu 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 acceptedu contenu phrasé. |
| Rôle ARIA implicite | listbox |
| Rôles ARIA autorisés | Aucunrole autorisé |
| Interface DOM | HTMLDataListElement |
Spécifications
| Specification |
|---|
| HTML # the-datalist-element |