HTML / HTML Tags

HTML <Select> Tag

Oct 12, 2022
2 min read
HTML select Tag

Definition

The <select> tag creates a control that enables you to select from a set of options in the form of a drop-down list.

Example

<label for="song-select">Choose a song:</label>
<select name="song-select" size=1 id="song-select">
    <optgroup label="Oasis">
        <option>Wonderwall</option>
        <option>Don't look back in anger</option>
        <option>Supersonic</option>
    </optgroup>
    <optgroup label="Beetles">
        <option>Here comes the sun</option>
        <option>Hey Jude</option>
        <option>Let it be</option>
    </optgroup>
</select>

Usage

  • Both the opening and closing tags are required.
  • The <select> element may contain zero or more <option> or <optgroup> elements.
  • The id attribute is needed to associate the <select> list with a label.
  • The <option> elements within the <select> element specify the available options in the drop-down list.
  • A name attribute is required. Otherwise, no data from the <select> will be submitted. This will also be used to reference the form data after submission.
  • Make sure to add a <label> to enable assistive technologies, such as screen readers better understand the form.

Attributes

The <select> element supports the Global Attributes, along with the following:

  • autocomplete

    The autocomplete attribute is a hint for the form’s autofill feature.

  • autofocus

    The autofocus attribute is a boolean that determines whether the drop-down list or <select> element should automatically get focus when the page loads.

  • disabled

    The disabled attribute is a boolean that determines whether the <select> element is disabled.

  • form

    The form attribute specifies the form the <select> control belongs to. This allows you to associate <select> elements to <form> elements anywhere in the document, not just to the child elements of the <form>.

  • multiple

    The multiple attribute specifies that more than one value may be entered.

  • name

    The name attribute specifies the name of the <select> element.

  • required

    The required attribute is a boolean that determines whether a value has to be selected before form submission.

  • size

    The size attribute specifies the number of rows in the list that is visible at any one time. The default is 0.

Best Practices

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes