Contenu du cours
HTML Ultime
HTML Ultime
Utilisation de l’Élément Datalist pour des Suggestions de Saisie Prédéfinies
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
.
index.html
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.
index.html
<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'attributlist="categories"
lie ce champ audatalist
ayant l'identifiantcategories
;<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="...">
: chaqueoption
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.
1. Quel élément HTML est utilisé pour créer une liste déroulante avec plusieurs options ?
2. Quel est le but de l’élément datalist
?
3. Quel attribut est utilisé pour lier un élément datalist
à un élément input
?
Merci pour vos commentaires !