HTML Reference - The HTML <optgroup> tag

 

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>

Homepage Top