You are probably familiar with form elements that list all 50 states or numerous country codes. These forms are constructed with select menus. Using optgroup, you can create categories within a select menu to help organize the menu. Here’s an example of a select menu that lets you pick favorite jazz singers, with the choices organized by gender. The optgroup label appears in the menu when it is displayed on a web page.
<label for="singers">Favorite Jazz Singers</label>
<select name="fav" id="singers" multiple="multiple">
<optgroup label="Women">
<option value="schuur">Diane Schuur</option>
<option value="reeves">Dianne Reeves</option>
<option vlaue="johnson">Molly Johnson</option>
</optgroup>
<optgroup label="Men">
<option value="buble">Michael Buble</option>
<option value="jarreau">Al Jarreau</option>
<option value="bennett">Tony Bennett</option>
</optgroup>
</select>
The select element allows for more than one choice with the attribute multiple="multiple". When allowing more than one choice, it’s wise to instruct your users about how to do that. A brief note that more than one selection can be made by holding down the Ctrl or Cmd key while selecting is all that is needed.
If you are not a hand coder and need directions for how to use optgroup in Dreamweaver, see this post: The optgroup in HTML select forms in Dreamweaver.
One thought on “The optgroup in HTML select forms”