HTML <select> Tag

The HTML <select> tag represents a control for selecting amongst a set of options.

The <select> tag is used with the <option> tag to produce a list of options that the user can choose from. The <optgroup> element can also be used for grouping those <option> items.

Syntax

The <select> tag is written as <select></select> with any number of <option> tags nested between the start and end tags.

The name attribute is often included so that any script that processes the form control can reference the selected value.

Like this:

Copy to Clipboard
<select name="myName">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
</select>

Examples

Basic tag usage

CodeResult

The <optgroup> Element

The <optgroup> element allows you to group the <option> elements within your <select> list. This can be useful when there are many list items and they can be sorted into logical groups.

Like this:

CodeResult

The multiple Attribute

The multiple attribute allows the user to select more than one option at a time. Browsers typically present multiple select lists in a different way to a normal select list.

Like this:

CodeResult

The size Attribute

If you have many options, you might want to display more options to the user (without them having to scroll or interact with the control first).

You can use the size attribute to specify the number of options to show the user.

Like this:

CodeResult

Differences Between HTML 4 & HTML 5

HTML5 introduced the following attributes:

To see more detail on the two versions see HTML5 <select> Tag and HTML4 <select> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <select> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <select> Tag and HTML4 <select> Tag.

Copy to Clipboard
<select  
 autofocus=""
 disabled=""
 form=""
 multiple=""
 name=""
 required=""
 size=""
 
 accesskey=""
 class=""
 contenteditable=""
 contextmenu=""
 dir=""
 draggable=""
 dropzone=""
 hidden=""
 id=""
 itemid=""
 itemprop=""
 itemref=""
 itemscope=""
 itemtype=""
 lang=""
 spellcheck=""
 style=""
 tabindex=""
 title=""
 translate=""

 onabort=""
 onautocomplete=""
 onautocompleteerror=""
 onblur=""
 oncancel=""
 oncanplay=""
 oncanplaythrough=""
 onchange=""
 onclick=""
 onclose=""
 oncontextmenu=""
 oncuechange=""
 ondblclick=""
 ondrag=""
 ondragend=""
 ondragenter=""
 ondragexit=""
 ondragleave=""
 ondragover=""
 ondragstart=""
 ondrop=""
 ondurationchange=""
 onemptied=""
 onended=""
 onerror=""
 onfocus=""
 oninput=""
 oninvalid=""
 onkeydown=""
 onkeypress=""
 onkeyup=""
 onload=""
 onloadeddata=""
 onloadedmetadata=""
 onloadstart=""
 onmousedown=""
 onmouseenter=""
 onmouseleave=""
 onmousemove=""
 onmouseout=""
 onmouseover=""
 onmouseup=""
 onmousewheel=""
 onpause=""
 onplay=""
 onplaying=""
 onprogress=""
 onratechange=""
 onreset=""
 onresize=""
 onscroll=""
 onseeked=""
 onseeking=""
 onselect=""
 onshow=""
 onsort=""
 onstalled=""
 onsubmit=""
 onsuspend=""
 ontimeupdate=""
 ontoggle=""
 onvolumechange=""
 onwaiting=""
	>
</select>

Tag Details

For more details about the <select> tag, see HTML5 <select> Tag and HTML4 <select> Tag.

Specifications

Here are the official specifications for the <select> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Enjoy this page?