Élément Datalist

L'élément <datalist> en HTML est utilisé pour créer une liste prédéfinie d'options pour un élément <input>. Il permet à l'utilisateur de sélectionner une option dans la liste tout en lui donnant la possibilité d'entrer sa propre valeur s'il le souhaite. La liste des valeurs prédéfinies reste cachée jusqu'à ce que l'utilisateur commence à taper dans le champ de texte associé. Le <datalist> est associé à un attribut id, et l'élément <input> y est lié à l'aide de l'attribut list.

Dans l'ensemble, l'élément <datalist> peut être un moyen utile de fournir une liste prédéfinie d'options parmi lesquelles les utilisateurs peuvent choisir, tout en leur permettant la flexibilité d'entrer leur propre valeur si nécessaire.

Exemple

Lorsque l'utilisateur commence à taper dans le champ de saisie category, le navigateur affichera les catégories prédéfinies du datalist. Si aucune des options ne correspond à la saisie de l'utilisateur, il peut toujours taper sa propre catégorie. Cela permet à l'utilisateur de choisir parmi une liste et de saisir manuellement une valeur si nécessaire.

• <label for="category">: étiquette le champ de saisie, indiquant à l'utilisateur qu'il doit sélectionner ou entrer une catégorie de produit;
• <input type="text" name="category" id="category" list="categories"/>: le champ de saisie où l'utilisateur peut soit taper une catégorie, soit sélectionner parmi les options disponibles. L'attribut list="categories" lie cette entrée au datalist avec l'ID categories;
• <datalist id="categories">: cela contient une liste de catégories de produits prédéfinies. Ces options apparaîtront comme suggestions lorsque l'utilisateur commencera à taper dans le champ de saisie;
• <option value="...">: chaque option représente une catégorie de produit dans la liste. L'utilisateur peut sélectionner l'une de ces catégories ou taper sa propre valeur si elle ne correspond à aucune des options.