HTML <optgroup> Tag - HTML Tag

The <optgroup> HTML element creates a grouping of options within a <select> element.

Definition and Usage

The <optgroup> tag is used to group related options in a <select> element (drop-down list).

If you have a long list of options, groups of related options are easier to handle for a user.

Browser Support

Attributes

Attribute	Value	Description
disabled	disabled	Specifies that an option-group should be disabled
label	text	Specifies a label for an option-group

Global Attributes

The <optgroup> tag also supports the Global Attributes in HTML.

Event Attributes

The <optgroup> tag also supports the Event Attributes in HTML.

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

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

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

Value	Description
text	Specifies a label/description for the option-group

How to add HTML <optgroup> label Attribute

Two option-groups with labels.

index.html

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

html optgroup

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference