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:
  Apples Oranges Pears

  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.

• 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).
  Apples Oranges Pears Banana

• 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.
  Apples Oranges Pears Banana

• 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:
  Apples Oranges Pears Banana

• 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>
  

Non Input-based GUI Widgets
Table of Contents
The Text Area Widget