HTML <option> Tag

The <option> tag defines items in a drop-down list, defined by the <select> tag, or the items of the data list for autocomplete, defined by the <datalist> tag. The <option> tag can be used as a child element of the <select> tag, <datalist> tag or <optgroup> tag, which groups the list elements.

The <select> tag is placed in the <form> tag, if the data lists must be sent to the server, or when the data list is accessed via scripts.

Syntax

The <option> tag comes in pairs; the closing tag (</option>) is required.

The <option> tag is generally used with the value attribute to specify which value should be sent to the server for the further processing.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="computers">Computer</option>
        <option value="notebook">Notebook</option>
        <option value="tablet">Tablet</option>
      </select>
    </form>
  </body>
</html>

Result



Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Departure airport:</p>
    <form action="action_form.php" method="get">
      <input type = "text" list = "airports" name="airports">
      <datalist id = "airports">
        <option value = "Birmingham">
        <option value = "Cambridge">
        <option value = "Oxford">
        <option value = "Bangor">
      </datalist>
      <input type = "submit" value = "confirm">
    </form>
  </body>
</html>

In this example the <option> tag is inserted in the <datalist> tag.

Result



Attributes

Attribute Value Description
disabled disabled Indicates that the element selection is disabled.
label text Defines a name for a list item.
selected selected Sets, that the option must be selected by default when the page is being loaded.
value text Defines the value, which is sent to the server.

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

Browser support