HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <option> Tag

The <option> tag is used inside a <select> element to define a single option in a drop-down list.
Each <option> represents a selectable value that the user can choose.

The <option> tag must always be a child of <select> or <datalist>.

Syntax

html

<option value="value1" selected disabled>Option Text</option>

Attributes

AttributeDescription
valueThe value sent to the server when the option is selected.
selectedPreselects the option when the page loads.
disabledMakes the option unselectable.
labelProvides an alternative label for the option (for accessibility).
idAssigns a unique ID to the option element.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Option Tag Example</title>
</head>
<body>
  <h2>Select Your Favorite Color</h2>
  <form action="/samples/form_processor.php" method="post">
    <label for="colors">Choose a color:</label><br>
    <select name="colors" id="colors" required>
      <option value="">--Select--</option>
      <option value="red">Red</option>
      <option value="green" selected>Green</option>
      <option value="blue">Blue</option>
      <option value="yellow" disabled>Yellow (Unavailable)</option>
    </select><br><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

Output

Browser Output

html

You will see a drop-down list where users can select a color.
The green option is preselected, and yellow is disabled and cannot be chosen.
Use our TryIt Editor to experiment with selected and disabled attributes.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser suppots <option> tag.

Notes

  • The <option> tag must be nested inside <select> or <datalist>.
  • Use selected to preselect an option.
  • Use disabled to prevent certain options from being selected.
  • For accessibility, the label attribute can provide a screen-reader-friendly name.

Conclusion

The <option> tag defines individual choices within a dropdown or list.
It is essential for creating dynamic, user-friendly selection interfaces in forms.

PreviousHTML <select> TagNextHTML <optgroup> Tag