Exit tutorial


HTML Tutorial
Dreamweaver Tutorials
Creating Forms in Dreamweaver

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.

Form field

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.

Properties box

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.

Properties 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).

Properties box

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.

Properties box

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.

Properties box

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.

Properties box

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.

Form Action

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.

Edit tag

Your form should look like this.

[Back to the Stage 4 Index]