|
Forms allow users to interact with a Web page.
They can be used to create surveys, collect information from users, or
for many other purposes. Macromedia Dreamweaver makes it easy to add
forms and form objects to your pages. This page will help you create
a simple form in Dreamweaver and send the results to your email address.
Inserting the Form Field
In Dreamweaver, open a new or existing page. From the Insert menu
choose Form.
This inserts a form field. Everything within the dotted
lines is part of the form.

Inserting Form Objects
A Text Field:
1. A text field is a form element that allows the user
to input a single line of text. First, type inside of the form
field "What is your name?" followed by a space. From
the Insert menu, choose Form Objects and then Text
Field. This will insert a box where users can type their name.
2. Make sure the field is selected and the Property
Inspector is up since this is where the options will be selected.
3. Where it says textfield, type in the name of
the field. After Char Width, enter the width of the field. After Max
Chars, enter the maximum amount of characters you want the user
to be able to enter. After Type, make sure Single Line is
selected. After Init Val, enter the initial value that will
be shown in the field.

A Multi Line Text Field:
1. A multi line text field allows the user to input multiple
lines of text. Hit <Enter> so that a new paragraph
is created under the first entry. Make sure you are still within
the form field.
2. Type "What is your address?" followed by
a space. From the Insert menu, choose Form and then Text
Field.
3. In the Property Inspector, after Type,
select Multi line. Enter a name, Char Width and Init
Val. After Num Lines, enter the height you'd like the text
field to be. After Wrap, choose an option. These will change
how text wraps within the box.

A Check Box:
1. A check box allows the user to make multiple selections. Type "What
is(are) your favorite color(s)?" followed by a space on the next
line down. From the Insert menu, choose Form Objects and
then Check Box.
2. After the box, type in the name of a color.
3. In the Property Inspector, enter a unique name
for the box. After Checked Value, enter the name of the color
that that box will select. After Initial State, select Checked if
the box will be initially checked or Unchecked if the box will
be initially unchecked (usually preferred).

4. Repeat adding the boxes, typing in color
names and modifying the box properties until you are satisfied with
the number of selectable colors. Remember to keep the unique name the
same on all of the colors' check boxes.
A Radio Button:
1. A radio button allows the user to choose only one option.
Type "What is your gender?" followed by a space on the next
line down. From the Insert menu, choose Form Objects and
then Radio Button.
2. Right after the button, type "Male." Type
another space, insert another button, another space and type "Female" right
after it.
3. In the Property Inspector, enter a unique name
and Initial State for the button. After Checked Value,
enter the gender the button will specify.

4. Modify the properties for the other button. Remember
to make the unique name the same.
A Drop-Down Menu:
1. Next, you will insert a form element that will allow users
to select an option from a drop-down menu. Type "What kind(s) of
pet(s) do you have?" followed by a space on the next line down.
From the Insert menu, choose Form Objects and then List/Menu.
2. Click the List Values button in the upper-right
hand corner of the Property Inspector. The List Values dialog
box comes up. In the Item Label column, specify names for the
pets. In the Value column, specify their names again. Click
the Add symbol to add more pets. When you are satisfied with
the number of selectable pets, click OK to return to the Property
Inspector.
3. Enter a name for the menu. After Type, choose List.
After Height, enter a value for the height of the visible menu.
After Selections, make sure the Allow multiple box is
checked. After Initially Selected choose entries that you would
like to be selected at default.

A Button:
1. A button allows the user to submit his/her choices or reset
the form. On the next line down, from the Insert menu choose Form
Objects and then Button.
2. Enter a name for the button in the Property Inspector.
After Label, enter the text that will appear on the button.
After Action, make sure Submit form is selected.

3. If you want to, you can insert another button now.
This time, make sure the Action is Reset form and it
will allow the user to reset all the selections they made to the defaults.
Modifying Form Properties
Collecting all of this information from a user
is useless if there is no way for you to see it. In this section you
will learn how to send it to a specified email address.
1. Click on the outline of the form and notice the change
in the Property Inspector.
2. Enter a name for the form. After Action, enter "mailto:your
email address." After Method, make sure POST is
selected.

If you stop now and someone returns the form to you filled
out, it will come back as a document that is very hard to read. To
get it in plain text, make the following change.
3. Right-click somewhere within the form that has no
formatting, near the very top or very bottom. On the menu that comes
up, you should be able to select Edit Tag <form>. Enter
the attribute enctype="text/plain" somewhere within
the form tag.

Your
form should look like this.
|