HTML option Tag
The information on this page is based on HTML version 4.01 (which is the current version of HTML). The next version, HTML 5, is currently being written. Here's a list of HTML 5 tags.
The HTML option tag is used in conjunction with the select tag and is used for defining option items within the select list.
Also see <optgroup> tag for grouping your option items, and the HTML 5 <datalist> tag for creating an "autocomplete" feature on your <input> tags.
| Example |
<select>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell" selected>Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
|
| Attributes: |
| Attributes specific to this tag: |
| Attribute | Description |
| selected | Specifies that this option will be pre-selected when the user first loads the page. |
| value | Specifies the initial value of the option item. |
| label | Specifies a label to be used as an alternative to the option item's contents. Useful if you'd prefer a shorter, more concise label. |
| Other Attributes: |
| Attribute | Description |
| class | Document wide identifier. |
| id | Document wide identifier |
| dir | Specifies the direction of the text |
| lang | Language code |
| style | Inline style (CSS). |
| title | Specifies a title to associate with the element. |
| tabindex | Helps determine the tabbing order (when the user 'tabs' through the elements on the page). |
| disabled | Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
| onclick | Intrinsic event (see event handlers) |
| ondbclick | Intrinsic event (see event handlers) |
| onmousedown | Intrinsic event (see event handlers) |
| onmouseup | Intrinsic event (see event handlers) |
| onmouseover | Intrinsic event (see event handlers) |
| onmousemove | Intrinsic event (see event handlers) |
| onmouseout | Intrinsic event (see event handlers) |
| onkeypress | Intrinsic event (see event handlers) |
| onkeydown | Intrinsic event (see event handlers) |
| onkeyup | Intrinsic event (see event handlers) |
|
| Try it yourself! |
|
Also see the HTML 5 version of HTML tags
Enjoy this page?
-
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!
