Yet more on forms! Using the <SELECT> </SELECT>
container tag produces a form element that is more compact than checkboxes or
radio buttons, when you have to choose from a large number of options.
You will need 3 index cards (6 sides) for today's lesson.
INDEX CARDS #23:
THE "SELECT" TAG (23a)
The <SELECT> </SELECT> container is used inside
the <FORM> </FORM> container. There are
two basic effects that can be achieved:
PULL-DOWN MENU: When you click on the down-arrow, a list appears.
Only one item may be selected at a time.
SCROLLABLE MENU: These can be set up so that exactly
one or any number of items may be selected.
SELECTING MULTIPLE ITEMS (23b)
Some users may need to be educated on how to select multiple items
in a scrollable menu.
How do I select a contiguous group of items? "Contiguous"
means sharing a common boundary; or immediately preceding
or following. For example, in the list of states above, Alabama,
Alaska, Arizona, and Arkansas form a contiguous group. To select such
a group, use the
"shift" key, as follows: select the
first desired item, then shift-select the last desired item. All the
items in between (together with the first and last) will be selected. (Try it!)
How do I select items that are not contiguous? Use the
"control" key, as follows: select the first desired item; then control-select
the next desired item; then control-select the next desired item; etc.
(Many people just select the first item, then hold the control key down, and click, click, click on each additional desired item.)
Can I use the "shift" and "control" keys together? Yes! Select
your first item. Then press "control" and keep it held down. When you
want a range, press "shift" (while you're still holding down "control").
Takes a bit of finger coordination!
PULL-DOWN MENUS (23c)
Here's the basic structure for a pull-down menu:
<SELECT NAME="group_name">
<OPTION>first_list_item <OPTION>second_list_item, etc.
</SELECT> Here's some sample code:
<FORM>Choose your favorite color from the list:
<SELECT NAME="color">
<OPTION> red
<OPTION> green
<OPTION> blue
</SELECT></FORM>
This sample code produces:
INFO ON PULL-DOWN MENU ITEMS (23d)
The NAME attribute is required; the NAME and
selected OPTION are passed to the form-processing program.
By default, the first option listed is displayed. If you prefer
a different option to be displayed initially, then you must "select" it, like this:
<OPTION SELECTED>
For example, the code
<FORM>Choose your favorite color from the list:
<SELECT NAME="color">
<OPTION> red
<OPTION SELECTED> green
<OPTION> blue
</SELECT></FORM>
produces:
SCROLLABLE MENUS (23e)
<!-- The basic structure of a scrollable menu is: -->
<SELECT NAME="group_name" MULTIPLE
SIZE="number_of_visible_lines">
<OPTION>first_list_item
<OPTION>second_list_item, etc.
</SELECT>
<!-- Some sample code: -->
<FORM>Choose the colors you like from the list:
<SELECT NAME="color" MULTIPLE SIZE="3">
<OPTION> red <OPTION> green <OPTION> blue
<OPTION> purple <OPTION> yellow <OPTION> orange
</SELECT></FORM>
<!-- This sample code produces: -->
INFO ON SCROLLING MENU ITEMS (23f)
The NAME attribute is required; the NAME and
selected OPTION(s) are passed to the form-processing program.
The MULTIPLE attribute is what makes it possible for
users to select more than one option from the list.
The SIZE attribute is optional; it specifies the number of lines you'd
like to be visible in the scrollable list.
Any number of options can be pre-selected, by using <OPTION SELECTED> <!-- For example, this sample code: -->
<FORM>Choose the colors you like from the list:
<SELECT NAME="color" SIZE="3" MULTIPLE>
<OPTION SELECTED>red <OPTION>green <OPTION SELECTED>blue
<OPTION>purple <OPTION>yellow <OPTION>orange
</SELECT></FORM>
<!-- produces this result: -->
(W23.1) Please continue the online tutorial located at:
http://www.cwru.edu/help/interHTML/toc.html (link is no longer valid)
Read Chapter 7 (Forms: SELECT) and do the exercises at the end
of Chapter 7.
ASSIGNMENT #23:
(A23.1) Please read pages 240–241 in the Weasel Book.
(A23.2) Experiment with the pull-down and scrollable menus on (23a).
Are you
able to select more than one item on the pull-down menu?
Try selecting a range of items in the scrollable menu: click
on Alabama, then shift-click on Arkansas.
Try selecting multiple items that are not necessarily next to
each other
in the list: select Alabama, then control-click on Arizona; then
control-click on California.
Practice using "control" and "shift" together: Select
Alabama; then Arizona through California; then Connecticut.
