<class home>  <forms>   <back   next>

Menus and lists

lists and menus: allow a user to select from a list of options
- drop-down menu: drops down when you click on it.
- list box: offers several choices at once where a user may be able to choose more than one item.

ex.

select a gift:

preferred delivery day:

To make a menu: Dreamweaver

1. Put your cursor where you want it in the document window.

2. Select Insert>form object>List/Menu from the main menu.
Or click on the form button in the object panel: form section:

3. In the Properties panel:
-give it a name.
-select menu for Menu
-enter in a line height if desired (this will show more than one line)
-edit list values through the "List Value" button. Using the "+" and "-" icons to add and delete. Put in names and values
-select the multiple selections box if you want the user to be able to choose more than one thing.
-select an initially selected default item if you want it to show and be selected by default.





To make a listbox: Dreamweaver

1. Put your cursor where you want it in the document window.

2. Select Insert>form object>List/Menu from the main menu.
Or click on the form button in the object panel: form section:

3. In the Properties panel:
-give it a name.
-select List
-enter in a line height if desired (this will show more than one line)
-edit list values through the "List Value" button. Using the "+" and "-" icons to add and delete. Put in names and values
-select the multiple selections box if you want the user to be able to choose more than one thing.
-select an initially selected default item if you want it to show and be selected by default.



In HTML

Typing it in.

ex.

select a gift:

preferred delivery day:

To get the example above, put this into the <body> section of your html:

<form name="form5" method="post" action="">
<p>select a gift:
<select name="select">
<option value="stuffeddog" selected>stuffed dog</option>
<option value="toytrain">toy train</option>
<option value="videogame">video game</option>
</select>
<br>
<br>
preferred delivery day: <br>
<select name="select" size="7" multiple>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</p>
</form>

And now for something really cool...
You can make submenus:

ex.
select a toy:

Type in:

<form name="form1" method="post" action="">
select a toy:
<select name="toy">
<optgroup label="stuffed dog" selected="selected">
<option value="snoopy">snoopy</option>
<option value="clifford">clifford</option>
<option value="foxy">foxy</option>

<optgroup label="toy train">
<option value="hasbro">habro train</option>
<optgroup label="video game">
<option value="TheSims">The Sims</option>
<option value="GrandTheftAuto3">Grand Theft Auto 3</option>
</select>
</form>

*note: the selected="selected", this is required in XHTML and so is multiple="multiple" if you use those options.