Using Input Forms in Dreamweaver

Forms are used to allow users to input information into a web page and send that information somewhere, such as to an email account or database where form input is collected and interpreted. Common "server-side" (scripts or programs stored on a mail or web server) technologies used for processing form data include Adobe ColdFusion, Microsoft Active Server Pages (ASP), and PHP. The server responds by sending requested information back to the user (or client), or performing some action based on the form's contents. Often, these types of web pages are used for online surveys and requests, and sometimes even quizzes or tests. They can be simple or very long and complex, depending on the nature of the information being gathered; luckily, Dreamweaver can create many different kinds of forms and come to the rescue in almost every situation.

To begin a form:

1. Click the Insert Menu, drag down to Form, and choose the very first option, "Form." This tells Dreamweaver that you are starting a form area in your web page.

2. Once your form area is created you should notice a red outline on your page - this is where you form area begins and ends. It will expand as you add items to it dynamically, so do not worry if it looks small to begin.

3. Before you move on, look at the Properties window and notice how it has changed. When creating a form that will be sent somewhere, the usual Method to choose is "POST," which is the default setting when a new form is created. POST embeds data in the HTTP web page request when the user submits the form; GET sends a URL to the server so that it can "get" the data from the requesting page. POST is more commonly used because of its ability to send longer forms; GET should not be used with large forms or the data may be truncated once the server receives and processes it. Another item of note is that dynamic pages generated by parameters passed by the GET method can be bookmarked because all the values needed to regenerate the page are contained in the URL displayed in the browser's Address box. In contrast, dynamic pages generated by parameters passed by the POST method cannot be bookmarked.

The Action box in the Properties window is where the server script location should go. This is usually a URL address to a program or script file residing on the server, such as http://www.myserver.com/cgi-bin/formmailer.cgi.

"Enctype," or encoding type, refers to the method of encryption submitted to the server for processing when a use of your form clicks the Submit button. The default setting of application/x-www-form-urlencode is typically used in conjunction with the POST method. If you are creating a file-upload field, specify the multipart/form-data MIME type.

Getting Forms to "Go"

While much of this sounds highly technical, in many situations the server administrator will know what settings you need to add to the Properties windows in order for your form to work. Often, a simple CGI script can be uploaded to the server that will relay the form data to an email address or database. Look to a resource like http://www.scriptarchive.com for downloads and more information on this subject. There are also places that provide hosting of various CGI scripts so that you don't have to worry about them at all. This site provides a comprehensive list of free and fee-based CGI hosting services covering a variety of functions: http://cgi.resourceindex.com/Remotely_Hosted.

A very simple action you can add to your form properties (with method POST) is this: mailto:me@my.com?SUBJECT="Sent from my form"

This will do exactly what you probably think it does - send the form data right to an email address. This might not be an ideal way to send form data, but it does not require any extra programming on the part of the developer, and is a cheap and simple option to use.

Form Objects

Form objects come in various shapes and sizes, many of which are customizable. To add an object to your form, click the Insert menu, drag to Form, and select from the submenu.

You will notice in the Properties of each of your form objects, there will be a space to enter a name for that object. It is wise to add unique names to each object in your form; if you do not do this, the data may be difficult to discern upon receipt as no descriptive labels will be attached to each response. So, for example if you add a text field requesting someone's name, you might give that field the name "Name," another field might be "Phone Number," and so forth.

Text Field and Textarea: A text field is a generic text input area, and is one of the most commonly used objects in a form. You can set the width of the text box, how many characters may be entered into the box, and whether it is a single or multi-line text input space. A textarea is simple a multi-line text field.

Button: Adds Submit or Reset buttons to your form. Submit uses the information set up in the main properties of the form (see above) to send the form information; Reset clears all of the form objects so that the user can start from scratch if a mistake is made. Any form where you intend for the user to send information somewhere must have a Submit button. A Reset button is not necessary to include, but can be useful.

Checkbox and Radio Button: Adds either a simple checkbox or simple radio button to a form. When the form data is returned, it will note whether the user clicked the checkbox or radio button On or Off.

List/Menu: Allows the user to choose from options in a popup menu or list view. You can create the popup menu and assign values to it that are displayed in the form results by choosing "List values" from the Properties window. When you have values added, they will appear as part of the Properties window; you can choose to have one value selected as a default when the user views the form, if you like, by setting a value as the Initially Selected one.


Click the + sign to add new items to the list/menu, and click the - sign to remove an item.

File Field: Adds a Browse for file field in your form for uploading files to the server. This may be useful if you are asking for users to include large amounts of text (like an essay or biography) in their form response; adding a File field will let them write the text in another program and attach the file to the form, much like sending an attachment to an email.

Image Field: Allows you to add button icons to a form. Essentially, adding an image field performs the same task as inserting an image from the Insert Menu, but when the image is inside the form as an object, certain Behaviors may be attached to it to add functionality. See the page on Behaviors to more information.

Hidden Field: Hidden fields are usually included in forms to enhance functionality or restrict certain items on the form. For example, you may wish to add a hidden field that reads required="name" to make it so that a the field named "Name" must be filled out before the form can be submitted.

Radio Group: Allows you to create a group of radio buttons where the user chooses one from the list. This is useful for quiz or survey questions where the user might be asked to choose his or her answer from a group of possible responses. As with the List/menu field, click the + to add an item, and click - to remove one.

JumpMenu: Allows you to create a menu with values that, when selected by the user, will "jump" to another web location. For example, if you wanted the user to see a feedback screen after choosing an item from the menu, you would simply assign the appropriate page links or URLs to each value. By default the jump menu will automatically go to the URL when a value is selected; if you check the "Insert go button after menu" item while setting up your menu, the user will be able to go back and change his/her response and click the Go button when ready to go on.

Fieldset and Label: These options add HTML code for labeling and setting up fields. This is a more advanced feature and many users will not see the need to use these items in their forms.

Other Form Creation Tools

For more advanced web-based forms that can be set up fairly easily and provide various degrees of flexibility, you may wish to look at SurveyMonkey or HotPotatoes as alternative solutions. Both tools are available free of cost, and work with both Mac and Windows computers.