HTML <select> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <select> element is used to create a drop-down list in an HTML form, allowing users to select one or more options from a predefined set. It serves as a container for multiple <option> elements, each representing an individual choice within the list. Drop-down lists are a fundamental way to present users with a limited set of choices, improving form usability and ensuring valid input.

When rendered by a browser, the <select> element appears as a rectangular box displaying the currently selected option. Clicking or tapping the box typically opens a list of all available options. Users can then select one option (or multiple options if configured) by clicking on it.

A <select> element can support either single selection or multiple selections:

Single selection: The user can select only one option at a time. This is the default behavior.
Multiple selection: When configured to allow multiple selections, users can choose more than one option from the list, often using keyboard modifiers like Ctrl (Windows) or Cmd (Mac) to select multiple items.

The <select> element can also include <optgroup> elements to organize options into logical groups, improving readability and navigation in long lists. Each <option> can have a label that is displayed to the user and a value that is submitted with the form when the user makes a selection.

Interaction with <select> elements is highly standardized across browsers and devices, making them reliable for collecting structured input such as country selection, gender, or product categories. They also integrate seamlessly with form submission, JavaScript event handling, and accessibility features like screen readers.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: One or more of <optgroup> and/or <option>
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<select>

  <option value ="new york">New York</option>

  <option value ="london">London</option>

  <option value ="sydney" selected>Sydney</option>

  <option value ="auckland">Auckland</option>

</select>

Result

Editor

Attributes

autofocus: Specifies that the drop-down list should automatically get focus when the page loads.
disabled: Disables the input control. The button won’t accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
form: Defines one or more forms the select field belongs to.
multiple: Specifies that multiple selections can be made.
name: Assigns a name to the select list.
required: Specifies that the user is required to select a value before submitting the form.
size: Specifies the number of rows to be visible at the same time.

Global Attributes

The <select> tag also supports the Global Attributes in HTML5

Event Attributes

The <select> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <select> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.