Tag <optgroup> HTML Reference

Example

Group related options with <optgroup> tags:

<select>
  <optgroup label="Group one">
    <option value="element1">Element1</option>
    <option value="element2">Element2</option>
  </optgroup>
  <optgroup label="Group Two">
    <option value="element3">Element3</option>
    <option value="element4">Element4</option>
    <option value="element5">Element5</option>
  </optgroup>
</select>

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

1. Definition and Usage

The <optgroup> is used to group related options in a drop-down list.

If you have a long list of options, groups of related options are easier to handle for a user.

2. Differences Between HTML and XHTML

None

3. Required Attributes

DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
label text Specifies a label for an option-group STF

4. Optional Attributes

Attribute Value Description DTD
disabled disabled Specifies that an option-group should be disabled STF

5. Standard Attributes

The <optgroup> tag supports the following standard attributes:

Attribute Value Description DTD
class classname Specifies a classname for an element STF
dir rtl
ltr		 Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

6. Event Attributes

The <optgroup> tag supports the following event attributes:

Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF

Other HTML/XHTML tags:

<a> <abbr> <acronym> <address> <area> <b> <base> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>

Relative articles

Creating a Toggle CSS3 Bottom Navigation Bar
CSS3 Bottom navigation menu

CSS3 Bottom navigation menu

Today I prepared nice CSS3 bottom navigation menu for you. This is will sliding drop down menu with fixed position in bottom of screen. Also, I going to use jQuery for sliding effects.

(more…)

Written by: admin on October 25, 2011.
Creating new HTML5/CSS3 single page layout – Art theme
Art HTML5&CSS3 single page layout

Creating new HTML5&CSS3 single page layout – Art theme

Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.

I going to start step-by-step tutorial for creating html5-css3 layout.

(more…)

Written by: admin on September 1, 2011.