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
| Attribute | Description |
|---|---|
| value | The value sent to the server when the option is selected. |
| selected | Preselects the option when the page loads. |
| disabled | Makes the option unselectable. |
| label | Provides an alternative label for the option (for accessibility). |
| id | Assigns 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+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser suppots <option> tag.
Notes
- The
<option>tag must be nested inside<select>or<datalist>. - Use
selectedto preselect an option. - Use
disabledto prevent certain options from being selected. - For accessibility, the
labelattribute 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.