How to specify a label for an optgroup tag in HTML5 ?
Last Updated :
17 Mar, 2021
The HTML <optgroup> element creates a grouping of options within a <select> element.
The HTML <optgroup> label Attribute text is used to specify a label for an option-group. The disabled attribute is used to specify that an option-group should be disabled.
Syntax:
<optgroup label="name">
Example 1: The following example demonstrates the simple optgroup tag in HTML5.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 >The optgroup element</ h1 >
< form action = "" >
< label for = "travel" >Choose a mode to travel:</ label >
< select name = "travel" id = "travel" >
< optgroup label = "Two Wheelers" >
< option value = "cycle" >Cycle</ option >
< option value = "motor_cycle" >Motor Cycle</ option >
</ optgroup >
< optgroup label = "Four Wheelers" >
< option value = "car" >Car</ option >
< option value = "bus" >Bus</ option >
</ optgroup >
</ select >
< br >< br >
< input type = "submit" value = "Submit" >
</ form >
</ body >
</ html >
|
Output:
Example 2: The following example demonstrates the optgroup tag with a disabled attribute.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 >The optgroup element</ h1 >
< form action = "/action_page.php" >
< label for = "food_chain" >Choose an animal:</ label >
< select name = "food_chain" id = "food_chain" >
< optgroup label = "Herbivores" >
< option value = "cow" >Cow</ option >
< option value = "deer" >Deer</ option >
</ optgroup >
< optgroup label = "Carnivores" >
< option value = "tiger" >Tiger</ option >
< option value = "lion" >Lion</ option >
</ optgroup >
< optgroup label = "Omnivores" disabled>
< option value = "dog" >Dog</ option >
< option value = "fox" >Fox</ option >
</ optgroup >
</ select >
< br >< br >
< input type = "submit" value = "Submit" >
</ form >
</ body >
</ html >
|
Output:
optgroup tag with disabled attribute
Share your thoughts in the comments
Please Login to comment...