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.

Table of contents

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

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.