Forms — Select Boxes

Topics on This Page

The <select> and <option> Tags
The <select> Tag
The <option> Tag
Example

The <select> and <option> Tags

<select>...</select>
<option>...</option>

Attributes of <select>:

  name="name"

  size="rows"

  multiple               HTML format
  multiple="multiple"    XHTML format

Attributes of <option>:

  value="value"

  selected               HTML format
  selected="selected"    XHTML format

For each select box, you will include one <select> tag. Inside the <select> tag, you will include one <option> tag for each option that you want inside the select box.

Select boxes can be "drop-down" boxes or scrolling boxes. Here are examples of both types:

Item #1 Item #2 Item #3     Item #1 Item #2 Item #3 Item #4 Item #5 Item #6

The <select> Tag

In the <select> tag, always include a name attribute. When the form is submitted, if any options within the select box are selected, the name-value pair for the selected option(s) are sent as part of the form data.

The size attribute determines whether the select box is a drop-down box or a scrollable box. If you omit it or specify size="1", the select box is a drop-down box. Otherwise, specify the number of lines you want displayed. If you have more options than the value you code, the box becomes scrollable so that the user can view all of the choices.

If you include the multiple attribute, the user is allowed to select more than one of the options in the box. Here's an example of a select box that allows multiple options:

Item #1 Item #2 Item #3 Item #4 Item #5

You can select a range of choices by clicking on the first one, then holding down the shift key and clicking on another. Try clicking on Item #1, then hold down the shift key and click on Item #4.

You can also select individual non-consecutive choices by holding down the CTRL key while clicking on the items you want.

Your users probably won't realize that multiple selections can be made, and may not realize how to make multiple selections. If you use multiple, you should provide instructions on how to choose more than one.

The <option> Tag

You will include one option tag for each choice you want to include in the select box. The contents of the option tag is the text to display:

Item #1

    Displays "Item #1" in the select box.

The value attribute specifies the value to be sent if the item it selected when the form is submitted. If you omit value, the displayed text is sent. For example, the value "Item #1" is sent for the above <option> tag.

You can use the selected attribute to indicate that the option should be selected initially. If you don't specify selected for any of the options, the browser may choose one for you (it'll probably be either the first one or the last one). For this reason, it's a good idea to include selected for one of the options. You might want to create a "dummy" item so that you can be sure whether the user has actually selected an item. For example:

<form>
  <select name="s3a">
    <option selected value="">Please choose one ...</option>
    <option value="1">Item #1</option>
    <option value="2">Item #2</option>
    <option value="3">Item #3</option>
    <option value="4">Item #4</option>
  </select>
</form>

Please choose one ... Item #1 Item #2 Item #3 Item #4

Example