HTML <option> Tag

The HTML <option> tag is a versatile tool that enhances user interaction by creating selectable options within a dropdown list. This tag can be used with or without any attributes, and the selected value can be sent to the server.

This elements must be inside <select> tag, <optgroup>, or <datalist> tags. It represents an individual option within a <select> dropdown, allowing users to choose among multiple choices.

Syntax

<option> Contents... </option>

Attributes of the <option> Tag

The <option> tag supports several attributes that provide additional functionality and customization. Below are the key attributes and their usage:

Note: All the attributes mentioned are optional. but its recommended to add value attribute.

Global and Event Attributes

In addition to the core attributes, <option> elements can also use global and event attributes. These enhance the interactivity and accessibility of the option elements.

• Global Attributes: These are attributes that can be used on virtually all HTML elements, including <option>. Common ones for <option> include id, class, style, title, disabled, hidden, and custom data-* attributes.
• Event Attributes: These are attributes that trigger JavaScript events when the user interacts with the <option> element. Common event attributes include onclick, onfocus, onchange, onmousedown, onmouseup, etc.

Examples of HTML option Tag

The following example shows a basic dropdown list where users can select an option:

Output:

👁 Image

Bonus Tip: In many scenarios, such as when you create a dropdown for countries where the list grows longer, you can use the <optgroup> tag to group related options.

Creating a Dropdown with Grouped Options Using <optgroup>

This example demonstrates how to group related options within a dropdown using the <optgroup> tag:

Output:

👁 htf