Using CGI on the America OnLine Server
to create forms for guestbooks, questionnaires, etc.


Tools:

You must use a text editor or word processor that allows you to save as ".txt" or ".html" type file to create these files. You cannot use Personal Publisher or AOLPress as they automatically add tags to a page to make it work and you don't want those tags added to these files.

Most of the code is not case sensitive, however there are, for some strange reason certain parts of it that seem to be....... like for instance the "r" in the required tag will not work with an upper case "R". So because of that and the fact that it is easy to mistype a code, you might want to cut and paste from this tutorial until you feel confident. Keep in mind that you cannot copy from a view of the source code of this page because extra characters have been added here to force this page to display the bracketed tags.

Also remember that these instructions work with pages uploaded to the AOL server. Other servers, such as GeoCities and Tripod may use a different method to process CGI.

YOU WILL NEED TO MAKE 3 FILES:



You can name these files what ever you want, however :
and whatever name you choose to fill in that blank with must be the same for the template and the data file.

After these 3 files are created they should each be uploaded to your MYPLACE file. Be sure to check the box to upload them as ASCII files rather than image files.

CREATING YOUR FORM:

This will be an HTML file. It will start with:
<html>
<head>
<title>your title here</title>
</head>
<body bgcolor=FFFFFF text=000000 link=0000CD vlink=00FFFF>
<form action="/cgi-bin/guestbook/your screen name here/"______.html" method="post">

Note that in the BODY TAG you can use whatever colors that you want and can even add to this a background image if you like. Below the BODY TAG you may also add a FONT TAG to denote a special font or size, or a EMBEDED SOUND tag to add a midi sound. In the FORM TAG you will substitute in your own screen name and where the blank line is you will put the name of your file.

Now you will add INPUT TAGS to your form:
INPUT TAGS can be text, radio, checkbox, button, image, submit or reset devices. Following is an explanation of each of these. You may choose which you want to use:

  • Text Input:
    This will ask the user to type in text which will be displayed in the data file. It might look like this:

    Your name: <input type=text name="name" size=30>

    That would tell the browser to create a textbox 30 characters in length, and name the textbox "name". Whatever the user types in will become a substitute for "name".
    Another example might be:

    Your email address: <input type=text name="email" size=30>

    Here the user would be able to type in his email address in the displayed box. You may have as many of these as you want, just change the value in the "name" attribute for each one. And you may change the value of the "size" attribute to reflect the size of the box that will be displayed. You will want to separate each of these tags with <br> tags and you could even center them on the page or use TABLE TAGS to accommodate the shifting of everything on the page over to the right a bit for the use of a bordered background.

  • Radio Buttons Input:
    Radio buttons are small circles of which users may check one to make a choice. Here is an example:

    <input type=radio name="sex" value="male"> MALE
    <input type=radio name="sex" value="female" checked> FEMALE

    This example would allow users to choose male or female, but not both. The checked attribute goes in whichever radio button you want checked by default. In this case its the one for female. Note that both radio buttons have the same "name", but the "value" is different in each.

  • Checkboxes Input:
    Checkboxes are similar to radio buttons except each has a different name. The user can choose one, all, none, or several on your form. An example:

    What sports do you play?<br>
    <input type=checkbox name="sport1" value="soccer"> soccer
    <input type=checkbox name="sport2" value="baseball"> baseball
    <input type=checkbox name="sport3" value="tennis" checked> tennis

    The user would be asked to check any of the boxes that apply to him. The tennis box has the default check.

  • Select (drop-down) Listbox:
    This device makes a dropdown box with several choices to choose from by clicking on one to highlight it. Note that this is not to be confused with the Java Script that looks like this and is a device to transport a user to another page of his choice. There is no value=" " attribute for this type of input. The text that you put after each <option> tag will be the text filled in by the server and displayed as the user's answer. Here is an example:

    What sports do you play?<br>
    <Select name="sport">
    <Option> soccer
    <Option> baseball
    <Option> tennis
    </Select>

  • Textarea Input:
    Textarea provides a big box where users can enter lots of text, like a message in a guestbook for example.

    <textarea name="comments" rows=6 cols=60 wrap> </textarea>

    You can make the name anything you like, and you can change the size by changing the rows and cols (columns wide). Wrap is there to tell the browser to wrap the text into the textbox. If you want any default text, you would put it between the textarea tag set.

  • Submit and Reset Buttons:
    Buttons, images, submits and resets are all done with this tag. Just change the type= attribute to which ever one you want to use. Submit is required, the others are optional.

    <input type=submit value="Submit">
    <input type=reset value="Reset">

    Note that value= will be what you want written on the buttons. On the submit button you could say instead "press to send".


Now you might want to add some HIDDEN INPUT TAGS .
These go right after the FORM tag and they do not show up on your page but rather they determine how your content will work. Some examples are:

  • <input type=hidden name="Allow HTML" value="yes">
    Add this tag to allow users to put HTML in the comments on your form. For example when someone wants to leave an image or banner or hyperlink in your guestbook.

  • <input type=hidden name="ResponsePage" value="http://____________">
    Add the ResponsePage tag to indicate what page you want the browser to transport the user to after they submit the form. If you do not specify a ResponsePage, then the AOL will, by default, transport users to a simple page that says THANK YOU. You might want to fill in the blank with the URL of your own thankyou page, or just use the URL of the page that they came from originally before getting the form to fill out.

  • <input type=hidden name="required" value=_______,__________,__________">
    This tag allows you to make one or more fields on your form required so that the form will not process unless that field is filled it. In the blanks after value= you would list the field names you want to include. The name would be whatever was in the name=" " property on the input tag. Note that there is no space between the names, just commas. Also note that this is one of those case sensitive tags I mentioned earlier. For some reason the "r" in required MUST be a lower case "r".

  • <input type=hidden name="Notify" value="yes">
    This tag will send you an email to your AOL screen name whenever someone submits a form.



    At the bottom of your FORM you will need to add the close tags:

    </form>
    </body>
    </htlm>

    CREATING YOUR TEMPLATE:

    You will name your Template file the same name as the Data File that you will be making later, except it will have the extension .gbt on it. This file does not have any <html>, <head>, <title>, etc. tags or the closing tags for these either. It is just a list of tags that serve as markers that get filled in with the appropriate form data. All of the inputs that were listed in your form must have a corresponding tag in the Template.

    For example if your FORM looked like this:

    <html>
    <head>
    <title>My Guestbook</title>
    </head>
    <body bgcolor=FFFFFF text=000000 link=0000CD vlink=00FFFF>
    <form action="/cgi-bin/guestbook/ladybug/book.html" method="post">
    <input type=hidden name="ResponsePage" value="http://members.aol.com/ladybug/index.html">
    <input type=hidden name="Notify" value="yes">
    <center>Ladybug's Guestbook</center><BR>
    Your name: <input type=text name="name" size=30></br>
    Where are you from: <input type=text name="home" size=30></br>
    Your email address: <input type=text name="email" size=30></br>
    Comments: <textarea name="comment" rows=6 cols=60 wrap> </textarea> </br>
    <input type=submit value="Submit">></br>
    <input type=reset value="Reset"></br>
    </form>
    </body>
    </html>

    Then your TEMPLATE would look like this:

    submitted on: #date# at #time#
    By: #name#
    From: #home#
    email: #email#
    Comments: #comment#
    <hr>

    Notice that it is very simple...none of the usual HTML tags. It has an optional date and time field. The browser will fill these in automatically. Now notice that all the input tags from your FORM that asked the user to fill in something has a corresponding tag in the TEMPLATE and the "names" are the same in both files, and those names are set on both sides by pound signs (#). A <hr> (horizontal rule) tag is added at the end so that it will separate each of the entries. You could use a bar image instead if you like. The size of the Template file is limited to 100,000 bytes. The size of the DataFile is limited to 1,000,000 bytes. An email message will automatically be sent to you when it is 90% full and when the size limit is reached, attempted new entries will be discarded and an error will be returned to the user.

    CREATING YOUR DATAFILE:

    You are not really required to make this file. If you don't make it, then AOL server will automatically make one for you. But you will want to make it yourself so that you can put your own background, colors, graphics and link-back on it! This file starts off with the <html>, <head>, <title>, </title>, </head>, and <body> tags.....but there are no closings for these tags at the end of the file. That is because this is an open ended file. The server will continue to add to it as people submit data on your form.

    So on this file add your color and background choices to the <body> tag. Keep in mind that this is the page people will see when they view your guestbook or whatever. Add any embeded sound tags, special fonts, heading at the top, or other text you want and any links to send users back to other pages.

    For the example used above, the DATAFILE would look like this:

    <html>
    <head>
    <title>My Guestbook</title>
    </head>
    <body bgcolor=FFFFFF text=000000 link=0000CD vlink=00FFFF>
    <center>Welcome to my guestbook</center>
    Click <a href="ladybug/index.html"> here </a> to return to my page


    Again...note that there are no closing tags! And remember that this file will be named the same as your Template file, but will have the .html extension instead of the .gbt extension like the Template file has.

    FINISHING UP (uploading and linking):

    After you have created the 3 files.......FORM, TEMPLATE, and DATAFILE...... you must upload them to your MYPLACE file in AOL.

    Now you will want to put links on one of your pages that will send users to where they can fill out (submit data) your form and in the case of a guestbook for example, another link to where users can view the submitted data.

    For a guestbook, for example
    the URL to use in the link to SIGN MY GUESTBOOK would be:
    http://members.aol.com/your screen name/_________.html
    (fill in the blank with the name on your FORM FILE)

    the URL to use in the link to VIEW MY GUESTBOOK would be:
    http://members.aol.com/your screen name/_________.html
    (fill in the blank with the name on your DATA FILE)

    HAVE FUN!:

    Forms can be used for many purposes. A guestbook is just one example. You can gather information in a survey like the example of the Radio Buttons and Checkboxes that asked about what sports you like to play. Be creative and see what other uses you may find. Click here to see the WISHING WELL I put on my pages and feel free to try it out. Have fun and let me know what other creative uses for FORMS that you come up with.


    more advanced extras
    or go to:
    [ HOME , lesson 1 , lesson 2 , lesson 3
    extras , advanced extras , colors , graduation ]



    visit Ladybug's Garden, my personal pages