Options d'entrée prédéfinies en HTML

Introduction

La balise HTML datalist est utilisée pour fournir une liste d'options prédéfinies qui apparaissent lorsque l'utilisateur tape dans un champ de saisie. Dans ce laboratoire, vous allez apprendre à utiliser la balise datalist pour activer la fonctionnalité d'autocomplétion sur un formulaire.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Ajout du champ d'entrée

Créez un fichier HTML appelé "index.html".

Ajoutez un champ de saisie à votre fichier HTML en utilisant la balise <input>.

<input type="text" id="car-brand" />

Création d'un datalist

Créez un datalist en utilisant la balise <datalist> et l'attribut id.

<datalist id="car-brands"> </datalist>

Ajout d'options au datalist

Ajoutez quelques options au datalist en utilisant la balise <option>.

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

Lier le champ d'entrée au datalist

Liez le champ de saisie au datalist en utilisant l'attribut list et en définissant sa valeur sur l'ID du datalist.

<input type="text" id="car-brand" list="car-brands" />

Enregistrez les modifications et testez la fonctionnalité d'autocomplétion sur le formulaire avec plusieurs marques de voitures.

Résumé

En suivant ces étapes simples, vous pouvez implémenter la balise datalist dans votre code HTML pour fournir une fonctionnalité d'autocomplétion sur un formulaire. La balise datalist permet aux utilisateurs de sélectionner dans une liste d'options prédéfinies tout en offrant également la possibilité d'entrer des valeurs en dehors des options prédéfinies si nécessaire.