Welcome to ITM Web100 Training Program

The Select Widget

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>