HTML <optgroup> Tag

The optgroup tag generates a group of options within a <select> control's dropdown list of values.

A sequence of <option> tags define the dropdown values, which are then grouped using the <optgroup> tag.

The <optgroup> label value will appear as a grey heading above the grouped items in the choose control. The <optgroup> element is another popular name for this tag.

Syntax

<optgroup><option>Contents here...</option></optgroup>

Example

<!DOCTYPE html>
<html>
<body>

<p> The optgroup tag is used in a drop-down list to group related options:  </p>

<form action="/action.php">
  <label for="bike">Choose a bike:</label>
  <select  name="bike" id="bike">
	<optgroup label="Standard Bike">
	  <option value="royal">Royal Enfield Meteor</option>
	  <option value="yezdi">Yezdi Roadster</option>
	  <option value="ktm">KTM Duke 200</option>
	</optgroup>
	<optgroup label="German Cars">
	  <option value="Yamaha">Yamaha YZF</option>
	  <option value="bajaj">Bajaj Pulsar </option>
	  <option value="suzuki">Suzuki Gixxer </option>
	  <option value="honda">Honda</option>
	</optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Preview

Attributes

Attribute	Value	Description
disabled	disabled	The user will be unable to interact with the <select> control if this value is true.
label	text	The heading that shows above the <select> control's grouped options.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
<optgroup>	Yes	Yes	Yes	Yes	Yes

<ol>

HTML <optgroup> Tag

Syntax

Example

Attributes

Supported Browsers

Links

Tutorials

Connect with us