Up until now you've been able to learn how to use HTML without knowing much about computers or programming. For FORM objects, you will now have to begin learning more about how a website is put together. You will no longer be able to test your HTML pages without being connected to a website.

You will have to know something about programming to be able to create the scripts required to process the information being sent to the Web Server. Many HTML books lightly refer to this process as if everyone has the knowledge to get started. We beg to differ.

Nevertheless, we will try to bring your knowledge up to the point where you will understand all of the required pieces to get started.

What is a FORM?

A form looks like this:

It is used to gather information from a user and send it to a location on the internet to be validated, stored, manipulated, anything else you wish. This processing can include an infinite number of things from entering the information into a database, to sending e-mails, to processing credit card information, or all the above.

What is CGI?

CGI,CGI, CGI, if you've done any exploration into processing FORMS you've seen this little acronym, CGI. If you've read our lesson on Terminology, you've read that CGI is only a description of a "type" of language that can act as a Common Gateway Interface between a web server and the user (you and I) to process incoming information. Don't make the mistake of referring to CGI as a language in a job interview, surely you would not get the job (sorry for calling you surely).

What components are required?

There are two main components which take a series of applications to set up and test. There is the HTML web page that you create to lay out the fields and labels, and there is the CGI program (or script as it is commonly referred to) that is already on the server which is used to process the information once the user presses the SUBMIT button.

Now we have to take a break and explain that our lesson will start to mention specific tools. We will try to be as non-platform specific as possible, but nevertheless, we will mention specifically the applications that we use to complete this job.

To help you better understand the CGI process, here is an illustration:

At STIMULUS, we use Macintosh computers to do almost all of our development. We test our sites with PC clones running Microsoft Windows operating system to make sure that the graphics and page layout come out correctly.

In order to maintain the various parts of the CGI process, we use various applications that best suit our needs. To closely review, we use:

Macintosh:

PC NOTE: If you are familiar with telnet applications on the Windows platform, you may substitute other applications where you see fit. Typically Windows users are forced to know more about their computers to set them up and keep them running, and, in this case, you may know much better ways to conduct the above noted steps. We are certainly open to suggestions.

That's great information, but what do I do with all these applications?

Now that we've told you about a bunch of applications that you don't know what to do with, lets cover in detail the various components required to do FORM/CGI programming.

The initial required step is to create an HTML page that contains a FORM that will gather the information from the user. Laying out a FORM on an HTML page is an art and several companies have yet to figure out the most aesthetically pleasing method of doing this. Let us make a recommendation that will no doubt start you out ahead of all the rest.

The secret to beautiful looking forms are TABLES! They help everything lay out nice and aligned. Without TABLES your FORM will no doubt look hideously skewed such as:

Name:
Address:
City:
State / Province:
ZIP Code:
Country:

If you use a TABLE to lay out your FORM, it will look like this:

If you need to review how to do TABLES, see our lesson on Advanced HTML.

Field Types

Now, lets look a little closer at the FORM object. There are three basic parts to a FORM object.

• Field Labels
• Fields
• Buttons

These elements allow the user to enter their data and then press a button that sends the information to the web server. Now there are only a couple ways to label a field, so that part isn't hard to understand. You just type text like you normally would in any HTML document next to the field objects.

Now onto field objects. There are several different types of Fields that you can offer the user. These are:

Basic Field - is a very simple HTML object that accepts a single line of information, like a name, address, city, state, or zip.

Basic Field:

Radio Buttons - are used to choose between a group of choices. Like what type of credit card, VISA, MasterCard, or American Express.

Credit Card:
Visa
MasterCard
American Express

Checkboxes - are used to choose between 2 different choices. Like "Send me Junk Mail." One choice is to check the box. The other choice to uncheck the box.

YES! Sign me up for a scam!

Single-Line Lists (aka, Popup List, Pulldown List) - are used to select one choice from a list of multiple choices. Like a the credit card idea.

Visa MasterCard American Express

Multi-Line Lists - are used to allow the user to select multiple choices. Like in the case of selecting multiple sources of information.

Postcard of Junk mail Envelope of Junk mail Box of Junk mail

Okay, I've laid out my form, now what?

Once you've laidout your form, you need to provide a mechanism to allow the user to send the information to you. You should also provide a method to reset the FORM fields to blank. This will help the user from having to blank out all the fields manually.

This brings us to the next element of a FORM, buttons. There are two types of buttons. Buttons that send information to CGI programs and buttons that reset the FORM values (being either text or numbers or choices in a list or checkbox). Since we already know what the RESET button does, lets get into the buttons that SUBMIT information to the CGI programs.

For clarity, a SUBMIT button looks like:

and a RESET button looks like:

Not much physical difference as you can see, but they indeed do different things. If you would like to test the RESET, go ahead. Fill out some information in one of the fields, and press the RESET button, you will see the values reset to empty.

Now to go any further, we will need to get into the technical specifics of how the form submission occurs. Since this will be an in depth discussion, this will be presented in our lesson on CGI Process.