Forms - The interface to a CGI program

As noted earlier, probably the nicest aspect of CGI is the fact that the bulk of the UI has been written for you. All of the complicated stuff involving text boxes, buttons and lists are built into Netscape. All you have to do is write some HTML that points to where these built in functions should go. Just like when you want to put an image into a web page, you don't have to worry about decoding the actual image, all you do is slap an <IMG> tag in your document and magically it appears. Netscape provides the same sort of functionality for user input functions.

The <FORM> Tag

The most important tag in the hierarchy, <FORM> lets Netscape know that the HTML that follows is going to be a form and </FORM> shuts it off as expected. The form tag has two main attributes, METHOD and ACTION.

METHOD can be either POST or GET. We will focus on POST because while it is the more difficult of the two methods to understand, it is superior. POST allows you to eliminate the nasty characters passed in a URL, which is very prone to user error. With the GET method, the output from the form is passed in the URL, and as I'm sure you have seen, is quite ugly. Plus, having users mess with that data is not only a serious problem with bugs, but with security as well.

ACTION is the URL pointing to the actual CGI program. This is where the server will send the input given by the user, so make sure your program expects the right kind of input. This is very easy to do given the fact that the server stuffs the information into environment variables.

Here is an example:

You will notice from the URL that the program resides in a sub-directory called usr-bin. This is very important, the web server MUST know where the CGI programs live and pointers to them have to exist within the server document space. (The area that the web server can see). The server must also be told specifically where CGI programs are located, or alternately, that they have a special suffix (like .cgi). If you just try to write a program and point a form to it, it will not work unless the server is "aware" of the CGI program using one of the above methods.

Text Entry Boxes

Two main types of text entry boxes are used, INPUT TYPE="text" and TEXTAREA. This is what INPUT TYPE="text" looks like:

As you can see, a simple box is produced that is capable of user input. A user clicks the mouse in the box, and can type in information. This type of entry box is probably the one that is used the most. The syntax of this entry box in HTML is:

INPUT TYPE="text" let's Netscape know that his is a text entry box. You name it using the NAME attribute. The NAME attribute is stuffed into the environment variable and is associated with the input given in this box. It is worthwhile to name your input boxes similar to the input expected. So if you have an input box that is supposed to be an email address, then you should probably name it email, i.e. NAME="email".

The SIZE attribute is the length in characters that the box displays on the screen. In this case, the length of the box is 30 characters wide. Go ahead and type in 30 characters, you will see that it just fits. This is useful for giving the user an idea of the length of something to enter here. It doesn't make sense to have a box that is only 4 characters wide when you expect them to input their email address, however, it also doesn't make sense to have an input box 30 characters wide when you are expecing a zip code or social security number. Use your best judgement.

The MAXLENGTH attribute determines the absolute amount of data that a user is allowed to enter. This is very important in your scripts and the size that you assign here should match with the length of the variables you give in your CGI program, otherwise strange things can happen. If you give a size of 50 and your program expects something that is only 30 characters long, your program may overwrite memory locations or worse, crash.

In this example the SIZE and MAXLENGTH attributes are the same, Netscape will emit an audible beep when a user tries to enter in more than 30 characters of data. Try it in the above example.

Another method of getting textual input from the user is to use the TEXTAREA form element. TEXTAREA is useful for multi-line input, such as the body of an email message. For example:

The tag for the above text box is:

Similar to the INPUT TYPE="text" attribute, the NAME portion of this tag is used to name the input stored in the environment variable that your CGI program is going to read, so name it appropriately.

ROWS refers to the physical rows displayed, and COLS is the number of columns, in characters. MAXLENGTH should be greater than or equal to the multiple of ROWS and COLS. In this case, 60x4=240, and clearly 2048 is larger than that. If a user starts typing beyond what can be displayed, the text area box scroll bars will become active and allow the user to move around within the box. Try it out in the above example. Kind of nice not having to build that functionality into your program!

Buttons

Two very important types of buttons are the INPUT TYPE="submit" and INPUT TYPE="reset" buttons. These buttons look like this:

And the HTML that defines them is:

VALUE is the string that is displayed on the face of the button, and can be whatever you like. The default is Submit Query, which is a little terse so I would advise using something different.

Other button options include the types that you can click on to "choose" certain values from a list. Like so:

These are radio buttons: These are check boxes:

Radio One Check One

Radio Two Check Two

Radio Three Check Three

Radio Four Check Four

The difference between radio buttons and check boxes should become clear if you experiment clicking on their values. Check boxes are used to provide a user with the option of choosing multiple values at the same time. Radio buttons only allow one choice in a set to be clicked. Click on the above buttons to see it in action. The tag that defines a radio button is:

<INPUT TYPE="radio" NAME="value" VALUE="Four">Radio Four

and the similarly for check boxes:

<INPUT TYPE="checkbox" NAME="value" VALUE="Four">Check Four

The TYPE field specifies the type of button, either radio or checkbox. The NAME attribute has the same functionality as it did with the text boxes, it is the name of the value stored in the environment variable that identifies the variable. So what does the VALUE attribute do? VALUE is the actual data that gets stored when passed to the server. For example you might have a choice like the following:

The HTML for which looks like this:

<INPUT TYPE="radio" NAME="choice" VALUE="Yes">Yes
<INPUT TYPE="radio" NAME="choice" VALUE="No">No

So that when a user chooses one or the other, the correct VALUE is stored in the variable "choice" once the submit button is pressed.

You can specify a default value or values to be "checked off" by appending the CHECKED attribute onto any radio button or check box tag. Like so:

You will notice that "No" has already been selected.

Lists

There is only one type of selection list available, but it has many options as to what it should look like and what values it passes to the CGI program you want it to have input to.

The simplest list, a drop-down list, looks like this:

Again (whoo hoo isn't this fun yet?) the HTML looks like this:

<SELECT NAME="cookies">
<OPTION>Beebler
<OPTION>Snoreo
<OPTION>Snackpoors
</SELECT>

The NAME attribute names the variable parsed by your program and the option parts of the selection list are the values that are passed into the named value.

By adding a SIZE attribute to the SELECT tag, you can increase the number of options that are shown at the same time:

The HTML for the above list:

<SELECT NAME="cookies" SIZE=3>
<OPTION>Beebler
<OPTION>Snoreo
<OPTION>Snackpoors
</SELECT>

Sometimes it is a pain to parse an option that is passed to a CGI program, and it can even be a waste of processor time to do many man string comparisons. You can send your CGI program a VALUE in place of the actual string that is show in the list. Example:

The HTML for the above list:

<SELECT NAME="cookies" SIZE=3>
<OPTION VALUE="1">The Beebler Company
<OPTION VALUE="2">The Snoreo Company
<OPTION VALUE="3">The Snackpoor Company
</SELECT>

That way, it is a simple matter to write code that can understand 1,2,3 as the choices instead of "The Beebler Company" which would take too long to parse. Additionally, it allows for better descriptions of your list choices, which the user will appreciate.

Using Tables to make your forms look organized

In one of the above examples I presented a set of radio and check boxes together. I embedded them within a table to make them easier to read. When you design your forms, try to make all of your choices fit on one page. If you need to use tables to do it, I would recommend doing so. Your pages will look professional. Here is the HTML with the table elements added, feel free to copy it:

<TABLE WIDTH="70%">
<TR>
<TD WIDTH="50%">These are radio buttons:</TD>
<TD WIDTH="50%">These are check boxes:</TD>
</TR>
<FORM>
<TR>
<TD><INPUT TYPE="radio" NAME="value" VALUE="One">Radio One</TD>
<TD><INPUT TYPE="checkbox" NAME="value" VALUE="One">Check One</TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="value" VALUE="Two">Radio Two</TD>
<TD><INPUT TYPE="checkbox" NAME="value" VALUE="Two">Check Two</TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="value" VALUE="Three">Radio Three</TD>
<TD><INPUT TYPE="checkbox" NAME="value" VALUE="Three">Check Three</TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="value" VALUE="Four">Radio Four</TD>
<TD><INPUT TYPE="checkbox" NAME="value" VALUE="Four">Check Four</TD>
</TR>
</TABLE

[ Next | Back | Topics ]

These are radio buttons:	These are check boxes:
Radio One	Check One
Radio Two	Check Two
Radio Three	Check Three
Radio Four	Check Four