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 :
Attribute Values | Description |
---|---|
disabled | This attribute contains the value disabled which represents the option is disabled. |
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. |
value | This attribute contains the value text sent to the server. |
Global and Event Attributes
Each <option> tag can include text or numeric values, which will be presented to the user. The <option>
tag also supports the Global Attributes and Event Attributes in HTML.
Examples of HTML option Tag
Example 1: In this example ,we will see the use of “option” tag in HTML .
<!DOCTYPE html>
<html>
<body>
<h1>w3wiki</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:
Example 2: In this example ,we will see the use of “option” tag in HTML .
<!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;
}
</style>
</head>
<body>
<h1 style="color: green;">
w3wiki
</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:
By understanding and effectively using the HTML <option> tag, you can enhance the user experience on your webpages by creating interactive dropdown lists.