HTML <optgroup> Tag
The HTML <optgroup> tag represents a group of <option> elements with a common label.
The <optgroup> element helps users understand the options when choosing from a large list of options.
Syntax
The <optgroup> tag is written as <optgroup label=""></optgroup> with any number of <option> and/or script-supporting elements.
The label attribute must be specified. This attribute provides the user with the name of the group. Without this, the <optgroup> element would be meaningless.
The <optgroup> tag must be nested inside a <select> tag.
Like this:
Example
Here, we have a list of cities that are grouped by country. The <optgroup> tag enables us to do this by adding the country name to the label attribute.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The <optgroup> element accepts the following attributes.
| Attribute | Description |
|---|---|
disabled | Disables the group of input controls. The form control won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
label | Specifies a label for the option group. This attribute must be specified. Its value gives the name of the group. |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <optgroup> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.