Pull-down menus are easy to
create with the <SELECT>
tag. By changing the values of a few attributes, you can transform
your menus into scrolling lists, using this bit of HTML
<SELECT>
<OPTION>Introduction
<OPTION>Company Policies
<OPTION>Product Information
<OPTION>Shop Now !
</SELECT>
Creates a
simple pull-down menu, like this:
When the user selects an option, that option's
value is associated with the name finalhost
and transmitted to the server for processing as part of the form.
If you don't want a pull-down menu, but would
rather have a scrolling list of choices, change the size of the <SELECT>
tag to something other than the default value of one:
<SELECT NAME="finalhost" SIZE="3">
<OPTION VALUE="introduction">Introduction
<OPTION VALUE="policies">Company Policies
<OPTION VALUE="productinfo">Product Information
<OPTION VALUE="shop">Shop Now !
</SELECT>
With this one
change, you get a three line scrolling list:
Changing the size
of our example to six, results in this kind of list:
With both Netscape and Internet Explorer, you
should get a list larger than the items in it. Netscape includes a
disabled scrollbar on the side; Internet Explorer removes it
entirely.
While the size must be two or larger to get the
scrolling list appearance, making it larger than the options is
not necessarily a bad thing. If you want the list to occupy a
certain portion of your page regardless of the number of options,
set the size accordingly and vary the number of options as needed.
Allowing
multiple choices
In addition to being able to display multiple
items, the scrolling list can also allow the user to select
multiple items. This is different from a pull-down menu, where
only one item is ever selected in the menu.
To enable this behavior, add the MULTIPLE
attribute to the <SELECT>
tag. Having done this, the user can now select several items in
the list at once:
The manner in which multiple items are selected is
platform dependent. In a Windows environment, for example,
multiple items are selected or deselected by holding done the
Control key while clicking with the mouse, while Mac users can use
the Command key.
Once you specify MULTIPLE,
the <SELECT>
tag is always displayed as a scrolling list, even if the size is
unspecified or set to one. Here is our example with SIZE=1
MULTIPLE specified:
Not the most attractive element in a form, but it
may suit your purposes on some occasion.
Pull-down
menus or scrolling lists?
Menus and lists are interesting form elements in
that they provide nearly identical selection capabilities with
dramatically different interaction methods. How do you know which
one is best? In general,
-
Use pull-down menus when space is at a
premium.
-
Use scrolling lists when multiple selections
are possible.
-
Use pull-down menus when showing the current
selection is important.
-
Use scrolling lists when seeing all the
choices at once is important.
Experiment with these lists.
*HTML 4.0 features
make pull-down menus even nicer.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index 2:
Creating Forms - Everything About Forms