HTML <optgroup> tagS2C Home « HTML <optgroup> tag
Definition
The <optgroup> tag is used to define a group of related options.
Example
<select>
<optgroup label="labelName">
<option value="round">round</option>
<option value="square">square</option>
</optgroup>
</select>
Required Attributes
label - specifies the viewable title of a group of options.
<optgroup label="labelName"></optgroup>
Optional Attributes
disabled - specifies the optgroup will be disabled until a certain condition occurs.
<optgroup label="labelName" disabled="disabled"></optgroup>
Common Attributes
accesskey - specifies a keyboard shortcut to an element.
<optgroup label="labelName" accesskey="aKey"></optgroup>
class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.
<optgroup label="labelName" class="classname"></optgroup>
id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.
<optgroup label="labelName" id="idname"></optgroup>
style - specifies an inline style for the element allowing you to apply the style to the content.
<optgroup label="labelName" style="color:red;text-align:left"></optgroup>
title - specifies extra information about the content.
<optgroup label="labelName" title="information about the content"></optgroup>
Language Attributes
dir - specifies the directional flow of the content.
<!-- The text will flow from left to right -->
<optgroup label="labelName" dir="ltr"></optgroup>
<!-- The text will flow from right to left -->
<optgrouplabel="labelName" dir="rtl"></optgroup>
lang - specifies a language code for the content of the element.
<optgroup label="labelName" lang="en"></optgroup>
xml:lang - specifies a language code for the content of the element in XHTML documents.
<optgroup label="labelName" xml:lang="fr"></optgroup>
Document Event Attributes
NONE
Form Event Attributes
onblur - The JavaScript code to be run when an element loses focus.
<!-- Executes the go() function -->
<optgroup label="labelName" onblur="go()"></optgroup>
onchange - The JavaScript code to be run when an element gains focus.
<!-- Executes the go() function -->
<optgroup label="labelName" onchange="go()"></optgroup>
onfocus - The JavaScript code to be run when an element loses focus.
<!-- Executes the go() function -->
<optgroup label="labelName" onfocus="go()"></optgroup>
onselect - The JavaScript code to be run when an element gains focus.
<!-- Executes the go() function -->
<optgroup label="labelName" onselect="go()"></optgroup>
Image Event Attributes
NONE
Keyboard Event Attributes
onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.
<!-- Executes the go() function -->
<optgroup label="labelName" onkeydown="go()"></optgroup>
onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.
<!-- Executes the go() function -->
<optgroup label="labelName" onkeypress="go()"></optgroup>
onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.
<!-- Executes the go() function -->
<optgroup label="labelName" onkeyup="go()"></optgroup>
Mouse Event Attributes
onclick - The JavaScript code to be run when a mouse is clicked on the element.
<!-- Executes the go() function -->
<optgroup label="labelName" onclick="go()"></optgroup>
ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.
<!-- Executes the go() function -->
<optgroup label="labelName" ondblclick="go()"></optgroup>
onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.
<!-- Executes the go() function -->
<optgroup label="labelName" onmousedown="go()"></optgroup>
onmousemove - The JavaScript code to be run when the mouse button is moved.
<!-- Executes the go() function -->
<optgroup label="labelName" onmousemove="go()"></optgroup>
onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.
<!-- Executes the go() function -->
<optgroup label="labelName" onmouseout="go()"></optgroup>
onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.
<!-- Executes the go() function -->
<optgroup label="labelName" onmouseover="go()"></optgroup>
onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.
<!-- Executes the go() function -->
<optgroup label="labelName" onmouseup="go()"></optgroup>