Form Elements

There are few specific requirements for form elements, but there are several suggestions and observations to help you use them to their best.

Text Fields

According to the official guidelines, you shouldn't use the size attribute with text fields, as it doesn't display correctly on the Macintosh platform. Instead, you should use inline styles such as these:

• style="width:230px" for wide text fields (to hold URLs, for instance)

• style="width:135px" for narrower text fields

This having been said, however, it should be noted that many of the standard Macromedia extensions do use the size attribute. (See the dialog box analyzed in Figure B.6, as an example of this.) For fields holding numbers , size="8" is often used (or sometimes size="6" ). For fields holding color names , the common width is size="10" .

Checkboxes and Radio Buttons

Use checkboxes for controls that can be selected and deselected independently (see Figure B.10). Use radio buttons when a group of controls works as a set, where only one may be selected at a time (see Figure B.11). When using radio buttons, always have one button selected as the default.

Figure B.10. Using checkboxes for choices that can be set independently of one another.

Figure B.11. Using groups of radio buttons for groups of options that can have only one selection each.

Lists and Popup Menus

You can use multiline lists or popup menus to provide users with a list of choices. Use popup menus when the user must select one choice only from the set of options (see Figure B.12). Use multiline lists when the user is allowed to select more than one item (see Figure B.13).

Figure B.12. Using popup menus to allow the user to choose one from each set of options.

Figure B.13. The Swap Image and Apply Template dialog boxes, showing two different uses of selection lists/menus.

Additive Lists

An additive list is a multiline list that allows the user to add or subtract items (see Figure B.14). If you use an additive list in your interface, use + and - buttons for adding and subtracting items, and ( optionally ) up and down arrows for rearranging items. Dim any button when its function is no longer operable (for example, when no more items can be added to the list, dim the + button). The images for all these buttons are available in the Configuration/Shared/MM/Images folder (refer to Figure B.4).

Figure B.14. The Edit Font List dialog box, which uses an additive multiline list.

Color Buttons

Although the Macromedia UI guidelines don't specifically mention color buttons, you should take note of how this Dreamweaver-specific form element is used in the standard extensions. The color button always appears in conjunction with a text field for displaying or manually entering color values. The color button is on the left, and the text field is on the right. The two form elements should be linked so that choosing a color in one will reveal a value or color swatch in the other. Figure B.15 shows this happening.

Figure B.15. A portion of the Page Properties dialog box, showing standard use of the <mmcolorbutton> form element.

Note also that if a user types a color into the color field, you should make sure your script adds the # , if necessary. This is how the standard color controls work.

note

See Workshop #3 of Chapter 2, "Creating Custom Objects," for a complete discussion of creating and working with color buttons.

Tree Controls

Another Dreamweaver-specific form elementtree controlsare also not covered in the UI guidelines. From their appearance in the Keyboard Shortcuts Editor (see Figure B.16), you can see that they give users the ability to navigate through hierarchies of choices for situations that require complex input choices. A tree structure in a dialog box necessitates some sort of scrolling within the tree control itself when the tree is fully expanded. This is an acceptable part of this interface element. Scrolling the dialog box around the tree is still not acceptable.

Figure B.16. The Keyboard Shortcuts Editor, showing the use of tree controls.