select element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The select element represents a control that allows users to pick among a number of options. The options in a select list are provided with the option element and can be grouped with the optgroup element.

This element's behavior changes substantially according to the value of the multiple attribute, which decides wether the control will allow users to pick one single option or many. Depending on the value of this attribute, the select control can be compared to radio buttons (when the multiple attribute is absent), that allow users to pick only one option among many, and to checkboxes (when the multiple attribute is present), that allow users to pick as many options as there are available.

A label, also known as placeholder label option (which is an option intended to be shown as a label while no option is selected in the control) may be provided for select controls using the option element. In such cases, this option must be the first in the control, its value attribute must be empty and it musn't belong to any optgroup. The placeholder label option is mandatory when the select element it belongs to is declared with the required attribute and is shown in the drop-down mode.

The information sent to the processing agent by this control is the content of the value attribute in the selected option. If this attribute is absent, the content of the option takes its place.

When the multiple attribute is present, the value in the name attribute must end with opening and closing brackets ("[]"). This will ensure the correct arrival of all selected options in the control.

Examples

In our first example we'll create a form with just one select control, with a definition as basic as possible. This will allow you to see what the control is and how it behaves. Additionally, we'll make use of the option element, in order to fill our list with some items.

<form action="../../form-result.php" target="_blank">
  <p>
    Favorite sport:
    <select name="sport">
      <option>Soccer</option>
      <option>Cricket</option>
      <option>Basketball</option>
      <option>Hockey</option>
      <option>Tennis</option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

Favorite sport:

Note: you may see when submitting the form in the previous example, that the value sent to the processing agent is the content of the option that has been selected. This behavior will change if the author decides to provide the value attribute in the option. In such case, the content of the value attribute will be sent to the server.

In our second example we'll define a default option. This option will appear selected when the page loads for the first time and when the user resets the form. To make an option default, we just need to declare the selected attribute for it.

If the multiple attribute isn't present in the control, only one option in the list can have the attribute selected declared.

<form action="../../form-result.php" target="_blank">
  <p>
    Favorite brand:
    <select name="carbrand">
      <option>Chevrolet</option>
      <option>Ford</option>
      <option selected>Peugeot</option>
      <option>Fiat</option>
    </select>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </p>
</form>

Favorite brand:

In the third example we'll be playing aroud with the size attribute. This attribute changes the looks of the control considerably by setting the number of lines (with options or not) the control will display at the same time.

If the size attribute has the value "1" and the multiple attribute is absent, browsers will usually display a drop-down box. Otherwise, the control will take the form of a scrollable box.

<form action="../../form-result.php" target="_blank">
  <p>Send message:</p>
  <p>
    <select name="sendmessage" size="3">
      <option>Now</option>
      <option>In one hour</option>
      <option>In six hours</option>
      <option>Tomorrow</option>
    </select>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>

Send message:

Now, we'll create a select control to pick multiple options at the same time. To achieve this we'll add the multiple attribute to the element, and opening and closing square brackets ("[]") at the end of the value in the name attribute. This will ensure that all selected options will correctly arrive to the server.

When the multiple attribute is present, most browsers automatically change the display of the control to a scrollable box, independetly of what value the size attribute has.

To select more than one option in a multiple selection list, users can click options while holding down the CTRL key. A range can also be selected using the SHIFT key.

<form action="../../form-result.php" target="_blank">
  <p>Your favorite RPGs:</p>
  <p>
    <select name="favoritergps[]" multiple>
      <option>The Witcher II</option>
      <option>Baldur's Gate II</option>
      <option>The Elder Scrolls III</option>
      <option>Torchlight II</option>
      <option>Fallout New Vegas</option>
      <option>Anachronox</option>
    </select>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>

Your favorite RPGs:

Lastly, we'll use the required attribute to indicate that we need the user to provide the information requested by this control. When this attribute present, and the control is in the drop-down mode, authors must provide a placeholder label option, which is nothing but a first option that when selected, indicates that no real option has been selected in the control. This option must be the first in the control, its value attribute must be empty and it musn't belong to any optgroup.

When the required attribute is present, supporting browsers prevent the submission of the form until one or more options in this control have been properly selected.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" target="_blank">
  <p>
    Select your course:
    <select name="course" required>
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

Select your course:

Attributes

Specific attributes

autocomplete

The autocomplete attribute provides information about if and how browsers should automatically suggest options for this control, as an attempt to guess what the user is typing. There are three possible values for this attribute:

  • The value on value, indicating the browser that it should suggest options automatically but not providing any further information about what kind of data is expected in the control.
  • The value off, indicating the browser that it shouldn't suggest options automatically, either because the control's input data is particularly sensitive (like the user to login in a very secure area) or because it's a value that will never be reused (like a one-time-key in a registration process).
  • An autofill detail tokens list, indicating the browser that it should suggest options automatically and specifying what kind of value is expected.

An autofill detail tokens list can be composed by the following tokens in the specified order.

  1. Optionally, a token beginning with the string "section-" (case-insentsitive), indicating the named group to which the field belongs.
  2. Optionally, one of the two following tokens (case-insentsitive):
    • shipping: the field is part of the shipping address.
    • billing: the field is part of the billing address.
  3. Either of the following two options:
    • The following token (case-insentsitive):
      • name: a full name
      • honorific-prefix: a prefix or title, like Sir, Mr., Dr., etc.
      • given-name: a given or first name.
      • additional-name: aditinal or middle names.
      • family-name: a familiy or last name.
      • honorific-suffix: a suffix, like Jr., II or ABIST.
      • nickname: a nickname or short name used instead of the full name.
      • organization-title: a job title, like Account Manager, Architect, Engineer, etc.
      • username: a user name, typically used for login operations, like "adam457" or "dark_matter_01".
      • new-password: a new password, typically requested when creating an account or changing a password.
      • current-password: the current password, typically requested when logging in or changing a password.
      • organization: the company associated with the person or information in other fields associated with this field.
      • street-address: a street address, possibly composed by multiple lines.
      • address-line1: a street address component.
      • address-line2: a street address component.
      • address-line3: a street address component.
      • address-level4: the most fine-grained administrative level, in addresses with four administrative levels.
      • address-level3: the third administrative level, in addresses with three or more administrative levels.
      • address-level2: the second administrative level, in addresses with two or more administrative levels. In countries with two administrative levels, this would typically be the city, town or village.
      • address-level1: the broadest administrative level. This could be the province or state within which the locality is found.
      • country: a country code representing a country, like "US", "UK" or "ES".
      • country-name: the name of a country, like Albania, Liberia or Uruguay.
      • postal-code: a postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the address-level2 field), etc., like 02139, 1428 or 10025.
      • cc-name: a full name as given on the payment instrument.
      • cc-given-name: a given or first name as given on the payment instrument.
      • cc-additional-name: aditinal or middle names as given on the payment instrument.
      • cc-family-name: a familiy or last name as given on the payment instrument.
      • cc-number: a code identifying the payment instrument, like a credit card number.
      • cc-exp: the expiration date of the payment instrument.
      • cc-month: the expiration month of the payment instrument.
      • cc-year: the expiration year of the payment instrument.
      • cc-csc: the security code for the payment instrument (CSC, CVC, CVV, SPC, CCID, etc.)
      • cc-type: the type of payment instrument used, like credit card.
      • transaction-currency: a currency code representing the currecy to be used in the transaction, like "USD", "ARS" or "GBP".
      • transaction-amount: the amount of the transaction, like when entering a bid or sale price.
      • language: a language tag identifying the preferred language, like "en", "en-GB" or "es-419".
      • bday: a birthday date.
      • bday-day: the day component of a birthday date.
      • bday-month: the month component of a birthday date.
      • bday-year: the year component of a birthday date.
      • sex: a gender identity, like male or female.
      • url: a home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com".
      • photo: a photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field, like "http://www.i-am-bob.com/images/me.jpg".
    • The following, in the given order:
      1. Optionally, a token that is a case-insensitive match for one of the following strings:
        • home: meaning the field is for contacting someone at their residence.
        • work: meaning the field is for contacting someone at their workplace.
        • mobile: meaning the field is for contacting someone at their mobile device.
        • fax: meaning the field describes a fax machine's contact details.
        • pager: meaning the field describes a pager's or beeper's contact details
      2. A token that is a case-insensitive match for one of the following autofill field names:
        • tel: a full telephone number, including country code, like +1 617 253 5702.
        • tel-country-code: the country code component of a telephone number, like +1 or +54.
        • tel-national: a telephone number without the country code, with a country-internal prefix, if applicable, like 617 253 5702.
        • tel-area-code: the area code component of a telephone number, like 617.
        • tel-local: a telephone number without country code and country-internal prefix, like 253 5702.
        • tel-local-prefix: the first part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-local-suffix: the second part of a telephone number without country code and country-internal prefix, when such number is split into two components.
        • tel-extension: the internal extension code of a telephone number.
        • email: an email address, like jhondoe@unknown.com.
        • impp: an URL representing an instant messaging protocol endpoint like, "aim:goim?screenname=jhondoe" or "xmpp:jhondoe@unknown.com".

Browsers usually perform autofilling operations by retrieving data from a database containing previous inputs or other sources of user information.

Example

<p>
  Honorific prefix:
  <select name="honorifixprefix" autocomplete="honorifix-prefix">
    <option>Mr.</option>
    <option>Mrs.</option>
    <option>Ms.</option>
    <option>Sir</option>
    <option>Dr.</option>
  </select>
</p>

Honorific prefix:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p>
  Duration:
  <select name="duration" autofocus>
    <option>1 year</option>
    <option>2 years</option>
    <option>4 years</option>
  </select>
</p>

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Favorite pet:
    <select name="favoritepet" disabled>
      <option>Dog</option>
      <option>Cat</option>
      <option>Bunny</option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

Favorite pet:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<p>
  How would you like to get it:
  <select name="howgetit" form="form1">
    <option>Download now</option>
    <option>Send it to me</option>
    <option>Wait</option>
  </select>
</p>
<form id="form1" action="../../form-result.php" target="_blank">
  <p><input type="submit" value="Submit"></p>
</form>

How would you like to get it:

multiple

A boolean value indicating whether the user should be able to pick more than one option or not. If the attribute takes the value "multiple", or the empty string (""), or by just being present, the user will be allowed to pick more than one option in the control.

When this attribute is set, the value in the name attribute must end with opening and closing brackets ("[]") to ensure the correct arrival of all selected options to the server.

When this attribute is present, most browsers automatically change the display of the control to a scrollable box, independetly of what value the size attribute has.

To select more than one option in a multiple selection list, users can click options while holding down the CTRL key. A range can also be selected using the SHIFT key.

Example

<form action="../../form-result.php" target="_blank">
  <p>Favorite pets:</p>
  <p>
    <select name="favoritepets[]" multiple>
      <option>Dog</option>
      <option>Cat</option>
      <option>Bunny</option>
    </select>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>

Favorite pets:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute in the selected options or the content of the options. These values together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

When the multiple attribute is present, the value in the name attribute must end with opening and closing brackets ("[]") to ensure the correct arrival of all selected options to the server.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Your car for today:
    <select name="carfortoday">
      <option>Mercedes-Benz SLR McLaren</option>
      <option>Lamborghini Egoista</option>
      <option>Lamborghini Aventador</option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

required

A boolean value indicating wether the options in this control can be left all deselected or not. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to select an option in the control in order to be able to submit the form.

When this boolean attribute is present, and the control is in the drop-down mode, authors must provide a placeholder label option, which is nothing but a first option that when selected, indicates that no real option has been selected in the control. This option must be the first in the control, its value attribute must be empty and it musn't belong to any optgroup.

If a control with the required attribute present is left blank, supporting browsers will throw an error upon submission and cancel the process immediately.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" target="_blank">
  <p>
    Activity for tonight:
    <select name="activitytonight" required>
      <option value="">Pick an option</option>
      <option>Movies</option>
      <option>Party</option>
      <option>Stargazing</option>
    </select>
    <input type="submit" value="Submit">
  </p>
</form>

Activity for tonight:

size

An integer to be used as the number of lines (with options or not) this control will display at the same time.

If this attribute has the value "1" and the multiple attribute is absent, browsers usually display a drop-down box. Otherwise, the control takes the form of a scrollable box.

Example

<form action="../../form-result.php" target="_blank">
  <p>Quality:</p>
  <p>
    <select name="quality" size="2">
      <option>Low</option>
      <option>Medium</option>
      <option>High</option>
    </select>
  </p>
  <p><input type="submit" value="Submit"></p>
</form>

Quality:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.