X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML <select> Tag

HTML <select> tag is used to create drop down list of options, which appears when clicking on form element and 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 <select> tag.

The first option from the options’ list is selected by default. To change predefined option selectedattribute is used.

The <optgroup> tag is used to group several options into one group.The content of <optgroup> looks like heading in bold.

The look of the list depends onsize attribute, which defines the height of the list.The width of the list depends on the length of the text inside <option> tag.The width can be regulated with CSS styles as well.

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

Syntax

The content is written between opening (<select>) and closing (</select>) tags. Closing tag is mandatory.

Example

<!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>

Result


Example

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <select aria-label="Books nad 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>

In this example we have used <optgroup> tag to collect the options into groups.

Result



Example

<!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>

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

Result

Airport of departure:


Attributes

Attribute Value Description
autofocus autofocus Defines that the list should be focused after the page loads.
disabled disabled Indicates that the list is disabled, the user cannot interact with it.
form form_id Defines the form which the element is connected with.
Is not supported in Firefox.
multiple: multiple: Indicates that more than one options can be chosen. The method of choosing more than one option depends on the operating system. In Windows, you need to keep CTRL button pressed, in Mac CMD button.
name name Defines 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 JavaScript element.
required required Indicated that the the choice of an option is required.
size number Indicated the count of the options in drop down list. If the value of 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 <select> tag

Common properties to alter the visual weight/emphasis/size of text in <select> tag:?

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick. CSS text-transform Property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style

Coloring text in <select> tag:

  • CSS color property describes the color of the text content and text decorations
  • CSS background-color property sets the background color of an element.

Text layout styles for <select> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <select> tag


Browser support



Do you find this helpful?

Related articles