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é de saisir 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é. L’élément <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 laissant la flexibilité de saisir leur propre valeur si nécessaire.

Exemple

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

• <label for="category"> : associe une étiquette au champ de saisie, indiquant à l'utilisateur qu'il doit sélectionner ou saisir une catégorie de produit ;

• <input type="text" name="category" id="category" list="categories"/> : champ de saisie permettant à l'utilisateur de saisir une catégorie ou d'en sélectionner une parmi les options disponibles. L'attribut list="categories" lie ce champ au datalist ayant l'identifiant categories ;

• <datalist id="categories"> : contient une liste de catégories de produits prédéfinies. Ces options apparaîtront comme suggestions lorsque l'utilisateur commencera à saisir dans le champ ;

• <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 saisir sa propre valeur si aucune option ne correspond.