Select Field - in Form Menus
On this page each form is illustrated with code used to produce the form, followed by
resulting form.
Unlike INPUT fields, SELECT fields have both
beginning and ending tags. Only OPTION tags are allowed between <SELECT>
and </SELECT>. Each OPTION tag, corresponds to another menu
selection. In the following form, there are three choices, so three <option>
tags.
<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp"
METHOD="POST">
<SELECT NAME="My Menu">
<OPTION >Choose One</OPTION>
<OPTION >Larry</OPTION>
<OPTION>Moe</OPTION>
<OPTION>Curly</OPTION>
</SELECT>
<INPUT TYPE = "submit" value="Send">
</FORM> |
Data that is returned by this form will have the select menu name followed
by the text following the Option selected. If you include a VALUE
attribute with each option, the value will be returned instead of the text.
i.e. <OPTION VALUE="first"> Larry
will return: My Menu=first If Larry is
selected. In other words, it is not necessary to include the VALUE attribute with
the <OPTION> tag.
Default menu choices can be assigned with the SELECTED attribute assigned to the default menu
option as illustrated in the form below.
<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp"
METHOD="POST">
<font color="red"><b>Select your favorite
Stooge:</b></font>
<SELECT NAME="My Menu">
<OPTION >Larry</OPTION>
<OPTION>Moe</OPTION>
<OPTION SELECTED>Curly</OPTION>
</SELECT>
<INPUT TYPE = "submit" value="Send">
</FORM> |
Select your favorite Stooge:
SELECT's have one special attribute called MULTIPLE
. This attribute allows the user to select more than one element of the menu. The user
usually has to hold the shift key down to select a second option.
<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp"
METHOD="POST">
<SELECT NAME="My Menu" MULTIPLE>
<OPTION >Choose One or More</OPTION>
<OPTION >Larry</OPTION>
<OPTION>Moe</OPTION>
<OPTION>Curly</OPTION>
</SELECT>
<INPUT TYPE = "submit" value="Send Choice">
</FORM> |
SIZE Attribute with Select tag, allows you to
display more than one option in your menu at one time,
as illustrated below.
<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp"
METHOD="POST">
<SELECT NAME="My Menu" SIZE="3">
<OPTION>Freshman.
<OPTION>Sophomore
<OPTION>Junior
<OPTION>Senior
<OPTION>Graduate
<OPTION>NCFD
</SELECT>
<INPUT TYPE = "submit" value="Submit Rank">
</FORM> |
Note, if the size is larger than the list, empty rows presented at the
bottom of the list.
<FORM
ACTION="http://webdevfoundations.net/scripts/formdemo.asp"
METHOD="POST">
<SELECT NAME="My Menu" SIZE="4">
<OPTION >Larry
<OPTION SELECTED>Moe
<OPTION >Curly
</SELECT>
<INPUT TYPE = "submit" value="Send">
</FORM> |
Last updated on
02/04/2009 by L.M. Hicks |