This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Forms: Working with Lists/Menus

The List/Menu form field allows users to select an option or multiple options from a list of choices. The List option displays values in a scrolling list for which the size can be manually set; this allows a user to select multiple values at once. The Menu option displays values in a drop-down list; this allows a user to select only a single value.

To use a list or menu, both must be inserted into a form and assigned an item label and value. When users submit a form, their entries must go somewhere -- possibly to the designer via email or to a database or text file. Item labels and values are used to pass form field inputs to the script or form handler and then to the designer. This is done by matching the user's form field inputs to the form fields that requested them.

NOTE: For more information about working with optional form fields, please refer to Inserting the First Form Field, Opening the Form Field Properties Dialog Box, and Terminology.

return to topInserting a List/Menu

  1. Place your cursor within the form boundary where you would like to insert the form field
    NOTE: For more information on inserting forms, refer to Creating Forms.

  2. From the Insert menu, select Form » List/Menu
    OR

    From the Insert pane, in the Forms tab, click LIST/MENUList/Menu button
    The Input Tag Accessibility Attributes dialog box appears.
    Input Tag Accessibility Attributes dialog box

  3. In the Label text box, type an appropriate and descriptive label
    NOTE: In the case of Lists and Menus, the Label is visible to the user and generally is the question the user needs to answer (e.g., State of residence.)

  4. Make any appropriate selection(s) under Style, Position, Access key, and Tab Index

  5. Click OK
    NOTE: If you are prompted to insert a form tag, click YES.

return to topAssigning Item Labels, Values, and Names

When creating a list or menu, there are three elements which need to be set: the item label, value, and name. The field name identifies the question that the user is being asked, the item label represents the text that the user sees as an option, and the value is the option chosen by the user. For example, if the user is supposed to give their state of residence, the field name would be "State," the item label could be "Wisconsin," and the value would be "WI."

When a user submits the form, the inputs are sent to the owner of the form via email; the value of the drop-down box field will be matched with the name of the drop-down menu field. The information the owner receives may look like this:

name: value
EXAMPLE: state: WI

To assign the item label and value

  1. Once the List/Menu has been inserted, select it
    The List/Menu Properties pane appears at the bottom of the screen.
    List/Menu properties pane

  2. In the List/Menu text box, type a name for this field
    EXAMPLE: State

  3. From the Type section, specify whether you want to create a List or a Menu
    NOTE: A List allows more than one selection to be made while a Menu permits only one selection.

  4. From the List/Menu Properties pane, click LIST VALUES...
    The List Values dialog box appears with a cursor under Item Label..
    List Values dialog box

  1. Under Item Label, type the appropriate text for the item
    This text is what the user will see when selecting from your list.

  2. Press [Tab]
    Your cursor switches over to the Value column.

  1. Under Value, type the appropriate value
    This text should identify the label it corresponds to.

  2. To add additional items to your list:
    1. Click ADDAdd button
    2. Repeat steps 4-6

  3. To remove an item from your list
    1. Select the item
    2. Click REMOVERemove button

  4. To change the order in which an item appears
    1. Select the item
    2. Click the appropriate arrow Up and down arrows

  5. When finished, click OK

  6. OPTIONAL: In the List/Menu Properties pane, in the Selections section, specify whether you want to allow multiple selections by checking Allow multiple
    NOTES:
    This option is only applicable when you create a list.
    The option is selected when a check mark appears in the box.

  7. OPTIONAL: In the Initially selected section, select the list item you want to appear selected by default
    HINT: To avoid a pre-selected item, you may want to include an Item Label "Select" with the value "---".

Excellence. Our Measure. Our Motto. Our Goal.