Dreamweaver - CS3

Lesson 43: Forms (3)

43/58 Lessons 

Lists and Menus

The difference between a list and a menu is that the “list”option displays a list and the “menu” option displays a drop-down menu.
To add a list or a menu, first place the cursor in the form where you’d like to have it and then click the “List / Menu” button in the “Form” tab.

If you have not disabled, the “Input Tag Accessibility Attributes” dialog is displayed again.
Enter your settings and click OK.

In the properties window, we select whether we wish to add a menu or a list.
In this first example I choose “menu” button and click the “List Values”.
This opens the “List Values” window, what did you think?

Give values to the various labels you wish to include in your menu.
The “Labels” are displayed in the menu, the “Value” is what is sent to the server.
Like any good family man, give a name to each item.
And finally select the item that will show as selected when the menu is displayed initially.

 

When you select the option “List”, we have a number of other properties to set.
So you have the “Height” box, this controls the height of the list.
If you have more items in your list than that can fit in the given height, a scroll bar appears in the list.
And then you have the “Selections” box. When this is selected, the user of the form can select multiple items from the list by holding the Ctrl key on his keyboard.
Again, we click the “List Values” button to add various options to our list.

Submit Form

We must not forget to add a button that will send the form.

Place the cursor as always in this form where you want it and click the “button” button in the “Forms” tab.

In the properties window, choose the “Submit form” button and give it a name and a value.
Repeat this for “Reset form” button. This will remove all information that is typed into the form.

Validate Form

In your form, you require that the user fill-in certain fields before he can send the form.

First select the “Submit” button on the form.

Select the “Tag” panel, select “Behaviors” tab and click the plus sign.

In the drop-down menu choose the option “Validate Form”.
This opens the “Validate Form” dialog box.
In the “Fields”, all elements of the form are shown.
And here again, it is a proof that it is wise to provide a name and a value for your elements.

Select the field in the list and click the check box “Required” if you want the user to fill-in this field. Alternatively you can choose another option that the user must complete. For example, an email address.
Although, he can still fill what he wants, it should have an @ sign. But yes, there are still some fools in the world.

As you can see, this is added in the “Behaviors” panel.
I will discuss, multiple “Behaviors” in Lesson 45.

Awesome!
You've completed Lesson 43
START NEXT LESSON