HTML <option> Tag
Last Updated :
26 Mar, 2024
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.
|
label
| 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 .
HTML
<!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:Â
Example 2:Â Â In this example ,we will see the use of “option” tag in HTML .
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;">
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:Â
By understanding and effectively using the HTML <option> tag, you can enhance the user experience on your webpages by creating interactive dropdown lists.
Supported Browsers:Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...