It is used to represent a control that provides a menu of options. Each menu option is defined by an
<option> element nested inside the
<option> element should have a
value attribute containing the data value to submit to the server when that option is selected. If no
value attribute is included, the value defaults to the text contained inside the element. You can include a
selected attribute on an
<option> element to make it selected by default when the page first loads.
<select> element has some unique attributes you can use to control it, such as
multiple to specify whether multiple options can be selected, and
size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as
You can further nest
<option> elements inside
<optgroup> elements to create separate groups of options inside the dropdown.
A DOMString providing a hint for a user agent's autocomplete feature.
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example
<fieldset>; if there is no containing element with the
disabled attribute set, then the control is enabled.
<form> element to associate the
<select> with (its form owner). The value of this attribute must be the
id of a
<form> in the same document. (If this attribute is not set, the
<select> is associated with its ancestor
<form> element, if any.)
This attribute lets you associate
<select> elements to
<form>s anywhere in the document, not just inside a
<form>. It can also override an ancestor
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When
multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
This attribute is used to specify the name of the control.
A Boolean attribute indicating that an option with a non-empty string value must be selected.
If the control is presented as a scrolling list box (e.g. when
multiple is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is
According to the HTML5 specification, the default value for size should be
1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla has opted to continue to return
0 for the time being with Firefox.
<select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the
appearance property to remove the default system appearance.
However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The
- Type: inline-block
- Self-closing: No
- Semantic value: No