The <option> tag in HTML is used to choose an option from a Drop-Down menu. This tag can be used with or without any attributes and the needed value can be sent to the server. The <option> tag is used within a <select> element to create a selectable option in a dropdown list.
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.
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.
Syntax:Â
<option> Contents... </option>
Attributes:
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.
|
This attribute contains the value selected which represents the item that is pre-selected when the browser loaded.
|
This attribute contains the value text sent to the server.
|
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 >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 >
</ 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:Â
Supported Browsers:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Last Updated :
26 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...