Dreamweaver - Forms - Adding a list menu

Go to the forms tab on the Insert menu:

Click on the

icon to create a new form. In Design view, the form is outlined by a dashed red line.

Once you've created a form, move your cursor inside the form area. Then click on the

icon to create a new list menu. List menus allow the user to select something from a list. These are usually used when the number of things to choose from makes using radio buttons or check boxes cumbersome. Here's the code for that example:

<form name="myForm" action="javascript:alert('You selected ' + myForm.listMenu.value + '.')">
<center><table width="60%" border="1" bgcolor="#dddddd"><tr><td><table width="100%" border="0">
 <tr>
  <td width="33%" align="left">Choose one:</td>
  <td width="34%" align="center"><select name="listMenu">
    <option value="A">A        </option>
    <option value="B">B</option>
    <option value="C">C</option>
   </select></td>
  <td width="33%" align="center"><input type="submit" value="Submit"></td>
 </tr>
</table></td></tr></table></center>
</form>

If you want to change the properties of the list menu, right click on it and select what you want to edit.

Selecting "Name..." pops up a window that allows you to change the name of the list menu.

Selecting "List Values..." pops up a window that allows you to add and remove elements from the list menu.

The "Item Label" column is the text that will appear to the user.
The "Value" column is the value that will be associated with that entry.
The "+" button lets you add another entry.
The "-" button takes out the selected entry.
The up and down arrows let you arrange the entries.

Selecting "Edit Tag <input>..." allows you to change all of the attributes at once:

The "Name" field is the name of the list menu.
The "Size" field is how many rows will be visible to the user. It is useful to set this number higher (3, 4, 5) when the user is allowed to select multiple items. The list menu will only function as a pull-down menu when this number is 1, which is the default.
Checking the "Allow Multiple Selections" checkbox makes it where the user can hold "Shift" or "Ctrl" and select more than one entry.
Checking the "Disabled" checkbox greys out the list menu and does not allow the user to select anything.

Select "Edit Tag Code <select>..." if you want to edit the tag properties by hand.

Alternatively, you can change the properties of the list menu through the properties menu:

The box under the words "List/Menu" is the name of the list menu.
The "Menu" radio button makes the list menu work like a pull-down menu.
The "List" radio button makes the list menu work like a list (it still works like a pull-down menu if you set the height to 1 and do not check the "Allow multiple" checkbox). Selecting the "List" radio button also enables the "Height" field and "Allow multiple" checkbox.
The "Height" field is how many rows will be visible at a time. This is only enabled if the "List" radio button is selected.
The "Allow multiple" checkbox allows the user to hold "Shift" or "Ctrl" and select additional entries. This is only enabled if the "List" radio button is selected.
The "List Values..." button brings up the window to edit entries in the list menu.
The "Initially Selected" list allows you to set which entry is selected by default.

Dreamweaver Home

CTU > Reference Desk > Web Development > Dreamweaver > Forms