Tutorial 13: Giving Form to Forms
|
| ||||
| ||||
|
|
Menu controls
A menu is a control that allows the user to select one or more choices from a list, to be included in the data submitted along with the rest of the form. To create a menu, you use the SELECT element, which contains a number of OPTION elements that define the items that the user can choose from.
The SELECT element
- Context:
- Can only be placed inside a FORM element.
- Contents:
- Can contain only OPTION elements.
- Tags:
- Both start-tag and end-tag are required.
Attributes for the SELECT element
- NAME (Name)
- The control name of the menu.
- SIZE (Integer)
- The number of choices visible at one time to the user.
- MULTIPLE (Boolean)
- If present, this attributes denotes that multiple items can be selected from the menu.
- Disabled control attribute
- Identifier and classification attributes
- Language information attributes
- Title attribute
- Inline style information attribute
- Tabbing navigation attribute
- Intrinsic event handler attributes
The OPTION element
- Context:
- Can only be placed inside a SELECT or OPTGROUP element.
- Contents:
- Can contain only text. This text is used as the label for the menu item.
- Tags:
- Start-tag is required. End-tag can be implied by either the start of another OPTION element or the end of the enclosing SELECT or OPTGROUP element.
Attributes for the OPTION element
- VALUE (Name)
- The value used for the control if this option is selected.
- LABEL (Text)
- A label to be used instead of the contents of the element.
- SELECTED (Boolean)
- If present, this attributes denotes that the option is selected by default.
- Disabled control attribute
- Identifier and classification attributes
- Language information attributes
- Title attribute
- Inline style information attribute
- Intrinsic event handler attributes
A simple menu can be constructed with a syntax like the following:
<FORM ACTION="/cgi-bin/html/formdump.cgi" METHOD="GET" ENCTYPE="application/x-www-form-urlencoded"> <P>Please select an operating system: <P><SELECT NAME="platform"> <OPTION VALUE="win32">Windows 95, 98 or NT</OPTION> <OPTION VALUE="mac">Macintosh</OPTION> <OPTION VALUE="linux">Linux</OPTION> </SELECT> <INPUT TYPE="submit"> </FORM>
A menu where the user can select more than one choice can be constructed with a syntax like the following:
<FORM ACTION="/cgi-bin/html/formdump.cgi" METHOD="GET" ENCTYPE="application/x-www-form-urlencoded"> <P>Which products are you interested in? <P><SELECT NAME="product" MULTIPLE> <OPTION VALUE="server" SELECTED>MORONS Server</OPTION> <OPTION VALUE="runtime" SELECTED>MORONS Run-time Application</OPTION> <OPTION VALUE="devkit">MORONS Developer's Kit</OPTION> </SELECT> <INPUT TYPE="submit"> </FORM>
In the case of a menu with only one possible selected item, the control name will be taken from the SELECT element's NAME attribute and the value from the VALUE attribute of the OPTION element that is selected. If there are multiple selections, then multiple name/value pairs are generated, all with the same name, but with different values.
