HTML Form Tutorial, Part II

By Will Bontrager
2005-03-22


The <select> Tag
The <select> tag is used to construct drop-down list boxes (sometimes called drop-down menus) and scrolling list boxes (sometimes called scrolling menus).

The <select> tag may contain a "size" attribute (which determines whether you get a drop-down or a scrolling list). It may also contain a MULTIPLE attribute (applicable only to scrolling lists). Both of these are optional.

If the size attribute is used, it's value determines how many lines are visible in the scrolling list box. If the size attribute is not used, you will have a drop-down list instead. Here is an example of a size attribute:

size="4"

If the MULTIPLE attribute is used, then the user can select multiple items in the scrolling list box. If it is not used, only one item can be selected.

The <select></select> tags contain a list of items. Each item on that list is specified with the <option></option> tags. (Examples of a drop-down list box and a scrolling list box are in the "The <option> Tag" section, below.)

The <option> Tag

Each <option></option> tag set contains one item for a drop-down list box or a scrolling list box.

The <option> tag may contain the SELECTED attribute to pre-select that item.

The "value" attribute may be optional. Most CGI programs require a value to work with the information to be processed. Some JavaScript functions do not.

Here are examples of a drop-down list box and a scrolling list box:

<form method="POST" action="/cgi-bin/handler.cgi">
<select name="myselect">
<option value="1">First</option>
<option value="2" SELECTED>Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
</select>
<input type="submit">
</form>


<form method="POST" action="/cgi-bin/handler.cgi">
<select name="myselect" size="4" MULTIPLE>
<option value="1">First</option>
<option value="2" SELECTED>Second</option>
<option value="3">Third</option>
<option value="4" SELECTED>Fourth</option>
<option value="5">Fifth</option>
</select>
<input type="submit">
</form>

Tutorial Pages:
» The <textarea> Tag
» The <select> Tag
» A Complete Example


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables