The optgroup in HTML select forms

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”

Leave a Reply