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.
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.
-
On the Insert toolbar, select the Forms tab
The Forms toolbar appears.
- 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.
-
Place the insertion point in the page where you would like to insert a form
-
From the Forms toolbar , click FORM
OR
From the Insert menu, select Form » Form
A blank form field, seen as a red dotted box, appears.
-
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
-
In the Label text box, type an appropriate and descriptive label
The Label is the text that identifies the form field for users. -
Under Position, make the desired selection
-
OPTIONAL: In the Access key text box, type a letter
-
OPTIONAL: In the Tab index text box, type a numerical value
-
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. -
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. 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
-
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).
