HTML Option Grouping: Enhance Dropdown Functionality

Introduction

The <optgroup> tag in HTML is used to create a grouping of options within a dropdown list. This lab will take you through the steps to create an optgroup and customize it using attributes.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70808{{"`HTML Option Grouping`"}} html/head_elems -.-> lab-70808{{"`HTML Option Grouping`"}} html/forms -.-> lab-70808{{"`HTML Option Grouping`"}} end

Set up the HTML File

Create a new file called index.html. Add the basic HTML structure and include a <select> tag within the body element.

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

Add <option> tags within the <select> tag to create your list of options. Use the value attribute to set the value for each option.

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

Create an Optgroup

Use the <optgroup> tag to group certain options together. Add the label attribute to define the name of the group.

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

Disable an Optgroup

Use the disabled attribute to disable an entire group of options within the dropdown list. Add this attribute to the opening <optgroup> tag.

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

Summary

The <optgroup> tag is used to create a grouping of options within a dropdown list. You can customize it using attributes such as disabled and label. By following the steps in this lab, you can effectively group and organize your options in HTML.

HTML Option Grouping