introduction to web programming The Select Widget The Select Widget works a lot like the radio button and check box widgets in that it allows a user to choose one item from a group. However, the look and feel of a SELECT widget is quite a bit different, as is the code that manages it.

The Select Widget creates a pop-up list as shown below:

The previous select widget was created using the code shown below:

    <FORM>
    <SELECT NAME = "fruit">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    </SELECT>
    </FORM>

Notice that the <SELECT> tag takes a NAME attribute and includes several OPTIONS that define the VALUES to be applied to that NAME.

Note that the VALUE attribute of the <OPTION> tag is optional. If you do not include it, the value will be taken from the text that follows the tag.

Thus, if you selected "Oranges" from the select box shown above, the web browser would add the following to the url encoded string it prepares for the server

    fruit=Oranges

The <SELECT> tag also has several attributes that affect how it works. The table below outlines those attributes.

Attribute Description
NAME Specifies what name the browser should use for the name/value pair sent in the HTTP body
SIZE Specifies the number of choices that should be visible to the user
SELECTED Specifies the choice that is selected by default
MULTIPLE Specifies that the user should be able to select multiple items in the list
VALUE Specifies the valueof a choice

Let's take a closer look at each of these attributes. The SIZE Attribute The SIZE attribute specifies how many choices in a select box should be made visible to the user at one time. This is best seen by example, so let's look at one in which SIZE is set to three (notice that there are four items so the select widget will dynamically create a scroll bar).

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "3">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>
The SELECTED Attribute The SELECTED attribute specifies which choice will be selected by default. This is best shown by example, so consider the following example in which we select "Pears" by default.

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "3">
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears" SELECTED>Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>
The MULTIPLE Attribute The MULTIPLE attribute specifies that the user should be able to select multiple choices at one time. Typically, they will use the CONTROL key and a mouse click to select or deselect choices individually or the SHIFT key plus a mouse click to select groups of choices at once. This is best seen by example, so try out the following select widget:

That select widget was created using the following code:

    <FORM>
    <SELECT NAME = "fruit" SIZE = "4" MULTIPLE>
    <OPTION VALUE = "Apples">Apples
    <OPTION VALUE = "Oranges">Oranges
    <OPTION VALUE = "Pears">Pears
    <OPTION VALUE = "Banana">Banana
    </SELECT>
    </FORM>

Previous | Next | Table of Contents