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
<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
Basic Select List Example
Here's an example of an HTML select list:
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.
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.
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)
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
What would you like for lunch?
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.
What would you like for lunch?
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.