Tutorial 13: Giving Form to Forms - HTML with Style | 10

Tutorial 13: Giving Form to Forms

Menus with sub-menus

You can also group multiple OPTION elements in an OPTGROUP element to create a sub-menu within a menu.

The OPTGROUP element

Context:

Can only be placed inside a SELECT element.

Contents:

Can contain only OPTION elements.

Tags:

Both start-tag and end-tag are required.

Attributes for the OPTGROUP element

LABEL (Text)

A label to be used when displaying the sub-menu.

Disabled control attribute

Identifier and classification attributes

Language information attributes

Title attribute

Inline style information attribute

Intrinsic event handler attributes

OPTGROUP is not supported by any current release browser, but it has a sensible fall-back, since browsers that don't recognize the OPTGROUP element will just render all OPTION elements in the same menu, without any sub-menus.

<FORM ACTION="/cgi-bin/html/formdump.cgi" 
      METHOD="GET" ENCTYPE="application/x-www-form-urlencoded">
<SELECT NAME="product">
<OPTGROUP LABEL="Windows 95, 98 or NT">
 <OPTION VALUE="winserver">MORONS Server 
          for Windows</OPTION>
 <OPTION VALUE="winruntime">MORONS Run-time 
          for Windows</OPTION>
 <OPTION VALUE="windevkit">MORONS Developer's Kit 
          for Windows</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Macintosh">
 <OPTION VALUE="macserver">MORONS Server for
          the Macintosh</OPTION>
 <OPTION VALUE="macruntime">MORONS Run-time for 
          the Macintosh</OPTION>
 <OPTION VALUE="macdevkit">MORONS Developer's Kit for 
          the Macintosh</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Linux">
 <OPTION VALUE="linuxserver">MORONS Server 
          for Linux</OPTION>
 <OPTION VALUE="linuxruntime">MORONS Run-time 
          for Linux</OPTION>
 <OPTION VALUE="linuxdevkit">MORONS Developer's Kit 
          for Linux</OPTION>
</OPTGROUP>
</SELECT>
<INPUT TYPE="submit">
</FORM>

OBJECT elements as form controls

HTML 4.0 contains instructions on how to use an OBJECT element as a form control, but this is currently unimplemented in all browsers I know of. The OBJECT element can be given a NAME attribute, but the value it returns depends on the specific object type, and to my knowledge no implementation yet exists that can do this. When and if such gadgets are invented, check this space for an update on how to use them.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/17.html

Created: May 28, 1998
Revised: February 25, 1999