W3C HTML4 OPTGROUP example

This is an example from the W3C HTML4 Recommendation, specifically the section on OPTGROUP in chapter 17 Forms.

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

IE5/Macintosh is the first shipping browser that fully supports HTML 4.0, CSS 1.0, DOM 1.0 HTML, PNG 1.0, and ECMAScript (ECMA-262 / JavaScript 1.3).

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:

Incorrect

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

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::

Incorrect

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

Tantek Çelik Last Updated : Saturday, April 8, 2000 Valid HTML 4.0! Valid CSS!