HTML Tutorials
Html What isHtml Comments
Html <!DOCTYPE>
Html A Type Tag
Html B Type Tag
Html C Type Tag
Html D Type Tag
Html S Type Tag
Html T Type Tag
Html H1-H6 Tag
Html Form Input
Html Phrase Tag
Html I Tag
Html U Tag
Html Hr Tag
Html Ul Tag
Html Pre Tag
Html Object Tag
Html Param Tag
Html Ol Tag
Html Noscript Tag
Html Noframes Tag
Html Meta Tag
Html Map Tag
Html Link Tag
Html Li Tag
Html Legend Tag
Html Ins Tag
Html Iframe Tag
Html Html Tag
Html Font Tag
Html Q Tag
Html P Tag
Html Img Tag
html Optgroup Tag
In the html <optgroup> tag is used to group data options in a select list.All main browsers are supported in <optgroup> tag. If you have long list at select box use to <optgroup> tag for grouping data and it easily understand for user.In the <optgroup> tag label attribute is used to label for the option group and disabled attribute is used to disabled for <optgroup> tag.
The <optgroup> tag required attributes is label and optional attributes is disabled and standard attributes are class, dir, id, lang, style, title and xml:lang.
Syntax:
<select>
<optgroup>
<option> ... </option>
</optgroup>
</select>
<optgroup>
<option> ... </option>
</optgroup>
</select>
Example Code
<select>
<optgroup label="Alphabetical Letter">
<option value ="sydney"> A </option>
<option value ="melbourne"> B </option>
<option value ="melbourne"> C </option>
</optgroup>
<optgroup label="Numeric Numbers">
<option value ="cromwell"> 1 </option>
<option value ="queenstown"> 2 </option>
<option value ="queenstown"> 3 </option>
</optgroup>
<optgroup label="Symbols">
<option value ="cromwell"> + </option>
<option value ="queenstown"> - </option>
<option value ="queenstown"> * </option>
</optgroup>
</select>
<optgroup label="Alphabetical Letter">
<option value ="sydney"> A </option>
<option value ="melbourne"> B </option>
<option value ="melbourne"> C </option>
</optgroup>
<optgroup label="Numeric Numbers">
<option value ="cromwell"> 1 </option>
<option value ="queenstown"> 2 </option>
<option value ="queenstown"> 3 </option>
</optgroup>
<optgroup label="Symbols">
<option value ="cromwell"> + </option>
<option value ="queenstown"> - </option>
<option value ="queenstown"> * </option>
</optgroup>
</select>
Out Put:
In the above select list example <optgroup> tag has been added to Alphabetical Letter,Numeric Numbers and Symbols.you can not select <optgroup> options.