The address for this web page is:   http://fishcaro.crosswinds.net/day_23_select.htm
On to the next lesson!
Back to the COURSE SYLLABUS

23. USING THE "SELECT" TAG

(If you have Netscape Navigator or Internet Explorer version 4 or higher, you should see a CLOCK in the upper left-hand corner of this page! Yet another illustration of what you can do with JavaScript...)

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.
    Where were you born?
  • SCROLLABLE MENU: These can be set up so that exactly one or any number of items may be selected.
    What states have you visited?

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:
Choose your favorite color from the list:

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:
    Choose your favorite color from the list:


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: -->
Choose the colors you like from the list:

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: -->
    Choose the colors you like from the list:

Printable version of Index Card 23a

Printable version of Index Card 23b

Printable version of Index Card 23c

Printable version of Index Card 23d

Printable version of Index Card 23e

Printable version of Index Card 23f

WORKSHEET #23:

ASSIGNMENT #23:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved