Layers
Forms
Frames

DREAMWEAVER FORMS

Internet commerce. Feedback. Personal user info. If you want it, you have to make a form. Forms are easy to make in Dreamweaver. Youll love it. Trust me.

 

CGI

Remember that the actual form is only half of the working process involved in gathering data from your user. To work properly, your form has to be linked to a program on your server that will handle the work of receiving the form data and processing it. That program is called a CGI. The following text about CGIs (in the blue box) is taken from the forms section of the HTML chapter. It would probably be a good idea to read it again.

 

When the user is finished filling out a form, the form is sent to your server for processing. The program that processes your form is called a CGI, which stands for Common Gateway Interface. A CGI is a program, referred to as "common", because it allows itself to be used by different types of computers and operating systems. It doesnt matter if your visitors are using a Mac or PC. Everyone can interact with the CGI on your server.

CGI programs can do many things, such as handle form submissions, search a site, display random images, charge a credit card, submit information to a database, or allow access through password protection.

By the way, you should know that CGI is not a computer language, its a program classification type, CGI just means that the program can be used by multiple computer platforms. CGIs are often written in languages like Pearl and Java.

You can have a CGI custom programmed for you, or you can search the free-script resources on the web. Custom programming can get very expensive, so its usually best to try and find a reputable free script first.

 

Good Free-Script Resource:

http://www.worldwidemart.com/scripts

Good Custom Programmers:

http://www.yvod.com

Good web design course! (self promotion rules)

 

Where are CGIs kept on my server?

CGIs are programs and can be misused by nefarious hacker types. Some servers require you to place all of your CGIs in one folder on the main server called a "cgi-bin". You will probably have to ask your hosting site how they handle CGIs. Most hosting sites allow you to place CGIs wherever you want on your site, but youll often have to change the three letter file extension of the CGI from whatever it is to ".cgi". It is important to thoroughly examine the "read-me" file that should accompany your CGI for any special set-up details.

So, I downloaded a CGI and stuck it on my site. Now what?

Youll have to configure the CGI to work with your site. For example, if you have a CGI that will e-mail you information from a submitted form, youll have to tell it what your e-mail address is. Usually the accompanying "read-me" file will instruct you to open the code and change a few things. You can open code of any type with the Notepad or Simple Text. Use the "Search" or "Find" feature to find what youre instructed to look for. If the "read me" file asks for information you dont know, pick up the phone and call tech support at your hosting site. If theyre rude to you, ask for the manager and complain. Those people are there to help you.

 

Starting a Form in Dreamweaver

If you just had to guess which pull-down menu you would use to insert a form, which one would you guess?

INSERT-> FORM

Youll notice that Dreamweaver will insert a red box fashioned out of dotted lines:

Your entire form must be kept within these red lines. The lines represent the opening and closing <form> tag. If you manage to place a form element outside of the lines, it wont work.

 

Aiming Your Form at the Correct CGI

The first thing youll want to do is make sure that your form will submit itself to the correct CGI when its finished. This will require remembering a little bit of HTML.

 

In the following HTML tag:

<form action="whatever_cgi.cgi" method="post">

 

The ACTION modifier instructs the computer exactly where to send the form information when submitted. Usually the ACTION will direct the form to be sent to whatever CGI is being used to process the form.

 

METHOD is a modifier of the FORM tag that stipulates how the information in the form will be submitted to the server. Will the server use its own resources to get the information, or will the form post itself to the server using the computing power of the users computer? Your two submission METHOD choices are:

method="get"

method="post"

Servers would rather have you do the work. In almost all situations you will use method="post".

 

When building forms in Dreamweaver, you will still have to choose an Action and a Method.

  1. Click inside the form.
  2. On the Properties inspector,
    1. Fill in "Action" with the file path and name of the CGI to be used.
    2. Choose an appropriate method. (almost always "post")

 

Entering and Configuring Form Fields

Now that youve started the form, you need only enter in the form fields. You can build them in a table if you like. Remember that every form field must stay within the dotted read lines.

To enter in a form field:

INSERT-> FORM OBJECT-> Choose a field

 

Naming Form Objects

When you place a form item on the screen youll have to name it. If an item is named youll be able to identify it later when you receive the form results. Dreamweaver allows you to name each object using the Properties palette. Its best to name form objects right away so you dont forget.

 

Text Field

Text Fields are the workhorses of the form industry. They can be used to allow users to submit almost any kind of information, from their name or address, to their favorite brand of chili.

To insert a text field:

INSERT-> FORM OBJECT-> TEXT FIELD

 

Click the Field to configure it.

TextField: This is where youll name the text field. Lowercase and no spaces, please.

Init Val: Allows you to Set the initial size of the text Field.

Password: The only thing that the password selection does is converts typed text to symbols so someone watching over your users shoulder cant see their password. To set up a password-protected site, youll need a password CGI.

 

Button

INSERT-> FORM OBJECT-> BUTTON

This is the "submit" button. It will automatically submit the form to whatever CGI is stipulated in the ACTION field of the <form> tag.

 

Checkbox and Radio Button

The Checkbox and Radio Button are more or less the same. The Checkbox allows for multiple selections for the same question (name), the radio button doesnt.

INSERT-> FORM OBJECT-> CHECKBOX or RADIO BUTTON

In order for a form to submit clear a clear report when it returns results, the form needs to be instructed what each box or radio button means, what its value is. Each checkbox and radio button must be named, but must also have a value. The value is simply what will be returned on your form when a certain button is checked. Values cannot contain spaces.

Configure the Checkboxes and radio Buttons using the Properties palette:

 

Each box/button for a question will usually have the same name, but a different value.

 

List Pull-Down Menu

Pull down lists can be useful for giving users multiple choices without wasting lots of screen space. List menus can be inserted in traditional pull down form, or they can be displayed in a window that allows users to see scroll through choices without any confusing pull down stuff The list will need a name, and each choice will need a human friendly title to display and a value to return when chosen.

To insert a list menu:

INSERT-> FORM OBJECT-> LIST MENU

To edit the list:

  1. Name the list.
  2. Click "List Values on the Properties palette.

 

  1. Fill in as many fields as you like.
    Item Label: This is what will display on the screen
    Value: This is what will be returned on the form if the item is chosen

  1. Hit the to enter another item.

 

File Field

The File Field will allow users to attach a file to the form.

To insert a File Field:

INSERT-> FORM OBJECT-> FILE FIELD

 

Image Field

This feature allows you to use a custom image instead of the normal "submit" button

 

Hidden Field

A hidden Field is a special field used to configure the form in a particular manner. The fields are referred to as "hidden" because they do not show up on the screen. Instead they control things like the page to be displayed after a user submits the form. Usually, hidden fields are custom made to work with certain CGIs. The "read-me" file accompanying your CGI should stipulate which hidden fields should be used. Sadly, Dreamweavers hidden field feature is not all that that useful. Instead, it is easier to just click into the HTML and directly enter your hidden fields. Just make sure that you place all hidden fields in between the opening and closing <form> tag.

 

continue to frames |