Option groups
Conceptual groups of options may be organized into option groups
, indicated with the optgroup
element. This could be used by browsers to display hierarchical cascading menus. The value of the required label
attribute is displayed as a heading for the following options.
The content of the optgroup
element is one or more option
elements. An optgroup
element may not contain other optgroup
elements. This example shows how the optgroup
element could be used to structure a list of ice cream flavors similar to those in the previous examples. The label
attribute provides a name for the group of options.
<p>What are your favorite ice cream flavors?</p> <select name="ice_cream"size=
"6
"multiple=
"multiple
"> <optgroup label="traditional"> <option>Vanilla</option> <option>Chocolate</option> <option>Mint Chocolate Chip</option> <option>Pistachio</option> <option>Fudge Ripple</option> </optgroup> <optgroup label="specialty"> <option>Inside-out Rocky Road</option> <option>Super-duper Praline Pecan Smashup</option> <option>Bubblegum</option></optgroup> </select>
When a user selects an option from the list (such as “Pistachio” from the example), the content of that option
is passed on with the variable name specified in the select
element:
ice_cream=Pistachio
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.