| | |
The SELECT and OPTION tags are used to create pulldown menus and multiple-choice scrollboxes for forms, as in this example. As with the INPUT tag, the SELECT and OPTION tags must only be used as child elements of the FORM tag.
To create a pulldown menu, one must first lay a SELECT tag within a FORM.
Example:
<form> <select> </select> </form>
The SELECT tag has one important attribute, NAME, which is just like the NAME attribute of the INPUT tag.
Example:
<form> <select name="colors"> </select> </form>
Once you've laid in the SELECT tag, you must create one OPTION tag for every desired option in the pulldown menu. The text that you want to see in the pulldown menu itself is placed between the opening and closing OPTION tags.
Example (one option):
<form> <select name="colors"> <option>Red</option> </select> </form>
The OPTION tag has one attribute, VALUE, which is just like the VALUE attribute of the INPUT tag.
Example (one option):
<form> <select name="colors"> <option value="red">Red</option> </select> </form>
Example (multiple options):
<form> <select name="colors"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </form>
Displayed:
Example (with context):
<form> <p>Choose your favorite color: <select name="colors"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select></p> </form>
Displayed:
As you can see above, the SELECT tag gets the NAME attribute, while each separate OPTION tag gets its own VALUE attribute; in this way, they are much like a group of radio buttons in a different format.
You may see just how the name-value pairs for the pulldown menu resolve when you click on the submit button in the following example:
<html> <head> <title>Example Pulldown Menu Form</title> </head> <body> <form method="get"> <p>Choose your favorite color: <select name="colors"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select></p> <input type="submit" value="Submit Me, Please" /> </form> </body> </html>
Here is the above example displayed.
As you may have noticed, the FIRST option in the pulldown menu appears as the default choice in the pulldown menu when the HTML page is loaded. You may pre-select any one of the other options in the pulldown menu by adding the SELECTED attribute to the appropriate OPTION tag.
Tag: OPTION
Attribute: SELECTED
Value: none (in strict XHTML, "selected")
Description: whichever OPTION tag contains the SELECTED attribute becomes the default choice in the pulldown menu.
Example (abbreviated):
<option value="blue" selected />
Example (abbreviated; strict XHTML):
<option value="blue" selected="selected" />
Example (in context):
<html> <head> <title>Example Pulldown Menu Form</title> </head> <body> <form method="get"> <p>Choose your favorite color: <select name="colors"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue" selected>Blue</option> </select></p> <input type="submit" value="Submit Me, Please" /> </form> </body> </html>
Here is the above example displayed.
Note: As with all single-word attributes, do NOT use the strict XHTML syntax (selected="selected"
The VALUE attribute of the OPTION tag does NOT have to be the same value as the text appearing in the pulldown menu itself. This is a particularly useful feature when creating pulldown menus which will be used for navigation on a website.
Example:
<html> <head> <title>Example Pulldown Menu Form</title> </head> <body> <form method="get"> <p>Choose your favorite website: <select name="website"> <option value="http://www.yahoo.com/">Yahoo</option> <option value="http://www.shockwave.com/">Shockwave</option> <option value="http://www.michaelmasumoto.com/" selected>Michael Masumoto</option> </select></p> <input type="submit" value="Go" /> </form> </body> </html>
Here is the above example displayed. Notice how this form is HELPLESS without a script to power it? It doesn't matter that I've placed URLs in VALUE attributes of the OPTION tags; I need to process those URLs using some sort of script, probably a JavaScript script, before this form will be able to execute any sort of real action.
Multiple choice scrollboxes are coded identically to pulldown menus, with the addition of two attributes to the SELECT tag: SIZE and MULTIPLE. The SIZE attribute converts the SELECT tag into a scrollbox, while the MULTIPLE attribute allows the user to choose more than one item at a time.
Tag: SELECT
Attribute: SIZE
Value: an integer representing the number of lines tall the scrollbox will be; this integer should always be at least "4" (it may be greater) to insure that the complete scrollbox will be accessible on both Mac and PC platforms (Note: if SIZE is set too small, some users may not be able to operate the scrollbar properly).
Description: the SIZE attribute of the SELECT tag creates a scrollbox of options rather than a pulldown menu.
Example (abbreviated):
<select name="fred" size="4">
Tag: SELECT
Attribute: MULTIPLE
Value: none (in strict XHTML syntax, "multiple")
Description: allows a scrollbox to record multiple choices by the user; this functionality requires that the user hold down the "Command" key (Mac) or the "Control" key (PC) while clicking in order to make non-contiguous multiple choices. Holding down the "shift" key while clicking allows the user to choose a contiguous range of multiple choices.
Example (abbreviated):
<select name="fred" size="4" multiple>
Example (abbreviated; strict XHTML syntax):
<select name="fred" size="4" multiple="multiple">
Example (in context):
<html> <head> <title>Multiple Choice Scrollbox</title> </head> <body> <form method="get"> <p>Choose one or more of your favorite colors:<br /> <select name="colors" size="4" multiple> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="orange">Orange</option> <option value="violet">Violet</option> <option value="aqua">Aqua</option> <option value="yellow">Yellow</option> </select></p> <p>Scrollbox Use Instructions: hold down the "shift" key while clicking to make multiple contiguous choices; hold down the "command" key (Mac) or the "control" key (PC) while clicking to make multiple non-contiguous choices.</p> <input type="submit" value="Submit Me, Please" /> </form> </body> </html>
Here is the above example displayed
Because multiple choice scrollboxes are not in common use, users do not know exactly how to operate them. Therefore, instructions for making multiple selections MUST be included in any form which uses multiple choice scrollboxes.
Just as with the regular pulldown menu, the SELECTED attribute may be added to any OPTION tag which you wish to make pre-selected; unlike the pulldown menu, more than one OPTION tag may be pre-selected.
Example (in context):
<html> <head> <title>Multiple Choice Scrollbox</title> </head> <body> <form method="get"> <p>Choose one or more of your favorite colors:<br /> <select name="colors" size="4" multiple"> <option value="red" selected>Red</option> <option value="green">Green</option> <option value="blue" selected>Blue</option> <option value="orange">Orange</option> <option value="violet" selected>Violet</option> <option value="aqua">Aqua</option> <option value="yellow">Yellow</option> </select></p> <p>Scrollbox Use Instructions: hold down the "shift" key while clicking to make multiple contiguous choices; hold down the "command" key (Mac) or the "control" key (PC) while clicking to make multiple non-contiguous choices.</p> <input type="submit" value="Submit Me, Please" /> </form> </body> </html>
Here is the above example displayed
Personally, I stay away from multiple choice scrollboxes in favor of regular checkboxes (which are easier for users to understand and operate). However, there are times when multiple choice scrollboxes are really the best form element for a job; don't forget to include instructions.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.