Building Your Form

Before you add elements such as individual fields and buttons to a page, the form that contains those elements must be created. Forms act as the containers for fields, buttons, menus, and other objects that visitors can use to enter or select information; forms also specify what happens with the data when it is submitted. In this exercise, you will create the form area.

1.	Open the training.html document from the Lesson_11_Forms/Training folder. Position the insertion point in the blank paragraph below the text Yoga Teacher Training Certification Program Application. Click the Form button in the Forms category of the Insert bar. Tip You can also insert a form by choosing Insert > Form > Form. The area occupied by the form is identified visually by red dotted lines in the Document window; that area is defined by the <form> and </form> tags in the code. These red lines are invisible elements that are displayed only in Dreamweaver; when you view the page within a browser, there is nothing to mark the form area. These red lines are not draggablethe size of the form area depends on what you place inside the form, and it expands horizontally to the full extent available and vertically as much as necessary to accommodate the contents. The form you placed on the page extends to occupy the entire width of the container, whether that is a div, a table cell, or the page itself. Note If invisible elements are not turned on, a message box appears, letting you know that you won't be able to see the form. Click OK to close the message box and then choose View > Visual Aids > Invisible Elements so you can see the red dotted boundary of the form. If invisible elements are turned on, you do not see the warning message. The Form delimiter box must also be checked in the Invisible Elements category of the Dreamweaver preferencesit is checked by default. You can place multiple forms on one page; however, it is not possible to nest a form inside of another form in HTML. Because of this restriction, Dreamweaver prevents forms from becoming accidentally nested by disabling the insertion of one form into another form. The option to insert a form will not be dimmed, but no form is inserted if you attempt to place one form inside of another. If form tags have been inserted manually within a form, Dreamweaver highlights the tags that are incorrect to bring the error to your attention.
2.	Select the form by clicking the red dotted line. Tip You can also use the tag selector to select the form if the insertion point is inside the form. The Property inspector changes to display form properties. Note If the Property inspector is not visible, choose Window > Properties.
3.	Replace the default name form1 in the Form name text field on the Property inspector by typing training. Dreamweaver generates generic names for forms. The names automatically increment numerically each time you create a form: form1, form2, and so on. All form names must be unique and use no special characters. Form names are important identifiers, particularly if you have more than one form on a page or if you are using a database for information that is collected or requested via the form. Form names are also used to control forms through the use of scripting languages such as JavaScript.
4.	Place the insertion point into the form and choose Insert > Table. Set the table to 3 rows and 1 column. The table width should be 90 percent. Set the border to 0, cell padding to 0, and cell spacing to 10. Choose None for the Header and then click OK.

The table improves the layout of the form. Using tables makes it easy to align text or images with the form fields to label them.

You can place a table inside a form or you can place a form in a table, but the table in question must completely contain or be contained by the form.