HTML <option> tag
When writing in HTML (hypertext markup language), the <option> tag designates an item in the <optgroup>, <datalist>, or <select> elements. These options can be selected using a drop-down menu, or via autocomplete if the user starts typing one of them. The following sections contain information about the <option> tag, including an example of it in use, and related attributes and browser compatibility.
The <option> tag belongs to a group of tags called form elements.
Example of <option> code
<div>Choose your favorite color from this list:</div>
<input list="colors"/>
<datalist id="colors">
<option value="Red"></option>
<option value="Green"></option>
<option value="Blue"></option>
<option value="Orange"></option>
<option value="Purple"></option>
</datalist>
Example result
If you hover your mouse cursor over the right side of the box, a down arrow appears. Click this arrow to choose your favorite color.
Attributes
All HTML tags support standard attributes that define the settings of an HTML element. In addition to the standard settings, the <option> tag has the following unique attributes.
Attribute | Description |
---|---|
disabled | Disables the option. |
label | Designates a short label for an option. |
selected | Designates that the option should be selected as soon as the page loads. |
value | Designates a value to best sent to the server then the option is selected. |
Compatibility
Edge | Internet Explorer | Firefox | Safari | Opera | Chrome |
---|---|---|---|---|---|
All versions | All versions | All versions | All versions | All versions | All versions |
Additional form elements
- <button>
- <datalist>
- <fieldset>
- <input>
- <keygen>
- <label>
- <legend>
- <optgroup>
- <output>
- <select>
- <textarea>
Browser, Compatibility, Container tag, Server, Web design terms