HTML Select Lists

This page contains HTML code for creating a select list. You can copy/paste this code into your own blog or website in order to create your own select list.

A select list is a form element that allows the user to select one or more options from a range of options.

Select lists are created using a combination of the HTML <select> and <option> tags. Select lists can be nested inside a <form> element or they can stand alone. They can also be associated with a form via the form attribute of the <select> tag.

Basic Select List Example

Here's an example of an HTML select list:

Working Example

Here, we add a submit button so that the user's selection can be submitted and processed. We also place the select list within a <form> element that specifies a page to process the form.

Multiple Options

A select list can allow multiple options to be displayed at the one time. It can also allow multiple options to be selected by the user.

Multiple Selections

The user can select more than one option on these types of lists. For example, on a Mac, they could hold the command key down, while clicking on their multiple selections. On a PC, they could hold the Ctrl key down while making their selection. Users could also hold the Shift key down (but this won't work on non-contiguous files). You could select all files by clicking in the select area and doing a "select all" (command | A on a Mac, Ctrl | A on a PC)

The form Attribute

In the above example, we enclosed the select list inside a form. HTML5 also allows you to specify a form using the form attribute. This method could be used in the event that the select list is not inside the form that needs to submit its contents.

In the next example, add id="myForm" to the form. We then add form="myForm" to the select list and move the select list outside of the form. Submitting the form should still submit the contents of the select list, because the select list references the id of the form in its form attribute.

Set a Default Value

You can set a default value by using the selected attribute against an option. When this is added to a <option> tag, that option is selected as soon as the page loads (i.e. it doesn't need the user to select it). The user can then choose to "deselect" that option if so desired, but if they don't it will remain selected.

In this example, we've checked the first option.

Disabling an Option

You can disable an option by using the disabled attribute. You could use this in conjunction with a script to enable/disable the option depending on whether certain criteria has been met.

In this example, we've disabled the third option (Lychee).

Select Lists vs Radio Buttons & Checkboxes

Select lists provide similar functionality to radio buttons in that they allow the user to select one option from a list of options. Multi-select lists are more like checkboxes, in that they allow the user to select any number of options.

Given that select lists provide similar functionality to radio buttons and checkboxes, this raises the question:

When should you use a select list instead of radio buttons or checkboxes?

Here are some considerations.

• Select lists are great when the list is very long, and the user already knows which option they will choose. This means they don't necessarily need to see all the alternative options. An good example of this is a list of countries when selecting your address. If a user lives in Australia, they already know what they're going to select. Therefore, they simply scan the list for Australia, while ignoring all the other options. Their brain doesn't need to process all other options trying to decide which is the best option. They already know.
• Radio buttons are ideal for when the user needs to see all the options before making a decision on which one to select. With radio buttons, the user doesn't need to click on anything before they can see all the options. This is good usability — the user can scan all options without having to interact with the website first.
• Both checkboxes and multiple-selection select lists can be used to enable the user to select more than one option. Checkboxes are usually easier from a usability perspective (most—if not all—users will know how to select multiple checkboxes, but not as many users will know how to select multiple options from a select list). However, there may be times that a select list is more preferable to checkboxes — perhaps from a visual design perspective or some other reason.

Hopefully these factors will help you decide which option to use when designing your forms.