HTML Form Select List

The text and textarea HTML inputs are great when we want to give the user complete freedom over what they can type. But what if we want to limit their choices to ones that we specify? There are a few different choices to help us do this; let's look first at the HTML select list.

We can use a select list to give our user the choice of a number of options from which to choose. To start a select list we use the HTML <select> tag. Within this list we then use the <option> tag to specify our options. For each option we use a new <option> tag, write our option, and then use the </option> closing HTML tag to mark the end of the option. Within each option tag we can assign a value attribute. This value can be either text or numbers or a combination of both, and it will be passed over to the processing page when the submit button is pressed. Here's a typical select list:

<select name="rating">
<option value="verygood">Very Good</option>
<option value="good">Good</option>
<option value="average">Average</option>
<option value="poor">Poor</option>
</select>

This code will display a drop-down list containing the options we specified:

Changing the way select lists are displayed

By default a select list will show up as a drop-down menu. However, this is not the only form it can take. If we use the size attribute we can make the list display as an input box containing the select options, and we can choose one by clicking on it.

<select size="4">

This is a useful way of displaying our options without the need for a drop-down list.

Note that the size attribute is specified as the number of options visible. If this number is smaller than the number of options available then scroll arrows will show up next to the box to allow us to move up and down.

Selecting more than one option

By default select lists will only allow us to choose one option from the list. We can change this by using the multiple attribute. When we use this attribute the list automatically changes from a drop-down list to a flat list with all the options displayed; this is because it is impossible to choose more than one option from a drop-down list.

<select multiple="multiple">

When we use multiple, the user can select more than one option by holding down the Ctrl key and clicking as many options as they like.

Drop-down lists are useful in many circumstances. One common use is when shopping online to give the user a choice of credit cards when paying. Another is to force the user to choose from a list of words to prevent them making a spelling mistake which might cause an error somewhere else.