Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Utilisation de l’Élément Datalist pour des Suggestions de Saisie Prédéfinies | Formulaires HTML et Saisie Utilisateur
HTML Ultime
course content

Contenu du cours

HTML Ultime

HTML Ultime

1. Compréhension du Développement Web
2. Balises et Attributs HTML
3. Structure d'un Document HTML
4. Travail avec les Médias et les Tableaux

book
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.

html

index.html

copy

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.

html

index.html

copy
  • <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.

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 ?

question mark

Quel élément HTML est utilisé pour créer une liste déroulante avec plusieurs options ?

Select the correct answer

question mark

Quel est le but de l’élément datalist ?

Select the correct answer

question mark

Quel attribut est utilisé pour lier un élément datalist à un élément input ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 9

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

course content

Contenu du cours

HTML Ultime

HTML Ultime

1. Compréhension du Développement Web
2. Balises et Attributs HTML
3. Structure d'un Document HTML
4. Travail avec les Médias et les Tableaux

book
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.

html

index.html

copy

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.

html

index.html

copy
  • <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.

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 ?

question mark

Quel élément HTML est utilisé pour créer une liste déroulante avec plusieurs options ?

Select the correct answer

question mark

Quel est le but de l’élément datalist ?

Select the correct answer

question mark

Quel attribut est utilisé pour lier un élément datalist à un élément input ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 9
Nous sommes désolés de vous informer que quelque chose s'est mal passé. Qu'est-il arrivé ?
some-alt