Skip to main content

(Archives) Adobe Dreamweaver CS3: Creating Forms

Last updated

This article is based on legacy software.

Forms are often used to request comments about a website, submit an application, or place an order. They might also be used for an online quiz or to request information from friends or students. A form is an element in a web page that contains form fields, which are used to collect information from users. Form fields allow users to enter information, generally by entering text in fields, selecting checkboxes and radio buttons, or selecting an option from a menu of choices. Users submit their information by clicking a SUBMIT button.

The Forms Bar

To help you create your form faster, Dreamweaver provides a Forms toolbar. The Forms toolbar, accessed from the Insert toolbar, allows you to insert a form field quickly without having to use the Insert menu.

  1. On the Insert toolbar, select the Forms tab.
    The Forms toolbar appears.

  2. Select a desired form object.

Starting the Form

Inserting the First Form Field

A form field is surrounded by a red dotted line, this is the form boundary. Form objects must lie within a form boundary in order for the information the fields record to be sent and stored in a proper manner. Once the form field has been placed within the form boundary, you must assign a name-value pair to the form field. This can be done in the selected form field's Properties pane.

  1. Place the insertion point in the page where you would like to insert a form.

  2. From the Forms toolbar, click Form. form
    From the Insert menu, select Form » Form.
    A blank form field, seen as a red dotted box, appears.

  3. From the Forms toolbar, select the desired form field.
    From the Insert menu, select Form » the desired form field.
    The Input Tag Accessibility Attributes dialog box appears. For more information on the options in this dialog box, refer to Forms: Input Tag Accessibility Options.
    input tag accessibility attributes

  4. In the Label text box, type an appropriate and descriptive label.
    The Label is the text that identifies the form field for users.

  5. Under Style, make the desired selection.

  6. Under Position, make the desired selection.

  7. (Optional) In the Access key text box, type a letter.

  8. (Optional) In the Tab index text box, type a numerical value.

  9. Click OK.
    NOTE: If you are attempting to place a form field outside of a form, a Dreamweaver dialog box appears asking if you would like to insert a form tag.

  10. Click Yes.
    The form object appears inside the form boundary.

Inserting Subsequent Form Fields

Inserting form field objects involves not only the insertion process, but also assigning a name-value pair to the form object. For more specific information on a form object, refer to the appropriate document:

The Form Field Properties Pane

A form field Properties pane is used, among other things, to assign name-value pairs to form fields. The form field Properties pane can be accessed by selecting a form field or form object (e.g., check boxes, radio buttons, text boxes).

Each form field has its own form field Properties pane (e.g., viewing the form field Properties pane for a text field will yield the TextField Properties pane, with properties specific to text fields). Although each form field has different properties, the process for viewing the form field Properties pane is the same for all of them.

Viewing the Form Field Properties Pane

Select the form field.
The form field Properties pane corresponding to the chosen form field appears.
NOTE: The form field Properties pane that appears depends on which type of form field or form object you select (i.e., the TextField Properties pane appears if you select a text field).


Was this article helpful? Yes No

View / Print PDF