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 content is written between the opening (<option>) and closing (</option>) tags.

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 of the HTML <option> tag:

<!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 of the HTML <option> tag with the <datalist> tag.

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

chrome edge firefox safari opera

Practice Your Knowledge

What are the characteristics and uses of the HTML <option> tag?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?