Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s province, state or country.

Considering Alternatives

It's important to consider all the possibilities when making a form. We could simply present a textbox in which the user could type the province name, but that allows the possibility that they could make a typing mistake (which becomes an issue if this information is entered directly into a database, without human oversight). We could reduce the size of the textbox to to allow just two characters, and prompt the user just to type in the province or state abbreviation: while that reduces the possibility of error, it does not remove it.

One of the best solutions to use for a question in a form for which there is only one right answer from a large number of possibilities is a drop-down menu.

Drop-down Markup

In an HTML form, this is created through the use of the <select> tag.

As always, we place our <label> in first, with a for attribute and an appropriate accesskey. Just like the <input> tag, <select> should have an id and name attribute. Each item inside the drop-down menu is then delimited by <option> tags.

<label for="province" accesskey="p">Province / Territory</label>
<select name="province" id="province">
	<option>Alberta
	<option>British Columbia
</select>

The form itself is not aware of any text between the opening and closing option tags. While the first option can be selected by our user, no actual data will be sent to the formhandler.php script which interprets the data in the form. We probably don’t want the word “Alberta” in any case; “AB” would be preferable for adding to a mailing list or database. To do this, we must add value attributes to each of these options:

<select name="province">
	<option value="AB">Alberta
	<option value="BC">British Columbia
</select>

(Note that the value attribute can also be used to pre-set the text for an <input> textbox).

Finally, the first option in our drop-drown menu will be auto-selected by default. This is not always a good thing. First, keep in mind our assumptions about our user. If we have pre-selected something, it is likely that he will skip over it to save time or simply miss it. It is better to prompt the user to make a selection and make that prompt selected by default, unless you can be absolutely certain that the vast majority of the respondents to your form will meet a pre-selected criteria.

<select name="province">
	<option value="none" selected="selected"> -- choose one --
	<option value="AB">Alberta
	<option value="BC">British Columbia
</select>

You will find textbooks and online help that provide code to make multiple options in the drop-down list selectable, or which turns the select drop-down into a scrolling interface. Generally speaking, these practices are strongly inadvisable. People become confused when presented with them, leading to data entry errors.

The optgroup element should be used to indicate groups of related options in a drop-down; the optgroup itself is not selectable. Rather confusingly, the optgroup has a required attribute, label, that is used to indicate the group reference.

For example, to show states in the US and provinces/territories in Canada in the same drop-down, we could do the following.

<label for="state" accesskey="s">State / Province / Territory</label>
<select name="state" id=state">
	<option value="">-- choose one --
	<optgroup label="USA">
		<option value="AL">Alabama
		<option value="CA">California
		<option> … remaining US states … 
	</optgroup>
	<optgroup label="Canada">
		<option value="AB">Alberta
		<option value="CA">British Columbia
		<option> … remaining provinces and territories … 
	</optgroup>
</select>

In the browser, the result would look something like this:

For a select menu this long and complicated, it is usually a good idea to use JavaScript to dynamically alter the content of the select based on user choices earlier in the form. For example, having the user choose their country first should reduce the number of visible options in the “state” drop-down to show only the relevant territories in their particular nation. This makes for a more intelligent and intuitive form, and a better user experience.

Naturally, a <select> menu is not only used for geographical location; there are many instances in which it can be used to capture single answers from multiple possibilities: sizes when shopping for T-shirts, for example.

Photograph by Marcin Wichary, used under a Creative Commons Generic 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.