HTML Forms: SELECT Tag
This tag allows the user to choose from a fixed set of values;
one or several at once.
The <SELECT> tag has OPTIONs in between the
initiating <SELECT> tag and the
terminating </SELECT> tag.
The OPTION tag may have these attributes:
VALUE
Specifies the value of the option to be sent to the server.
If not defined, the label next to the option is sent as the value.
SELECTED
By default, the first OPTION is displayed in the menu.
This tag sets the default OPTION to be displayed in the
menu, in case it isn't the first OPTION.
<FORM Action="Menu.cgi">
<SELECT NAME="Button" SIZE=3>
<OPTION> Authoring
<OPTION> Internet
<OPTION> Location
<OPTION> Multimedia
<OPTION> Reference
<OPTION> Software
<OPTION> WDVL
</SELECT>
</FORM>
This presents a window with 3 items displayable at once.
If there are more than 3 then the window has a scrollbar.
If you want a drop-down menu, just set the SIZE to 1 or omit it.
Only one item may be selected by the user.
Here is the CGI code.
You'll also need
cgi-lib.pl.
This very simple and elegant example depends on the fact that the
directory names at The WDVL are meaningful words. If you want something
more sophisticated, e.g. say the menu labels are not exactly the same
as the directory names, or comprise longer phrases, simply modify the
CGI program to use a hash table to look up the URL from the supplied
OPTION value (left as an exercise for the reader!).
The following menu uses
JavaScript.
It causes the browser to fetch the required page immediately, without a
round-trip to the server and the CGI program which simply sends back a
redirect. However it may not work on all browsers, as the CGI version
does.
Notes
- Be careful that the open pull-down doesn't exceed the screen size;
if you're on a large workstation screen remember the PC user with a
small screen.
- If you have more than 3 or 4 options to choose from,
and the user may only select ONE, then this input element is the best.
People are often tempted to use multiple
RADIO buttons.
- The decoding script on the server will probably appreciate having
a single-word
VALUE value instead of multiple-words.
- Use the MULTIPLE keyword to allow the
user to select several items at once.
|
