The optgroup in HTML select forms in Dreamweaver

I recently showed how to use optgroup in HTML select forms. Those instructions were for hand coders. Today’s instructions show you how to make a small select form with optgroups in Dreamweaver. This is what the finished form element looks like in the browser.

browserOptgroup

Here’s how you do it if you use Dreamweaver. The following screen shots are from Dreamweaver CS4, but previous recent versions of Dreamweaver will work in a similar way.

In Dreamweaver, start by selecting the Forms category from the Insert panel. Choose the icon for List/Menu. Fill in the id for the form element and give the menu a Label. Select Attach label tag using ‘for’ attribute. If you don’t see this accessibility window, you need to go into your Preferences and select all the Accessibility options you can to automatically appear when appropriate.

InputTagAccessibilityAttributes

When the form element appears in the document, select it and click List Values in the Properties panel. Add the various labels and values for your select menu. Click OK.

ListValues

Select either Split or Code View to look at the code. At this point, you have the following code.

selectCodeView

I changed the value for name to “fav.” Dreamweaver assigns the value “singers” to both name and id automatically. It’s okay to change the value of name, but be sure that the value of for and the value of id are exactly the same.

Dreamweaver doesn’t have an icon for optgroup in the Form panel. So you have two choices. You can go into Code View and type the optgroup tags in your select element. If you are comfortable doing that, it’s the quickest way to make it happen.

If you don’t like typing in Code View, here are the steps. You still need to see the code. Use Split View. Highlight the three options that are women. (You can see an image of the men’s names highlighted below.) With the women options highlighted, Choose Insert Tag. In the Tag Chooser window, select HTML tags > Forms > optgroup. Click Insert.

insertOptgroup

You will be asked to create a Label for the optgroup. Type Women. Click OK.

tag-editor-optgroup

Repeat the process by highlighting the options for men in the code.

highlightMen

Again, choose Insert Tag. In the Tag Chooser window, select HTML tags > Forms > optgroup. Click Insert. This time, when the Tag Editor for optgroup appears, type “Men” in the form and click OK. The completed select menu looks like this in Code view:

completed-select-menu

You’ve finished inserting the optgroup, so you can click back into Design view and complete your form in Design view.

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.