Search this site...

Creating a selection list

With a selection list, from a user you can select none, one or more choices. A selection list comes in handy when you have many choices to display within a limited space. A selection list also is a convenient way to get fixed set of possible choices to prevent any invalid input or spelling mistakes.

A selection list starts with the <select> tag and ends with the corresponding closing tag: </select>. Each option or choice for your selection list is listed with the <option> tag. The <option> tag also is a two-sided tag, meaning you should close this tag with </option>. For instance, to create the following selection list,

Select your favorite web site:

you can use the following code:

Select your favorite web site:
<select>
<option>http://www.scriptingmaster.com</option>
<option>http://www.google.com</option>
<option>http://www.msn.com</option>
</select>

In a selection list, the name attribute is added to the <seletion> tag and the value attribute is added to each of the <option> tag. By adding the name attribute to the selection list, you use that name to find out what the user selected when the form is submitted. When a user submits a choice for a selection list, the value you asssigned, if any, to the <option> tag is submitted to the sevrer. Consider the following HTML code:

Select your favorite web site:
<select name="FavWebSite">
<option value="SM">http://www.scriptingmaster.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
</select>

The output of this code is same as you saw above but by adding the name and value attributes we will be able to determine what the user selected. If the user selects the second choice, the value "Google" will be submitted to the server, for instance.

Sometimes, you want the user to select more than one items from a selection list. To allow the user to select multiple choices for a selection list, you can add the multiple attribute to the <select> tag. For instance,

<select multiple>
.....
</select>

would allow the user to select more than one option. By the way, the most common way of selecting more than one option from a selection list is to click on the first item in the range of items you want to select and then hold down the shift key and then click on the last item in the range of items you want to select. That will make a contiguous selection. If however, you want to make a noncontiguous selection, hold down the Ctrl key and then click each item you want to select from a selection list.

If your selection list is long, you may add the size attribute to set to a number greater than 1 to display more than one option from the selection list. For instance,

Select your favorite web site:
<select name="FavWebSite" size="2">
<option value="SM">http://www.scriptingmaster.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>

will display two options becasue the size attribute is set to 2:

Select your favorite web site:

Notice above two choices are shown. The vertical scroll bar can be used to display other choices. The vertical scroll bar is added automatically to a selection list. If, however, you set the size attribute equal to the number of options in a selection list, the scroll bar is either dimmed or not displayed. Consider the following, as an example:

Select your favorite web site:<br>
<select name="FavWebSite" size="5">
<option value="SM">http://www.scriptingmaster.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>
Select your favorite web site:

Setting a default option for a selection list

By default, the first option in a selection list is selected; however this can be changed. To make an option selected (highlighted) in a selection list when the form is loaded to a browser, add the selected attribute to the <option> tag. For instance,

Select your favorite web site:<br>
<select name="FavWebSite" size="2">
<option value="SM">http://www.scriptingmaster.com</option>
<option value="Google" selected>http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>

will make the http://www.google.com option selected by default:

Select your favorite web site: