• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 13. Creating Forms > Building Your Form

Building Your Form

Before adding individual fields, you must place a form on the page. The form will contain fields into which users enter information, and it will specify what should be done with the data. In this exercise, you will create the form area.

Open the myform.htm document from the Lesson_13_Forms folder. Position the insertion point below the text “Enter our drawing for a free adventure trip” and choose Insert > Form.


You can also insert a form by clicking the Insert Form button from the Forms category in the Objects panel. Select the Forms category by clicking the down-arrow at the top of the panel and choose Forms from the list.

Red dotted lines visually define the form area in the document window; that area is located between the <form> and </form> tags in the code. These red lines are invisible elements that are only visible in Dreamweaver; when you view the page within a browser, there will be nothing to mark the form area. These red lines are not draggable. The size of the form area depends on what you place inside the form, and it will expand as much as necessary to accomodate the contents.


If invisible elements are not turned on, a message box appears. 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 will not see the warning message.

Select the form by clicking the red dotted line.

The property inspector changes to display form properties. There are several options on the property inspector.


If the property inspector is not visible, choose Window > Properties.

Form Name lets you give the form a name if you want to control it with a scripting application such as JavaScript. Dreamweaver assigns generic names automatically in a numeric order: form1, form2, etc.


Because you may not have access to a CGI script while you complete this lesson, the following information is presented as reference material only. You should leave the Action text box empty and not change the Method.

Action tells the browser what to do with the form data. It specifies the path or URL to the location and name of an application (usually a CGI script) that will process the information when the user clicks the Submit button. CGI scripts are located on the Web server that processes the data sent by a form.

Method defines how the form data is handled: GET, POST, or Default. Data sent by a form is a continuous string of text from the information typed by the user. GET appends form contents to the URL specified in the Action text box. GET is not a secure method of transferring data, so it should not be used for sensitive information such as credit card or social security numbers. Usually you'll use the POST option. POST sends the form value in the body of a message. Default uses the browser's default method, which is usually GET.

Talk to your ISP (Internet Service Provider) or Web administrator to get the information you need to set the Action and Method options. You won't need this information in order to complete this lesson.

Place the insertion point in the area between the red dotted lines. Click the Insert Table icon from the Common category of the Objects panel. In the Insert Table dialog box, make the table 8 rows, 2 columns, and 600 pixels wide. Set the border to 0, the cell padding to 5, and the cell spacing to 0. Click OK.

The table will improve the layout of the form and make 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 must completely contain or be contained by the form.

Select the top four cells in the left column. From the Horz pop-up menu of the property inspector, choose Right to right-justify all four cells.

These four cells will contain the text that label the form fields. You will add the labels to the table as you add the form fields, beginning with the first cell in the next exercise.

Merge both cells in row 5. Repeat this step for rows 6, 7, and 8.

The first four rows each have two cells. The last four rows now have a single cell each. Your document should now look like the example that follows.

Save the document.

Leave this file open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint