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

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

index123456789101112131415161718192021exercises1

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>

Please select an operating system:

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>

Which products are you interested in?

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.

index123456789101112131415161718192021exercises1

Produced by Stephanos Piperoglou

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

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