Groupement d'options HTML : Améliorer la fonctionnalité des listes déroulantes

Introduction

La balise <optgroup> en HTML est utilisée pour créer un regroupement d'options dans une liste déroulante. Ce laboratoire vous guidera tout au long des étapes pour créer un optgroup et le personnaliser à l'aide d'attributs.

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 actualiser l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70808{{"Groupement d'options HTML"}} html/head_elems -.-> lab-70808{{"Groupement d'options HTML"}} html/forms -.-> lab-70808{{"Groupement d'options HTML"}} html/form_group -.-> lab-70808{{"Groupement d'options HTML"}} html/form_access -.-> lab-70808{{"Groupement d'options HTML"}} html/inter_elems -.-> lab-70808{{"Groupement d'options HTML"}} html/custom_attr -.-> lab-70808{{"Groupement d'options HTML"}} end

Configurez le fichier HTML

Créez un nouveau fichier appelé index.html. Ajoutez la structure HTML de base et incluez une balise <select> dans l'élément body.

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup Tag Lab</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

Ajoutez des options à la liste déroulante

Ajoutez des balises <option> à l'intérieur de la balise <select> pour créer votre liste d'options. Utilisez l'attribut value pour définir la valeur de chaque option.

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

Créez un optgroup

Utilisez la balise <optgroup> pour regrouper certaines options. Ajoutez l'attribut label pour définir le nom du groupe.

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Désactivez un optgroup

Utilisez l'attribut disabled pour désactiver un groupe entier d'options dans la liste déroulante. Ajoutez cet attribut à la balise d'ouverture <optgroup>.

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Sommaire

La balise <optgroup> est utilisée pour créer un regroupement d'options dans une liste déroulante. Vous pouvez la personnaliser à l'aide d'attributs tels que disabled et label. En suivant les étapes de ce laboratoire, vous pouvez efficacement regrouper et organiser vos options en HTML.