Building Forms in Dreamweaver with The Computer Gal: Missoula, Montana

The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

Forms Step 1

You can add a form to your page using the menu: Insert -> Form, or by choosing the Form palette on the Form Insert Palette. Notice that the defined form area has red/orane line around it. This line won't show up on your site, but shows you the form area in Dreamweaver.

There is a form below this text, but you can't see the outlines for this form in your browser because they are "invisible" elements. Having a "form" means that the tags: <form> </form are on your page.

It is very important to understand that each item you add to a form must be inside the form area, or is it considered another form. Also, notice that the form stretches out the whole width of its container. If it is loose in a page, it stretches across the whole page. If the form is inside a table cell, it stretches to the whole width of the cell.

Forms Step 2
You can put tables, graphics and the other items you use on a page inside the form tag.

Forms Step 3
Another way to add the form tags to your page is to click a form element button instead of the form button. The program will then ask you if you want to add the form tags. If you click yes, you will get both the form element and the surrounding from tags. This method has a side effect: every time you add a new element, you will be adding a new form. Each form has its own submit button. That means that your viewers will have to click on Submit for each item they enter, and each time your databse enters the item, it will make a new record with only one item in it.

These two radio buttons are in different forms.

Textboxes

Textboxes are the most common form element because they allow a user to enter type. A textbox should have two parts: the label and the textbox. The textbox below has no meaning because there is no explanation of what the user should enter.

One way to organize your form is to put a table in the form. One column can be used for labels and the other for the textboxes.

First Name
Last Name

Textboxes have several properties

The Name property is very important. Most often the information from a form is added to a database. The program that adds the information to the database needs to know which information goes into which field in the database. The labels in the example above help the user, but the information isn't passed back to the server.

When you give a textbox a name, that name value goes back to the server and tells the program which piece of information it is receiving. Although the system can be made to work if your textbox has a different name than the database field, it is easier for you to keep track of if you name them the same.

Width and maximum characters. Width affects your layout. The size of the textbox on the screen is set with the width property. However, you may want to allow your user to type more characters than the box is wide. This is done with the maximum characters property.

Set your maximum characters to the smallest size that is reasonable for that type of information.