• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Tag
• What is HTML <optgroup> Tag

How to create HTML <optgroup> Tag

Group related options with <optgroup> tags. The optgroup tag is used to group related options in a drop-down list:

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <optgroup> disabled Attribute

The disabled attribute for <optgroup> element in HTML is used to specify that the option-group is disabled. A disabled optgroup is un-clickable and unusable. It is a boolean attribute. 

Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that an option-group should be disabled.

A disabled option-group is unusable and un-clickable.

The disabled attribute can be set to keep a user from selecting the option-group until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled value, and make the option-group selectable.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

How to add HTML <optgroup> disabled Attribute

A disabled option-group.

The optgroup disabled attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars" disabled>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <optgroup> label Attribute

Definition and Usage

The label attribute specifies a label for an option-group.

Browser Support

Syntax

Attribute Values

How to add HTML <optgroup> label Attribute

Two option-groups with labels.

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup