This is an example from the W3C HTML4 Recommendation, specifically the section on OPTGROUP in chapter 17 Forms.
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).
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:
A correct rendering should have all of the following:
A rendering is incorrect if it has any of the following:
The following markup (with
added to the SELECT element):size=10
<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:
A correct rendering should have all of the following::
A rendering is incorrect if it has any of the following:
Tantek Çelik Last Updated : Saturday, April 8, 2000