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:
Attribute | Value | Description |
|---|---|---|
Disabled | This attribute contains the value disabled which represents the option is disabled. | |
text | This attribute contains the text value which represents the shorted label for the option. | |
selected | This attribute contains the value selected which represents the item that is pre-selected when the browser loaded. | |
text | This attribute contains the value text sent to the server. |
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>includeid,class,style,title,disabled,hidden, and customdata-*attributes. - Event Attributes: These are attributes that trigger JavaScript events when the user interacts with the
<option>element. Common event attributes includeonclick,onfocus,onchange,onmousedown,onmouseup, etc.
Examples of HTML option Tag
The following example shows a basic dropdown list where users can select an option:
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML option Tag</h2>
<select>
<!-- option tag starts -->
<option>Choose an option</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="C++">C++</option>
<option value="php">PHP</option>
<option value="perl">PERL</option>
<!-- option tag ends -->
</select>
</body>
</html>
Output:
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optgroup Example</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<form>
<label for="dropdown">Select an option:</label>
<select id="dropdown" name="dropdown">
<optgroup label="Group 1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</optgroup>
</select>
</form>
</body>
</html>
Output:
