Comment configurer une zone de liste déroulante HTML

La zone de liste déroulante HTML est l'un des éléments interactifs couramment utilisés dans les pages Web, qui permet aux utilisateurs de sélectionner une ou plusieurs options prédéfinies. Dans cet article, nous présenterons comment configurer une zone de liste déroulante HTML, notamment la création d'une zone de liste déroulante, l'ajout d'options, la définition des options par défaut, etc.

1. Créez une zone de liste déroulante

La première étape pour utiliser une zone de liste déroulante HTML consiste à créer une balise , comme indiqué ci-dessous :

<select name="fruit">
</select>

Ce code crée une liste déroulante. boîte nommée "fruit", mais il n'y a pas encore d'options.

2. Ajouter des options

Ensuite, nous devons ajouter des options dans la balise

. Vous pouvez utiliser la balise pour définir chaque option comme suit :

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

Chaque balise parties : afficher le texte et la valeur. Le texte affiché fait référence au texte affiché dans la zone de liste déroulante et la valeur fait référence à la valeur transmise au serveur une fois l'option sélectionnée.

3. Définir les options par défaut

Par défaut, la première option dans la zone de liste déroulante sera sélectionnée. Si vous souhaitez définir d'autres options comme option par défaut, vous pouvez utiliser l'attribut sélectionné dans la balise , comme indiqué ci-dessous :

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

Dans cet exemple, l'option "Banana" est définie comme option par défaut.

4. Configurer plusieurs sélections

Si vous souhaitez que l'utilisateur sélectionne plusieurs options, vous pouvez utiliser l'attribut multiple dans la balise , comme indiqué ci-dessous :

<select name="fruit" multiple>
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

Lorsque l'utilisateur maintient la touche "Ctrl" enfoncée. et clique sur l'option, vous pouvez sélectionner plusieurs options. Le serveur peut recevoir des valeurs pour plusieurs options.

5. Configurer la soumission du formulaire

Une fois que l'utilisateur a sélectionné une ou plusieurs options, les valeurs de ces options doivent être soumises au serveur. Pour ce faire, vous devez utiliser l'attribut name dans la balise

pour associer la zone de liste déroulante aux autres éléments du formulaire, comme indiqué ci-dessous :

<form action="submit.php" method="post">
  <select name="fruit">
    <option value="apple">苹果</option>
    <option value="banana" selected>香蕉</option>
    <option value="orange">橙子</option>
  </select>
  <input type="submit" value="提交">
</form>

Dans cet exemple, les autres éléments du formulaire ne sont pas affichés, mais ils peuvent être ajoutés aux formulaires de la même manière pour activer des fonctionnalités plus complexes.

En général, la zone de liste déroulante HTML est l'un des éléments interactifs couramment utilisés dans les pages Web. Après avoir compris comment créer, ajouter des options, définir les options par défaut, définir la sélection multiple et définir la soumission de formulaires, vous pouvez le faire en fonction de vos besoins. besoins Personnalisez la zone de liste déroulante pour permettre aux utilisateurs d'effectuer des sélections facilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!