Web Design in a Nutshell, 3rd Edition

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