How to specify a label for an optgroup tag in HTML5 ?
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:
Contact Us