Adobe Dreamweaver Guide

How to create forms

You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback,
sign a guest book, take a survey, or place an order for merchandise. In Adobe Dreamweaver, you can create a variety
of form elements, such as text fields, password fields, radio buttons, checkboxes, pop-up menus, and clickable images
(such as a Submit button).
The Forms category in the Insert panel (Figure 1) contains buttons for creating forms and inserting form elements.

Figure 1 Forms category in the Insert panel

The data gathered in forms is usually sent to a database on a server or through e-mail. To set up the form processing,
contact your site administrator. This guide helps you make the user interface of a form.

Setting up a form
You set up a form by inserting it and configuring options through the Properties panel.

To set up a form:
1. Open a page in Dreamweaver.
2. Place the insertion point on the page where you want to
insert a form or draw a new div for more precise
positioning of the form on your page.
Note: To draw a new div, click Draw AP Div in the
Layout category in the Insert panel, and then drag to draw
the div. Be sure to make the div large enough to contain
the entire form you plan to create.

© 2012 Adobe Systems Incorporated How to create forms 1

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
 Guide Adobe Dreamweaver

3. Select the Forms category in the Insert panel (Figure 1),

and click Form.
A blank form appears, with a red dotted outline
(Figure 2). You place all form elements inside this
outline. If you placed the form inside a div, you may need
to click outside the div to see the entire form outline.
Form options appear in the Properties panel.
4. From the Method pop-up menu in the Properties panel
(Figure 3), select either GET or POST.
• GET appends the form contents to the URL specified Figure 2 New, empty form
in the Action text box. Use GET if the form data is
short and the results of the form will lead to a page
that you want the visitor to be able to bookmark.
• POST sends the form contents directly to the server
in a manner that is not visible to the visitor. Use
POST if the form data might be long (if, for instance,
the form includes a text field that the visitor can use
to type an unlimited amount of text).
5. In the Action text box, type the URL or CGI script that
will process the form.
Note: Get this information from your site administrator.

Figure 3 Forms Properties panel

Adding form elements

Using the Forms category in the Insert panel, you can insert any combination of form elements within the red outline
of the form. You can use tables to lay out these elements if you choose.

Using form fields

Form fields enable site visitors to enter text into a form. Form fields include the following:
• Text fields, in which a visitor types a response
• File fields, in which a visitor types the path of a file to upload to your server

Adding text fields

Text fields provide a space in which visitors can enter text.

2 How to create forms © 2012 Adobe Systems Incorporated

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
Adobe Dreamweaver Guide

To add a text field:

1. Click the Text Field button in the Insert panel.
The Input Tag Accessibility Attributes dialog box opens
(Figure 4).
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the text field in the ID text box.
You may use any combination of letters, numbers, and an
underscore (_).
The ID is used by HTML and/or Javascript code to
distinguish this input tag from others, but it isn’t visible
to site visitors.
3. Enter a label for the text field in the Label text box. You
can leave the other properties in the dialog box at their
default values.
The label will be displayed next to the text field,
indicating to the visitor what to put in the field. Figure 4 Input Tag Accessibility Attributes dialog
4. Click the OK button to close the Input Tag Accessibility box
Attributes dialog box.
5. In the Add Form Tag dialog box, click Yes.
The text field appears in the form (Figure 5).
6. Click in the text field (not the label) to select it.
7. In the form Properties panel (Figure 6), select one of the
three types of text fields:
Figure 5 Example of text field in the form
• Single Line text for short answers
• Multi Line text for long answers such as the visitor’s
description of a problem with a purchased item
• Password text for passwords (in which asterisks
appear in place of typed characters)
Note: You can also create a multiple-line text field by
clicking the Text Area button in the Insert panel.

Figure 6 Form Text Field Properties panel

Adding a file field

A file field enables site visitors to select a file on their computers (such as a word-processing document or graphics
file) and upload it to your server. A file field looks like other single-line text fields, except it also provides a Browse
button. The visitor either types the path to the file they want to upload or uses the Browse button to locate and select
the file.

© 2012 Adobe Systems Incorporated How to create forms 3

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
 Guide Adobe Dreamweaver

To add a file field:

1. Click the File Field button in the Insert panel.
The Input Tag Accessibility Attributes dialog box opens
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the file field in the ID text box.
You may use any combination of letters, numbers, and an Figure 7 File field example
underscore (_).
3. Enter a label for the file field in the Label text box. You
can leave the other properties in the dialog box at their
default values.
4. Click the OK button to close the Input Tag Accessibility
Attributes dialog box.
The file field appears in your document (Figure 7).
5. Click in the file field (not the label) to select it. In the
Properties panel, in the Char Width text box, specify the
maximum number of characters visitors will see in the
field (Figure 8).
6. In the Max Char text box, specify the maximum number
of characters the field will hold.
Note: Contact your site administrator to confirm that
anonymous file uploads are allowed before using the file
field.

Figure 8 Form File Field Properties panel

Using checkboxes and radio buttons

Visitors click a checkbox or radio button to make a choice. With checkboxes, visitors can toggle a single option on or
off, or they can select one or more options from a group of options. With radio buttons, visitors can select only one
option from a group of options.

To add a checkbox:
1. Click the Checkbox button in the Insert panel.
The Input Tag Accessibility Attributes dialog box opens
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the checkbox in the ID text box.
You may use any combination of letters, numbers, and an
underscore (_).
3. Enter a label for the checkbox in the Label text box. You
can leave the other properties in the dialog box at their
default values.

4 How to create forms © 2012 Adobe Systems Incorporated

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
Adobe Dreamweaver Guide

4. Click the OK button to close the Input Tag Accessibility

Attributes dialog box.
The checkbox button appears in your document
(Figure 9). Figure 9 Example of checkbox
5. Click the checkbox (not the label) to select it.
6. In the Checked Value text box in the Properties panel
(Figure 10), enter a value for the checkbox.
This is the value that will be returned by the form. For
example, for a checkbox that indicates whether a visitor
wishes to be on a mailing list, you might set a value of 1
for yes.
7. For Initial State, select Checked if you want an option to
appear selected when the form first loads in the visitor’s
browser. Otherwise, select Unchecked.

Figure 10 Form Checkbox Properties panel

To add a group of radio buttons:

1. Click the Radio Group button in the Insert panel to insert
a group.
The Radio Group dialog box opens (Figure 11).
2. Enter a name in the Name text box.
3. Click the plus (+) button to add a radio button to the
group.
4. Enter a label and (if you want) a checked value for each
button.
5. Select an item in the radio button list, and click the up or Figure 11 Radio Group dialog box
down arrows to reorder the buttons.
6. Select Line Breaks to arrange the radio buttons without
using a table. Select Table to arrange them in a table.
7. Click OK.
The group of radio buttons is added to the form
(Figure 12).
8. Click a radio button (not its label) to select it.
Figure 12 Example of Radio Group

© 2012 Adobe Systems Incorporated How to create forms 5

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
 Guide Adobe Dreamweaver

9. In the Properties panel, click Checked or Unchecked to

indicate if this option is selected by default (Figure 13).

Figure 13 Form Radio Button Properties panel

Using list menus and drop-down menus (List/Menu)

Lists and menus allow visitors to select options from a list or pop-up menu. With a list menu, you can display
multiple options in a confined space and allow visitors to select multiple items. Visitors can select only one item from
a pop-up menu.

To add a list menu:

1. Click the List/Menu button (Windows) or Select (List/
Menu) button (Mac OS).
The Input Tag Accessibility Attributes dialog box opens.
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the list menu in the ID text box.
Figure 14 Example of list/menu field
You may use any combination of letters, numbers, and an
underscore ( _ ).
3. Enter a label for the list menu in the Label text box. You
can leave the other properties in the dialog box at their
default values.
4. Click the OK button to close the Input Tag Accessibility
Attributes dialog box.
A list/menu field appears in your document (Figure 14).
5. Click the list/menu field (not its label) to select it.
6. In the Properties panel, for Type, select List (Figure 15).

Figure 15 Form List Menu Properties panel

6 How to create forms © 2012 Adobe Systems Incorporated

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
Adobe Dreamweaver Guide

7. In the Height text box, enter the number of items the list
will display.
If this number is less than the total number of items in the
list, a scroll bar will be displayed.
8. If you want to allow visitors to select more than one item
in the list, select Allow Multiple for Selections.
9. Click the List Values button to add the list items.
Figure 16 List Values dialog box
The List Values dialog box opens (Figure 16).
10. With the insertion point in the Item Label text box, enter
the text you want to appear in the list.
11. In the Value text box, enter data you want sent to the
server when a visitor selects the item.
If you enter no value, then the form sends the label as the
value for that item.
12. Press Enter (Windows) or Return (Mac OS).
13. To add another item to the list, click the plus (+) button.
14. When you finish, click OK to close the List Values dialog
box.

Figure 17 Form List Menu Properties panel

15. To have one of the items in the list selected by default,

select that item in the Initially Selected text box in the
Properties panel (Figure 18).
The Initially selected item appears in the form
(Figure 18).
Figure 18 Form list with three items in the list

To add a drop-down menu:

1. Click the List/Menu button (Windows) or Select (List/
Menu) button (Mac OS).
The Input Tag Accessibility Attributes dialog box opens.
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the pop-up menu in the ID text
box. You may use any combination of letters, numbers,
and an underscore (_).
3. Enter a label for the pop-up menu in the Label text box.
You can leave the other properties in the dialog box at
their default values.

© 2012 Adobe Systems Incorporated How to create forms 7

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
 Guide Adobe Dreamweaver

4. Click the OK button to close the Input Tag Accessibility

Attributes dialog box.
A list/menu field appears in your document (Figure 19).
Figure 19 A list/menu field
5. Click the list/menu field (not its label) to select it.
6. In the Properties panel, for Type, select Menu.
7. Click the List Values button to add the menu items.
The List Values dialog box opens (Figure 20).
8. With the insertion point in the Item Label text box, enter
the text you want to appear in the menu.
9. In the Value text box, enter data you want sent to the
server when a visitor selects the item. Figure 20 List Values dialog box
10. Press Enter (Windows) or Return (Mac OS).
11. To add another item to the menu, click the plus (+)
button.
12. When you finish, click OK to close the List Values dialog
box.
13. To have one of the items in the menu selected by default, Figure 21 Preview in a browser
select that item in the Initially Selected text box in the
Properties panel.
Note: To see the menu items in operation, preview this
page in a browser (Figure 21).

Using form buttons

Form buttons control form operations. Use a form button to submit data entered into a form to the server or to reset
the form. There are two types of form buttons: Standard text buttons are the browser's default button style, with text
you want to display (typically Submit, Send, or Reset); graphical buttons use the graphic of your choice.

To add a standard text button:

1. Click the Button button in the Insert panel.
The Input Tag Accessibility Attributes dialog box opens.
2. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the button in the ID text box.
You may use any combination of letters, numbers, and an
underscore (_).
Note: There are two reserved names: Submit, which
submits the form data for processing, and Reset, which
resets all the form fields to their original values.

8 How to create forms © 2012 Adobe Systems Incorporated

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
Adobe Dreamweaver Guide

3. Don’t enter a label for the button. Click OK to close the 6. Select the type of Action (usually this is
Input Tag Accessibility Attributes dialog box. Submit Form).
Note: A label would appear next to the button, rather
than on it, so you don’t want a label for a button form
element. The text on the button itself is set by the
button’s value attribute, which you will set in the next
step.
Figure 22 Example of text button
A text button appears in the document (Figure 22).
Note: In this example, a Submit button is placed below
an existing file field.
4. Click the button to select it.
5. In the Properties panel’s Value text box, enter the text
you want to appear on the button (Figure 23).
Note: It’s a good idea to set the value to whatever the
button does. “Submit” is a good choice, but you might
also consider brief phrases in the forms of commands (for
example, “Send Message” or “Update Profile” or
“Register”).

Figure 23 Form Button Properties panel

Adding a graphical submit button

You can use images as submit button icons. Using an image to perform tasks other than submitting data requires
attaching a behavior to the form object by using the Behaviors panel.

To add a graphical submit button:

1. Click the Image Field button in the Insert panel.
The Select Image Source dialog box appears (Figure 24).
2. Locate and select the image to use as the submit button
icon; then click OK (Windows) or Open (Mac OS).
The Input Tag Accessibility Attributes dialog box opens.
3. In the Input Tag Accessibility Attributes dialog box,
enter a unique name for the button in the ID text box.
You may use any combination of letters, numbers, and an
underscore (_).
Note: There are two reserved names: Submit, which
submits the form data for processing, and Reset, which Figure 24 Select Image Source dialog box
resets all the form fields to their original values.

© 2012 Adobe Systems Incorporated How to create forms 9

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.
 Guide Adobe Dreamweaver

4. Don’t enter a label for the button. Click the OK button to

close the Input Tag Accessibility Attributes dialog box.
The graphical submit button appears in your document
(Figure 25).
5. Click the button to select it.
6. In the Alt text box, type alternate text you want to appear
in place of the image for text-only browsers (Figure 26).
This should match any text displayed on the button.
Note: You can also click the folder icon beside the Src
text box to select a new image for the button.
Figure 25 Example of graphical submit button

Figure 26 Form Image Field Properties panel

Using jump menus for navigation

A jump menu is a pop-up menu with options that link to documents or files. It is a form element that acts as
navigation. You can create links to documents in your website or other websites, e-mail links, links to graphics, or
links to any file type that can be opened in a browser. Because using this type of menu will cause the browser to
navigate to another page, don’t mix jump menus with other form elements.

To add a jump menu:

1. Click the Jump Menu button in the Insert panel.
The Insert Jump Menu dialog box opens (Figure 27).
2. Complete the dialog box.
For more information, click the Help button in the dialog
box.
3. Click OK.

Figure 27 Insert Jump Menu dialog box

10 How to create forms © 2012 Adobe Systems Incorporated

This document requires Adobe Dreamweaver CS6. Technical instructions may differ depending on your version.