JNCNET Home | Help Files | Tutorials | Creating Forms

Creating a Form:

To add a form to a document:

• Place the insertion point where you want the form to appear.
• Choose Insert > Form or select the Forms category on the Insert bar and click the Form icon.
• Dreamweaver inserts a form

With a page in Design view, forms are indicated by a dotted red outline. If you don’t see this outline, check that View > Visual Aids > Invisible Elements is selected.

In the Document window, click the form outline to select the form, or select the <form> tag in the tag selector, located in the bottom left corner of the Document window.

In the Property inspector’s Form Name field, type a unique name to identify the form.

Naming a form makes it possible to reference or control the form with a scripting language, such as JavaScript or VBScript. If you do not name the form, Dreamweaver generates a name using the syntax formn, and increments the value of n for each form added to the page.

In the Property inspector’s Action field, specify the path to the dynamic page or script that will process the form. You can either type the complete path into the Action field, or click the folder icon to navigate to the appropriate folder containing the script or application page.

If you’re specifying a path to a dynamic page, the path to the URL will look similar to this example: http://www.mysite.com/application_name/process.cfm

In the Method pop-up menu, choose the method that will transmit the form data to the server.

The form Methods are:

• POST Embeds the form data in the HTTP request.
• GET Appends the value to the URL requesting the page.

Default Uses the browser’s default setting to send the form data to the server. Typically the default is the GET method.

Note: that the method you choose may be dictated by the web or application server you are using. Contact your organization’s server administrator for more information.

Do not use the GET method to send long forms. URLs are limited to 8,192 characters. If the amount of data sent is too large, data will be truncated, leading to unexpected or failed processing results. Also, do not use GET method when sending confidential user names and password, credit card numbers, or other confidential information. GET is not a secure method for passing information.

The Enctype pop-up menu lets you specify the MIME encoding type of the data submitted to the server for processing.

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.

The Target pop-up menu specifies the window in which to display the data returned by the invoked program.
If the named window is not already open, a new window with that name opens. The target values are:

• _blank opens the destination document in a new unnamed window.
• _parent opens the destination document in the parent window of the one displaying the current document.
• _self opens the destination document in the same window as the one in which the form was submitted.
• _top opens the destination document in the body of the current window. This value can be used to ensure that the destination document takes over the full window even if the original document was displayed in a frame.

Using the Insert bar: Forms:

Forms are simply containers for form elements; the form boundaries are not visible in the Document window unless View > Visual Aids > Invisible Elements is selected.

Place the insertion point within a form boundary before inserting a form element; form elements found outside form tags do not appear in all browsers. If you attempt to insert a form element outside a form, a dialog box asks whether to add a form tag around the form element; click Yes to create a new form containing the element, or No to insert the element without a form.

Form places a form at the insertion point:

Text Field places a text field at the insertion point. Set the name, size, and initial value in the Property inspector.

Hidden Field inserts a hidden field at the insertion point. Set the name and value in the Property inspector.

Textarea inserts a multiple-line text field at the insertion point.

Checkbox and Radio Button place the corresponding controls at the insertion point. Set the name, value when checked, and initial state in the Property inspector.

Radio Group inserts a group of radio buttons at the insertion point.

List/Menu places a list or pop-up menu at the insertion point. Set the name, type, and list values in the Property inspector.

Note: The term pop-up menu can apply to at least two different things in Dreamweaver. This object inserts a pop-up menu field in a form, to let a visitor choose a value when filling in a form. For information about inserting a graphical pop-up navigation menu.

Jump Menu places a pop-up menu of URLs at the insertion point. Choosing a value from this menu takes the user to the URL. Set the list of values in the dialog box that appears.

Image Field places an image field at the insertion point. Set the name, size, alternative text, and source file in the Property inspector.

File Field places a file upload field at the insertion point. Set the name, size, and initial value in the Property inspector.

Button places a button with a default name and value of “Submit” at the insertion point. Place the insertion point within a form boundary before inserting a button; buttons outside forms do not appear in all browsers. Use the Property inspector to set the name, label, and action.

Label provides a way to structurally associate the text label for a field with the field.

Fieldset is a container tag for a logical group of form elements.

Using Behaviors with Forms:

You can attach behaviors to forms and form objects by using any of the behaviors that appear in the Behaviors panel when the form or form object is selected. The Validate Form and Set Text of Text Field behaviors are available only if a text field has been inserted into the document. When attaching the Validate Form behavior to a form object, you must specify which text field is to be validated.

For example, if you attach Validate Form to the Submit button, you might specify a text field created for “Name” to check that the user entered text in the Name field.

When applying behaviors, you need to make sure that every form object in your document (and every other object) has a unique name. If you use the same name for two different objects, behaviors may not work properly—even if the objects are in different forms.

The two form-specific behaviors are explained below.

• Validate Form checks the contents of specified text fields to ensure that the user has entered the correct type of data.
• Set Text of Text Field replaces the content of a specified text field with the content you specific.

Adding 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. You can also assign other processing tasks that you’ve defined in a script to a button. For example, the form button might calculate the total cost of items selected based on assigned values.

To Add a Form Button:

• Click inside the forms red dotted line
• select Insert >Form Object >Button

Dreamweaver will create the button with submit as the default lable if you do not enter one.

[back to top]

Setting Button property options in the Property inspector:

• Button Name assigns a name to the button. Two reserved names, Submit and Reset, tell the form to submit the form data to the processing application or script, or to reset all the form fields to their original values, respectively.
• Label determines the text that appears on the button.
• Action determines what happens when the button is clicked.

You can design the button to clear the contents of the form in which it appears, to submit the contents of the form, or to do nothing. Selecting Submit Form automatically sets the name of the button to Submit. Selecting Reset Form automatically sets the name of the button to Reset. None means that neither a submit nor reset action will occur when the button is clicked.

Using a client-side JavaScript function to process a form:

The simplest forms use JavaScript or VBScript to perform form processing on the client side (as opposed to sending the form data to the server for processing).

For example, you might have a small form at the bottom of a page that contains only two radio buttons labeled Yes and No, plus a Submit button.

The form action might be a JavaScript function defined in the head section of the document that displays one alert if the user selects Yes and another alert if the user selects No.

function processForm(){
if (document.forms[0].elements[0].checked){
alert('Yes');
}else{
alert('No');
}
}

To use a client-side JavaScript function as the form action:

• Select a Submit button in a form
• Attach the Call JavaScript behavior to the button
• In the JavaScript text box that appears while attaching the behavior, enter processForm().
• Add a processForm() JavaScript function (like the one shown above) to the head section of the document

You can handle many form-processing tasks using client-side scripting, however, you can’t save the data entered by the user or send it to someone else. To save the data or transmit it to another application for processing, you need to use a server-side script or application. Common Gateway Interface (CGI) scripts are the most popular form of server-side scripting mechanisms to process form data. There are several sites on the web that offer free CGI scripts that you can use. The Internet Service Provider (ISP) hosting your site may provide CGI scripts that perform many common tasks such as collecting e-mail addresses, or allowing visitors to send you comments through a web form.

Creating a file upload field:

File fields require that you use the POST method to transmit files from the browser to the server. The file is posted to the address you specify in the form’s Action field.

Note: Contact your server’s administrator to confirm that anonymous file uploads are allowed before using the file field.

To create a file field in a form:

• Insert a form in the page (Insert > Form).
• Select the form. The form Property inspector is displayed.
• Set the form Method to POST.
• From the Enctype pop-up menu, select multipart/form-data

Place the insertion point inside the form outline, then

• choose Insert > Form Objects > File Field
• or click the Insert File Field icon in the Form tab of the Insert bar.
  
  A file field is inserted within the form.

• In the Property inspector’s FileField Name field, enter a name for the file field object.
• In the Char Width field, specify the maximum number of characters you want the field to display.
• In the Max Char field, specify the maximum number of characters the field will hold.

If the user browses to locate the file, the filename and path can exceed the specified Max Chars value.

However, if the user attempts to type in the filename and path, the file field will only allow the number of characters specified by the Max Chars value.

Validate Form:

To use the Validate Form action:

• Choose Insert > Form or click the Form button in the Insert bar to insert a form.
• Choose Insert > Form Objects > Text Field or click the Text Field button in the Insert bar to insert a text field.
  
  Repeat this step to insert additional text fields.

Do one of the following:

• To validate individual fields as the user fills out the form, select a text field and choose Window > Behavior
• To validate multiple fields when the user submits the form, click the <form> tag in the tag selector in the bottom left corner of the Document window and choose Window > Behaviors

Choose Validate Form from the Actions pop-up menu

Do one of the following:

• If you are validating individual fields, select the same field that you have selected in the Document window from the Named Fields list.
• If you are validating multiple fields, select a text field from the Named Fields list.
• Select the Required option if the field must contain some data.
• Choose from one of the following Accept options:
• Use Anything if the field is required but need not contain any particular kind of data. (If the Required option is not selected, the Anything option is meaningless—that is, it is the same as if the Validate Form action were not attached to the field.)
• Use E-mail address to check that the field contains an @ symbol.
• Use Number to check that the field contains only numerals.
• Use Number From to check that the field contains a number in a specific range.
• If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate.
• Click OK.

If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events pop-up menu.

• If you are validating individual fields, check that the default event is onBlur or onChange

If it isn’t, select onBlur or onChange from the pop-up menu. Both of these events trigger the Validate Form action when the user moves away from the field. The difference between them is that onBlur occurs whether or not the user has typed in the field, and onChange occurs only if the user changed the contents of the field. The onBlur event is preferred when you have specified that the field is required.

Inserting tables in forms:

You can design more attractive forms by inserting a table in a form. Use tables to provide structure for form objects and field labels. Tables make it easier to line up choices both vertically and horizontally. When using tables in forms make sure all the table tags are included between the form tags.

Example:

Now you’re ready to insert a table in the Form Document:

1. In the Document window, place the insertion point inside the Form Document ( indicated by a dashed red line), then do one of
the following:

• Select Insert > Table
• In the Insert bar’s Common category, click the Table icon
  The Insert Table dialog box appears

• In the Rows text box, type the disired number of Rows.
• In the Columns text box, type the disired number of Columns.
• In the Width text box, type the disired table width, and then select Pixels in the pop-up menu to the right of the
  Width text box.In the Border text box, type 1 to set a 1-pixel border around the table and table cells ,or 0 for no border

3. Click OK
Dreamweaver inserts the table in the document.

4. Save your document by doing one of the following:

• Select File > Save
• Press Control+S (Windows) or Command+S (Macintosh)

[back to top]