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

Lesson 11. 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 for users to enter information into, and it will specify what should be done with the data. In this exercise, you will create the form area.

Open the lights_quiz.html document from the Lesson_11_Forms folder. Position the insertion point on the blank line below the text “Test your knowledge about lighthouses…” and click the Form icon from the Forms tab on the Insert bar.


You can also insert a form by choosing Insert > Form.

Red dotted lines visually identify the form area 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 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 accommodate the contents.


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 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 field empty and you should 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 or a dynamic page) 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 field; that information is therefore visible in the browser's address bar. 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. The GET method can send only a limited amount of information because restrictions are often imposed on the lengths of URLs by browsers and servers. This limitation can vary, so the GET method is also not a good choice for forms in which the visitor may have entered a lot of information—long forms will lose any information exceeding the size or length restriction. The POST method, on the other hand, is capable of sending far more information and is more reliable and secure. It is the most common method used in scripts to send form data. POST uses an HTTP request to send 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 to work with the scripts used on your server. 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 Insert bar. In the Insert Table dialog box, make the table 12 rows, 3 columns, and 600 pixels wide. Set the border to 0, the cell padding to 5, leave the cell spacing at 0, and 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.


Typing or verifying that a “0” is placed in the cell padding and cell spacing text fields is different from not having any value in those text fields. If there is no value, then the default of 1 pixel is used—even though the number 1 does not display in the fields.

Click in the first cell of the top row and use the W text field on the Property inspector to set the width to 284 pixels. Place the insertion point in the center cell of the top row and set the width to 2. Set the width of the third cell of the top row to 284 pixels.

Defining the widths of columns before putting text or objects into them can help hold the size of the cells while you insert the necessary objects.

Place the insertion point in the left cell of the first row. Insert spacer.gif from the Lesson_11_Forms/Images folder and set the width of the image to 284 pixels and the height to 1 pixel. Insert spacer.gif into the center row, setting the width of the image to 2 pixels and the height to 1 pixel. Insert spacer.gif into the right cell, setting the width of the image to 284 pixels and the height to 1 pixel.

These spacer gifs will hold the size of the table cells to the desired dimensions. Spacer gifs are often needed to force table cells to hold to their proper dimensions. Without the spacer gifs, cells may collapse or expand depending upon the text they contain—even though you have set their widths. The size of the spacer gifs accounts for the cell padding that you applied to the cells. There will be 5 pixels of cell padding applied to each side of every cell. The total size of the left and right columns then will be 294 pixels each (284 for the spacer gif, plus 5 pixels of cell padding on the left, plus 5 pixels of cell padding on the right).

Select the cells in the left column of rows 2, 3, 4, and 5. From the Horz pop-up menu of the Property inspector, choose Right to right-justify all four cells. Select corresponding cells in the right column and choose Left from the Horz pop-up menu.

These four cells on the left will contain the text that labels 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. The four cells on the right will contain the form fields themselves.

Merge all three cells in row 6. Repeat this step for rows 7, 8, and 9.


You can merge the cells as you did in Lesson 4 by selecting the cells and pressing the Merges selected cells using spans button on the lower left of the Property inspector, or by choosing Modify > Table > Merge cells.

The first five rows have three cells each. Rows 6 through 9 now have a single cell each.

Select cell rows 10 through 12 in the left column. From the Horz pop-up menu of the Property inspector, choose Right to right-justify all three cells. Select the cells in the right column of rows 10 through 12 and choose Left from the Horz drop-down menu.

These cells will also contain text labels on the left and form fields on the right.

Save the document.

You have now completed the layout of the table that will present your form. The center column will act as a spacer column to prevent the text labels and the form fields from being too close together. Your document should now look like the example shown here.



Not a subscriber?

Start A Free Trial

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