• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 11. Creating Forms > Adding List/Menu Items

Adding List/Menu Items

A list/menu enables users to pick options from a scrolling list or a menu. A scrolling list gives you the option to allow users to make multiple contiguous or noncontiguous selections. A menu restricts users to one selection. In both types, items chosen by the user will be highlighted.

In the lights_quiz.html document, type Unique markings are painted on lighthouses to: in row 9 of the table. Insert a line break and type (select the most appropriate options—make multiple selections with Command-click on the Macintosh and Ctrl-click on Windows).

In the following steps, you will place a scrolling list with six menu options just below the text you typed in this step.

Click at the end of the first line you typed in step 1, insert a line break, and click the List/Menu icon on the Forms tab of the Insert bar. On the Property inspector, select List for the Type option and change Height to 4. Check the Allow multiple check box for the Selections option.


You can also choose Insert > Form Objects > List/Menu.

A small menu is inserted into the form, and the Property inspector displays Menu properties. Dreamweaver inserts a drop-down menu by default. You've changed the format to a scrolling list. You must change the height to a value that is greater than 1 for the form object to change from a menu to a list.

The list format has an additional option that is not available in the menu variation. You can choose to allow or not allow multiple selections by checking or unchecking the Allow multiple check box for the Selections option. This option is unchecked by default. If you check the selections box, users can make multiple noncontiguous selections by using Command-click on the Macintosh and Ctrl-click on Windows. Users may make contiguous selections by using Shift-click on both Macintosh and Windows. If you decide to allow multiple selections, it is a good idea to inform your visitors that they are able to make multiple selections, as well as tell them how to do so. Many users may not know these commands. It is always best to provide your visitors with all the information and tools they will need in order to interact with your site.

You can also set a height for the scrolling list by typing in the Height text field the number of lines you want to be visible. If you leave the Selections check box unchecked, be sure to enter a line height value of more than 1; otherwise, the scrolling list will display as a menu. You should always define the height for a scrolling list; if you don't, the number of lines displayed will be the browser default, which varies.

In the Name text field, replace select with markings and click the List Values button on the Property inspector.

The List Values dialog box opens. This dialog box is the same for both List and Menu entries.

Click the plus sign (+) button to add an entry. In the Item Label field, type scare away birds and then press Tab.

The longest item in the list values box determines the width of the list/menu.

In the Value field, type scarebirds.

This text is sent to the CGI or server to indicate that the option has been selected.

Press Tab or click the plus sign (+) at the upper left of the dialog box to add another option to the menu.

Use the minus sign (–) to delete items from the List Values box.

Repeat steps 4 through 6, adding hide them in the fog, make them look different, make them beautiful, make them visible, and camouflage them to the list. Change the Value field to match the name of each region using fog, different, beautiful, visible, and camouflage, respectively.

Use the arrows above the Value field if you want to reorder the list.


When you have multiple entries to add, you can press Tab after entering a value to automatically add a new entry.

Click OK to close the dialog box.

The list shows the regions you just added.

An additional option on the Property inspector for list/menu items is the Initially Selected box. You can choose to have any one of the items in the list be selected when the page loads. This might not be desirable for scrolling lists, but for menu items it is helpful to have a sample choice or instruction such as “Choose one…” appear on the first line.


If you choose an item to select initially, there is no way to deselect it. In order to deselect it, you would need to open the List Values dialog box, delete the item that was selected, and add it to the list again.

Save the file and preview it in the browser.

Leave this file open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint