This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Creating Forms

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. For more information about form fields, see About Form Fields.

return to topThe 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.
    Insert pane: Forms tab

  2. Select a desired form object

return to topStarting 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 FORMInsert form button
    OR
    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
    OR
    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 dialog box

  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.

return to topInserting 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:

return to topThe Form Field Properties Pane

A form field Properties pane is used, among other things, to assign name-value pairs to form fields. For a definition of name-value pairs, refer to Terminology in the Working with Forms document. 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

  1. 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).
    TextField properties pane

Excellence. Our Measure. Our Motto. Our Goal.