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.

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

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

<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 on size 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.

Attention: 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.

H2 Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <form>
      <select>
        <option value="computers">Desktop computer</option>
        <option value="notebook">Ipad</option>
        <option value="tablet">Laptop</option>
      </select>
    </form>
  </body>
</html>

Result

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <select>
      <optgroup label="Cities of France">
        <option value="orenburg">Moscow</option>
        <option value="voronezh">Nantes</option>
      </optgroup>
      <optgroup label="Lakes of Russia">
        <option value="baykal">Baikal</option>
        <option value="taymyr">Taymyr</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

Attributes

Attributes 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 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.

<select> tag supports Global attributes as well.