W3C HTML4 OPTGROUP example

Popup menu SELECT

The following markup:


<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
     </OPTGROUP>
 </SELECT>
</FORM>

should produce a popup hierarchical menu with three first level hierarchical menu items, each of which has several sub-menu-items. Note that since the OPTION elements have a LABEL attribute in addition to text content, only the contents of the LABEL attribute should be used.

"When specified, user agents should use the value of this [LABEL] attribute rather than the content of the OPTION element as the option label."

This example produces the following result on your browser:

Correct

A correct rendering should have all of the following:

A popup menu with nothing selected (or "3.7.1" selected if the platform does not support menus with no selection).
When clicked on, the three sub-menus "PortMaster 3", "PortMaster 2", "IRX", and nothing else (except perhaps the sub-menu off of "PortMaster 3" if that sub-menu happens to be selected when you click on the popup).
When the "PortMaster 3" item is selected, a sub-menu with three items: "3.7.1", "3.7", and "3.5".
When the "PortMaster 2" item is selected, a sub-menu with two items: "3.7" and "3.5".
When the "IRX" item is selected, a sub-menu with two items: "3.7R" and "3.5R".

Incorrect

A rendering is incorrect if it has any of the following:

A list instead of a popup menu.
Any text visible in the popup menu by default (other than possibly just "3.7.1").
When clicked on, the entire set of OPTGROUPs and OPTIONs in one list (whether indented or not).
The contents "Portmaster 3 with ComOS 3.7.1" visible anywhere.
The contents "Portmaster 3 with ComOS 3.7" visible anywhere.
The contents "Portmaster 3 with ComOS 3.5" visible anywhere.
The contents "Portmaster 2 with ComOS 3.7" visible anywhere.
The contents "Portmaster 2 with ComOS 3.5" visible anywhere.
The contents "IRX with ComOS 3.7R" visible anywhere.
The contents "IRX with ComOS 3.5R" visible anywhere.

List box SELECT

The following markup (with size=10 added to the SELECT element):


<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT size=10 name="ComOS">
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
     </OPTGROUP>
 </SELECT>
</FORM>

should produce a list box with seven selectable items, grouped into three indented groups, each of which is labeled with their respective OPTGROUP LABEL attribute.

This example produces the following result on your browser:

Correct

A correct rendering should have all of the following::

A list box 10 lines tall with nothing selected.
Three groupings (possibly styled differently from the OPTIONs) "PortMaster 3", "PortMaster 2", and "IRX".
Under the "PortMaster 3" item (and perhaps indented and in a lighter weight font), a sub-list with three items: "3.7.1", "3.7", and "3.5".
Under the "PortMaster 2" item (and perhaps indented and in a lighter weight font), a sub-list with two items: "3.7" and "3.5".
Under the "IRX" item (and perhaps indented and in a lighter weight font), a sub-list with two items: "3.7R" and "3.5R".

Incorrect

A rendering is incorrect if it has any of the following:

A popup menu instead of a list.
A list that is more or less than 10 lines tall (i.e. it must be exactly 10 lines tall).
The entire set of OPTGROUPs and OPTIONs in one flat list (e.g. no indentation or other indication of hierarchy).
OPTGROUPs that can be selected.
The contents "Portmaster 3 with ComOS 3.7.1" visible anywhere.
The contents "Portmaster 3 with ComOS 3.7" visible anywhere.
The contents "Portmaster 3 with ComOS 3.5" visible anywhere.
The contents "Portmaster 2 with ComOS 3.7" visible anywhere.
The contents "Portmaster 2 with ComOS 3.5" visible anywhere.
The contents "IRX with ComOS 3.7R" visible anywhere.
The contents "IRX with ComOS 3.5R" visible anywhere.

W3C HTML4 OPTGROUP example

This page demonstrates the OPTGROUP support in IE5/Macintosh (shipped on 27 March 2000).

Popup menu SELECT

Correct

Incorrect

List box SELECT

Correct

Incorrect