Option de liste de sélection HTML

Introduction

La balise HTML <option> est utilisée pour définir les options dans une liste déroulante d'un formulaire HTML. Elle est attachée à la balise <select> et à ses variantes telles que <datalist> et <optgroup>. Cette balise aide les utilisateurs à faire un choix parmi une liste de choix. Ce laboratoire vous guidera tout au long des étapes pour implémenter une liste déroulante HTML en utilisant la balise <option>.

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

Créez un élément <form>

Créez un fichier HTML nommé index.html dans votre éditeur de texte préféré.

Commencez par créer un formulaire HTML de base :

<form></form>

Créez un élément <select> et ajoutez des options

À l'intérieur de l'élément <form>, ajoutez un élément <select>, qui créera une liste déroulante.

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

Ici, nous avons ajouté trois balises <option> à l'intérieur des balises <select> avec l'attribut value défini sur "option1", "option2" et "option3".

Ajoutez une invitation

Ajoutons un texte d'invitation. À l'intérieur de la balise <select>, ajoutez le code suivant :

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Ici, nous avons ajouté une nouvelle balise <option> avec les attributs suivants :

• value="" qui définit la valeur sur une chaîne de caractères vide.
• disabled qui désactive l'option pour qu'elle ne puisse pas être sélectionnée.
• selected qui est utilisé pour indiquer le choix par défaut de la liste déroulante.
• Le texte à l'intérieur de la balise <option> qui sert d'invitation.

Ajoutez un bouton de soumission

Nous avons besoin d'un bouton de soumission pour soumettre le formulaire. Ajoutez le code suivant après la balise <select> :

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

Enregistrez le fichier et exécutez-le dans un navigateur web pour voir la liste déroulante en action.

Récapitulatif

Dans ce laboratoire, nous avons appris à utiliser la balise HTML <option> pour créer une liste déroulante. Nous avons commencé par créer un formulaire HTML, puis ajouté un élément <select>, ajouté des options à l'intérieur avec l'attribut value, et ajouté un texte d'invitation. Enfin, nous avons ajouté un bouton de soumission pour soumettre le formulaire. La balise <option> joue un rôle crucial dans la création de formulaires HTML dynamiques.