W3docs
en
Log in

HTML <select> Tag

The <select> tag is used to create drop down list of options. The <select> tag contains <option> tag to display the available option of drop-down list.

HTML <select> tag is used to create a drop-down list of options, which appears when the user clicks on a form element, and it allows the user to choose one of the options.

The <option> tag is used to define the possible options to choose from. The tag is put into the <select> tag.

The first option from the list of options is selected by default. To change a predefined option, the selected attribute is used.

The <optgroup> tag is used to group several options into one group. The label of <optgroup> appears as a bold heading.

The list appearance depends on the size attribute, which specifies the number of visible options. The width of the list depends on the length of the text inside <option>. The width can also be regulated with CSS styles.

The <select> tag is difficult to style effectively with CSS. You can affect certain parts of an element. For example, it’s possible to control the displayed font, box model, etc., as well as you can use the appearance property for removing the default system appearance. But these properties do not give a stable result across browsers. The internal structure of the <select> tag is complicated, and it is difficult to control. For getting a full control, you may need a library with better styling form widgets, or a dropdown menu using non-semantic elements.

Tip

If you need to send the data to the server or refer to the list with scripts, the <select> tag should be put inside the <form> tag.

Syntax

The <select> tag comes in pairs. The content is written between the opening (<select>) and closing (</select>) tags.

Example of the HTML <select> tag:

Example of HTML <select> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>
Try it Yourself »
Result

Example of the HTML <select> tag with the <optgroup> tag:

Example of HTML <select> tag with <optgroup> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <select aria-label="Books and Snippets">
      <optgroup label="Books">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>
Try it Yourself »

In this example, the <optgroup> tag is used to collect the options into groups.

Result

Example of the HTML <input> tag with the <datalist> tag:

Example of HTML <input> tag with <datalist> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <p>Airport of departure:</p>
    <form action="action_form.php" method="get">
      <input type="text" list="airports" name="airports" /> 
      <datalist id="airports">
        <option value="Berlin">
        <option value="Los Angeles">
        <option value="Moscow">
        <option value="Paris">
      </datalist>
      <input type="submit" value="confirm" />
    </form>
  </body>
</html>
Try it Yourself »

In this example, the <form> tag is used because we need to send information to the server.

Result

Attributes

AttributeValueDescription
autofocusautofocusDefines that the list should be focused after the page loads.
disableddisabledIndicates that the list is disabled, the user cannot interact with it.
formform_idSupported in all modern browsers.
multiplemultipleIndicates that more than one option can be chosen. The method of choosing more than one option depends on the operating system. In Windows, you need to keep the CTRL button pressed, in Mac the CMD button.
namenameDefines a name for the drop-down menu. It can be used to access the data of the form after it has been sent or to link to a JavaScript element.
requiredrequiredIndicates that a choice of an option is required.
sizenumberIndicates the number of visible options in the drop-down list. If the value of the "size" attribute is bigger than 1 and smaller than the total number of the options in the list, the browser will automatically add a scroll to indicate that there are more options to view.

The <select> tag supports Global attributes and the Event Attributes.

How to style an HTML <select> tag

Practice

Practice

What is the function of the HTML element 'select'?