Week Eight - Forms and CGI Banner

Go to Week One Button Go to Week Two Button Go to Week Three Button Go to Week Four Button Go to Final Button
Go to Week Five Button Go to Week Six Button Go to Week Seven Button Go to Week Eight Button

Basic Forms

Why use forms? It really looks professional when you allow viewers to fill in information right to your page rather than using a "mailto:" command. And looks are about it. A form does basically what e-mail does -- it sends information.

Please be advised that this lesson will work on Netscape-style browsers and MSIE 4.0 and above browsers only. The form commands will work on Explorer browsers 3.0 and below, but will not act as a guestbook in the same way they will in Netscape and MSIE 4.0. If you use the format below with a lower version of MSIE, you won't get any errors, just a basic e-mail box will pop up.

HR Rule

FYI: The form page outlined below is very basic. It will create a guest book for you and it will send information to you. There are a bunch of extra commands that you can attach to forms. Remember this is just a brief introduction.

The First Step

The first thing you must tell the computer is that you are starting a form, and what you want done with the form data. The command to alert the computer is:

<FORM METHOD="POST" ACTION="mailto:your email address">

Notice the command did three things:

  1. It told the computer a FORM was starting.
  2. It stated the METHOD of dealing with the form is to POST it.
  3. And the data should be posted to your e-mail address through the "mailto:" ACTION.

Remember you will need to put your e-mail address immediately after the "mailto:" without a space! This is where the results of the form will be sent.

That's nice and simple. Now that the computer knows a form has begun, it's looking for any one of a number of form styles to deal with. I will go over five here; TEXT, TEXT AREA, the RADIO BUTTON, the CHECKBOX, and the POP-UP BOX. These are by far the most used on the WWW. Also, I will go over the creation of buttons that send the form to the "mailto:" address or clears the form.

Boxes for Entering Text

The Text Box

This is a basic long box that allows for one line of text. When placed on a page, your reader will be able to write in information such as their name or their e-mail address. Here's what a text box looks like:

Go ahead. Write something in it. It works. You may have to use your mouse pointer and click on the box to activate it -- but it works. If this is your first time making forms, you might think that the box above is a .gif or a .jpeg. Not so. The box is placed on the page through an HTML command, not as an image.

Here the syntax:

<INPUT TYPE="text" NAME="name" SIZE="30">

There are three parts to the command.

The Text Area Box

This is a larger box, like the one above, that allows your reader to write something. The difference between the Text Box (above) and the Text Area is that the Text Box only allows for one line. The Text Area, however, is much larger and will allow for as many words as you want.
Here's a Text Area Box:

Neat? Again, go ahead and write in it. It'll work. You may have to click on the box to activate it.

Here's the syntax:

<TEXTAREA NAME="comment" ROWS=6 COLS=40></TEXTAREA>

Please note that the TEXTAREA requires a </TEXTAREA> command, whereas the TEXT BOX command above did not.



Input Buttons


The Radio Button

This is a neat little deal that places a circle on the page. That circle is active and a reader can use the mouse to click on it. When the radio button is chosen, it darkens. Here are three radio buttons:
- -

Go ahead. Click on them. I know you're dying to. I have three of them there to prove a point. The point is that radio buttons are a one choice deal only. When you use radio buttons, only one can be checked. When another is checked, the first one gives up its selection. Go ahead -- try it.

Neat, huh? But why are they called radio buttons?! The reason is that they act as the radio buttons used in older car radios. When you pushed one, the dial moved. When you pushed another, the first choice was dropped and the dial moved again. You're probably too young to remember. It was back when AM only was a big selling radio, back before dirt. (Man, I'm old.)

Here's the syntax:

<INPUT TYPE="radio" NAME="heading of button" VALUE="button name">

You see, the TYPE in the command is "radio." The command is long, but it's not that difficult to understand.

Why on earth would I want to label all those?

Remember that this is going to be sent to you through the mail. You will have to be able to read what the person chose. Say you have a guest book with a section of radio buttons that ask which page the user is signing in from. Your "NAME" in the command might be "signing_in_from." Then each of the radio buttons is assigned the "VALUE" of each of your pages. Let's say a person chooses the radio button assigned to your home page. That button's VALUE might be, "home_page."

Thus, when the form arrived to you, the e-mail would read:

"signing_in_from_ home_page"

Pretty darn slick!

The Checkbox

The checkbox is an exact clone of the radio button except for two distinct features:
Here are a few checkboxes:

- - - -

Go ahead. Click around a bit. You'll note that just one or every one can be chosen. This checkbox is basically a fancy radio button.

Here's the syntax:

<INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">

Each of the items mean the same as above so there's no need to go over them again. Please note, however, the TYPE is now "checkbox" instead of "radio."

Remember that when the text from a checkbox arrives at your e-mail box, more than one can show up. With radio buttons, only one item under the NAME heading will arrive. With checkboxes, every item can be checked, thus every item can arrive.

I like radio buttons much more than checkboxes. The reason is that the radio button forces a choice. Checkboxes invite people to just check everything every time. That can waste your time if you have to read through it all. I like to make a one-choice deal. It's easier on me and if people want to leave more info, there's always the TEXT AREA box for that purpose.

HR Rule

The Pop-Up Box

I LOVE these Pop-Up boxes, but I don't use them too often. I like to have all the items people can choose out in the open. The Pop-Up box, unless clicked on, only shows one item. But, this is your form and you can do anything you wish. Here's a Pop-Up box. You have to click on it to see all the choices. This one is for people to choose their favorite color:

Here's the syntax:

<SELECT NAME="Favorite_Color" SIZE="1">
<OPTION SELECTED>Blue
<OPTION>Red
<OPTION>Yellow
<OPTION>Green
<OPTION>Black
<OPTION>Orange
<OPTION>Purple
</SELECT>

Although this looks a little bit more involved, it really isn't. It's the same thing again and again.

Break Down Icon

HR Rule

Sometimes I am asked if it's possible to make the above pop-up box a series of links for people to choose and then go to. With HTML alone, it isn't possible. Using a Java Applet along with the code -- it is. If you are really dying to see how it is done look at the source code I used to create the pop-up box for your progress chart.

HR Rule

Send and Reset Buttons

     Well, now that the you have placed all the form items you want on your page, you need a way to have the results sent to your e-mail box (or wherever you said this would go in the original form statement).

This may be the easiest of all the items I've shown on this page. Here are the buttons:

Please do not use the buttons. They are active and will attempt to work -- however, I have put in a false e-mail address so I don't fill my own box with e-mail from this tutorial. You're just going to get scolded!

Here's the syntax:

<INPUT TYPE="submit"><INPUT TYPE="reset">

Easy? Now when you click on the buttons, the form will enact the ACTION you noted in the original FORM command. Here it would have been mailed to my e-mail box (or not, in this case).

Finally! Make sure you end your page with this: </FORM>

HR Rule

That's a beginning on forms, but there is so much more you can do than what I have here. There are forms you can connect to other CGI's (Common Gateway Interfaces), databases, or other data collection devises. All I wanted to do here was give you a very basic, very easy form for you to use on your Web pages.

HR Rule

Basic Guest book

Okay what do we need to do to create a guest book? Well . . .

     I will go over three different types of guest books:

HR Rule

A Basic Guest book

          We'll start at the beginning. Between the double lines below is a simple guest book.      



Sign In, Please...

Please enter your name: 
and your e-mail address:  

What do you think of my guest book?

It's Great! It Stinks! You Stink!
I Stink! We All Stink!

Make any comments you'd like below:

Thanks for your input

Please do not click the buttons as they are not attached to any address and will give you an error. This is for demonstration purposes only.



 Here's the source code:
Just cut and paste it, if you'd like...


<H3> Sign In, Please...</H3>
<FORM METHOD="POST" ACTION="mailto:user@writemehere.com">
<B>Please enter your name: </B><INPUT NAME="username" size="30"> <BR>
<B>and your e-mail address: </B><INPUT Name="usermail" size="30">
<p>
<CENTER>
<B>What do you think of my guestbook?</B>
<P>
<INPUT TYPE="radio" NAME=I_think_that VALUE="It's_Great">It's Great!
<INPUT TYPE="radio" NAME=I_think_that VALUE="It_stinks">It Stinks!
<INPUT TYPE="radio" NAME=I_think_that VALUE="You_stink">You Stink!
<BR>
<INPUT TYPE="radio" NAME=I_think_that VALUE="I_stink">I Stink!
<INPUT TYPE="radio" NAME=I_think_that VALUE="We_all_stink">We All Stink!
<P>
</CENTER>
<H3>Make any comments you'd like below:</H3>
<CENTER>
<TEXTAREA NAME="comment" ROWS=6 COLS=60></TEXTAREA>
<P>
<B>Thanks for your input</B>
<BR>

<INPUT TYPE=submit VALUE="Send it!">
<INPUT TYPE=reset VALUE="Start over">
</CENTER>
</FORM>

HR Rule

Simple Mailto: Guestbook's

          What you have above is a very simple guestbook setup using two text boxes, five radio buttons, and a text area. Remember these input items are covered in the forms lesson.

     If all you want is a simple guestbook that sends mail to you -- boom. You're done. Just...

A Couple Of Mailto: Downfalls

HR Rule

Augmenting Your Guestbook Output

     The following are two additions to the the basic guestbook. These allow you to -maybe- change the output of your guestbook.

     If you've set up your guestbook and the result arrives in your e-mail box as a long line of strange text or as an attachment, this is for you!
Follow the same FORM command format as above, except add another subcommand: ENCTYPE="text/plain". Like so:

<FORM METHOD="POST" ACTION="mailto:login@yourserver.net" ENCTYPE="text/plain">

The "ENCTYPE" command stands for Encryption Type. It's telling the server to return the mail as text only. If it works you'll get an output something like this:

Name=Bob Smith
Email=Smithb@hotmail.com
Comment=This thing works!

If you'd like to set aside your guestbook output from other e-mail you receive, you can do it simply by adding a subject to your e-mail address inside the FORM format command. Like so:

<FORM METHOD="POST" ACTION= "mailto:login@yourserver.net?subject=whatever subject you want" ENCTYPE="text/plain">

Notice that all I did was add a "?" right after the e-mail address and then "subject=." Please note you do not surround the subject in quotation marks. There is only one at the beginning of the mailto: command and one at the end of the subject line. That's it.

The format is to add "&cc=" and then the e-mail address of the person who should get the carbon copy. So...

<FORM METHOD="POST" ACTION= "mailto:login@yourserver.net?subject=whatever subject you want&cc=smithb@hotmail.com" ENCTYPE="text/plain">

This isn't always successful depending on browser version, but give it a shot. You should be able to list as many e-mail addresses as you like, separated by commas and no spaces, and all should get the guestbook output. Like so:

<FORM METHOD="POST" ACTION= "mailto:login@yourserver.net,smithb@hotmail.com,jonesj@hotmail.com">

If you've made a bunch of forms, then you know that TEXTAREA boxes usually don't wrap the text. It just keeps rolling off the page. Well, fear not. Add this: WRAP="virtual" to your TEXTAREA boxes and the text will wrap right around. It looks like this:

<FORM>
<TEXTAREA COLS="50" ROWS="75" WRAP="virtual">
</FORM>

HR Rule

Guest books With CGI's

Now the fun part. If you attach the output of your guestbook to a CGI, you can do a great many things. For one, you can make it so the mail arrives in your box looking like regular e-mail without all the gibberish. (If you get the tip above to work, you probably won't need this.) You can also make it so a page comes up that thanks the person for sending e-mail. And you can also make a "graffiti wall" where people can post e-mail messages. I'll show you how to do each right here.

HR Rule

Attaching The E-mail Output To A CGI

This is done inside the FORM command. Here's the FORM line from the guestbook above:

<FORM METHOD="POST" ACTION="mailto:user@emailaddress.com">

See the ACTION? It's telling the server what to do with the output (what the viewer writes) of the form. In this case it is telling the server to send it through the mail system.


The reason all the gibberish shows up is because that's actually what your mail looks like to the computer. When you're using a nice mail program, all the stuff is made to look like space, but when you send mail this way, all the stuff is made visible.

Now look at this:

<FORM METHOD="POST" ACTION="cgi/email">

See how the ACTION is sending the information to something on my site named "email?" Notice it's in a directory named "cgi?" That's what I'm talking about when I say to attach your guestbook to a CGI. You send the output of the page to a CGI that manipulates it and offers output (if you wish).

Please note: You cannot attach to my CGI's through the above path. It does not exist. I made it up for demonstration purposes.

HR Rule

Guestbook That Posts Messages

This is a guestbook that posts what the person writes to another page. Thus everyone can read what others write. It works a lot like a BBS server. Watch it though, this takes up a lot of space after a while.

HR Rule

Guestbook CGI's

First off, you need to find out if you can place one of these on your server.
You see... CGI's are more than just little text files. They are small programs that do tricks, like manipulate e-mail data. The problem comes in that CGI's must be sitting in an "activated" directory. This is a place that the server knows where a little program sits, rather than just text.
You need to ask your Webmaster, service tech, or the person who takes your checks each month if you are able to place your own CGI's. The easiest way is to get the person to make you a sub-directory of their primary CGI directory. All sub-directories carry the same properties as the higher-level directory. Or just find out if you have the ability to activate your own directories.

One More Option - Active Server Pages (ASP)

Everybody loves putting together a great guestbook, and through the use of ASP, you can get that all-important secondary page that pops up right after the user submits. But more than that, you get to configure the thank-you page to include the user's name and other responses depending on what the user entered into the guestbook form. Want to try it? Go here!

Basic CGI

If you follow this lesson, you will be guided through the steps to place a guestbook CGI onto your system. The CGI will, hopefully, work just the same as my guestbook CGI, mainly because it's the same one. That makes sense. I will tell you though, it took me about two weeks to figure all this out. Placing a CGI is an involved process that requires your doing some configuration at the server level. It's a little scary at first, but stick with me. You'll get the hang of it soon enough.

     This tutorial deals with UNIX servers and UNIX commands for configuration. The vast majority of Internet servers are UNIX-based. If your server does not use UNIX, consult your technician for additional instructions.

HR Rule

What You Have To Be Able To Do

In order to place your own CGI, you must be able to do a few things with your Internet account. You must be able to:

You must be able to do all of the above. If you can't, you will not be able to install this guestbook CGI. You can either check with your server technician or just try following along. If you are denied any of the above items, the server will tell you soon enough.

HR Rule

Telnet
(Click for a short tutorial regarding telnet)

For those of you who don't know, "Telnet" is another way to attach to your Internet server. Using telnet you are attaching directly to the server "shell." This is where you can enter commands that directly affect the UNIX settings.

When you signed up with your Internet Service Provider (ISP) you should have gotten a telnet program. If you didn't, you still may be in luck. Windows-based computers have telnet programs already installed. In versions 3.x, it's named "Terminal." In W95, it's named "Telnet." Both can be found under the Accessories section.

Whatever telnet you are using, they all work the same way. Open the program, choose to connect, and type in your WWW address without the http://.

You're good to go. Keep following along....

HR Rule

Section 1: A Place for the CGI

     Okay, here we go. First off, you will need to telnet into your server. Upon connecting, you will be asked for your user name and password. Put them in. Usually you will get a few welcome greeting messages and then a prompt of some sort will pop up. I have worked with seven different servers and the prompt has been different on all seven. It should look something like this:

telnet%

     Does that look familiar? If not, don't worry, you will see the blinking cursor where you will enter information.

Your Public HTML Directory

     When you send files over to your server, for them to be seen by the entire Internet community, you send the files to a directory. It has a name. You need to find that name. Most of the time the name is something like "public-html" or "www" or "default."
     For the sake of demonstration, we'll say the directory's name is WWW. That's the shortest name and thus easiest to write a couple hundred more times. Depending on how your system is set up, you will either be in that directory when you telnet in, or you will be one above it. The smart money is that you are one above it. Type this at the prompt:

telnet% ls

(Please note, I am using "telnet% to represent the prompt. Your prompt may look different)

     Hit return. You will get back a listing (that's what "ls" means) of everything in that directory. If you see all the names of your HTML documents that Internet viewers can access, then you are already in the correct directory. Skip the next part. If you see the name of your Internet directory (I called it WWW above), then you are one above the directory. This is probably where most of you are.
     You need to get into your WWW directory. Do that by typing this at the prompt:

telnet% cd www (or whatever your directory's name is)

     "cd" stands for "change directory." That's what you just did. Now put in the "ls" command again and you should see all of your HTML documents.

HR Rule

Making the CGI Directory

This may already have been done for you. You should check that first. If when you typed one of the "ls" commands above you saw a cgi-bin, you need not do this.

Now you will need to create a special directory for your CGI's. No, they cannot sit where all the other files are located. Why will become clear in a moment. I suggest you name the directory you are about to create "cgi-bin" as that is what I am going to call it the rest of the way through this tutorial. Please notice that is a hyphen between the "cgi" and the "bin." You will make the directory by typing this:

telnet% mkdir cgi-bin

If you get another prompt and no error messages, you did it. This is the first point at which you may be told you do not have the ability to place a CGI.
If you'd like to see your work, type this:

telnet% cd .. (those are two periods)

...and then this:

telnet% ls

You should see the new directory "cgi-bin." Log out of telnet by typing "logout" at the prompt.

HR Rule

Section 2: The CGI and Its HTML Document Buddy

Sounds like a new movie doesn't it? Below are links to two items. The CGI and the HTML document that will use it. Grab them both. They are in text form so they should display as just text. Some browsers will display the HTML document as a form, though. If that happens, just download it.

Here is the CGI script
Here is the HTML document

You will need to save the CGI script as "gb.cgi" or with whatever suffix your server requires. Some servers use ".pl." You will need to save the HTML document as "gb.html." Save them both as "source" so they keep their shape.

Altering the HTML Document

You will need to make a few changes to the HTML document so it knows where the CGI is located. Look at this line:

<FORM method="post" Action="/cgi-bin/gb.cgi">

This is the line that attaches the output of this form to the CGI. You will need to change that line so that the output is directed at the new cgi-bin you created in Section 1. This is fairly easy. What you do is take your full WWWeb address and add the new cgi-bin, a slash, and then the name of the CGI file. For instance:

Your address is:
http://www.server.com/~chuck

The Action statement above would read:
http://www.server.com/~chuck/cgi-bin/gb.cgi

Get it?

You are now done with altering the HTML document. Remember that these two documents were written for each other. They work together. You can change the text or add graphics to the HTML document, but you cannot change the FORM commands at all. If you attempt to add a third text box or another radio button, it won't work.

Altering the CGI Script

You are concerned about two things here: The path to PERL and the path to Sendmail.

The path to PERL is the very top line. It looks like this:

#!/usr/bin/perl

Contact your server technician and ask him/her the path to PERL. You see, the CGI does not work all by itself. It requires the PERL program to run correctly. This first line is telling the CGI script where the PERL program is on the server. Yes, your server will have PERL.
Basically what happens is that the guestbook information is sent to the CGI. The CGI and the information is loaded into the PERL program, or "shell." The data is manipulated then returned to your mailbox.

     How the mail gets to your mailbox is the Sendmail question. Look at the CGI script about 20 lines down. The line reads:

open(MESSAGE,"| /usr/lib/sendmail -t");

That is the path that the server will use in order to find a little program that will send the mail. It needs to be correct to your server.

For the most part, these paths will be correct. Most servers are set up basically the same way, so you may not need to change anything. Then again, you may need to change them both.

HR Rule

Section 3: Send Them To Your Server

You will now need to use your FTP program. Attach to your site like you would any other time you were going to transfer files. Send the HTML document in where the other HTML documents are. Do not put the HTML document and the CGI in the same directory. They will not work that way. Remember you made a path to the CGI? That's because you will place the CGI in the cgi-bin directory.
Depending on how your FTP is set up, you should see the cgi-bin directory in your window as you are transferring the HTML document. Click on the cgi-bin directory to open it, and send the CGI.

SEND THE CGI SCRIPT AS ASCII

Yes, that's correct. Send it as ascii text. Do not send it as binary. It is written to be sent as ascii text. There. I said it three times so you know it's not a typo. Log out of the FTP program.

HR Rule

Section 4: "Turn On" the CGI-BIN and Script

Step One

Log back into your server using telnet. Again, get to the directory that contains your HTML documents. Follow the steps in Section 1 if you need to. Type this:

telnet% chmod a+xr cgi-bin

"CHMOD" stands for "Change Modification." If you get no errors, you did it. You have told the server that this specific directory will contain CGI executable files. Don't log out yet. There is still one more step. But first....

Possible Error Codes

Step Two

Open up your cgi-bin directory by typing:

telnet% cd cgi-bin

Turn on the CGI itself by typing:

telnet% chmod a+xr gb.cgi

You may get the error codes above again. Make sure you're in the correct place. You should be able to do another "ls" command and see the CGI file. Try replacing the a+rw with the number 775 if it doesn't allow you to change the modification.

     Log out of telnet.


That Should Do It

If all the paths are correct and you have "turned on" all the correct files, you should be able to open your browser, log in to the guestbook HTML document, and run the CGI.
     

You might get a service error first time through. Read it. It will tell you the problem. The most common problems are that it cannot find PERL, it cannot find a file due to incorrect paths or file names, or your server doesn't support "POST" capabilities. The first two can be repaired. The third cannot without contacting your server technician.

Good luck! Please understand that placing a CGI is very difficult and there are only about a million little things that can go wrong along the way. Take your time, go slow, and make sure the paths and file names are correct. It took me two weeks to get this working. See if you can beat my record.

One More Option (ASP)

Everybody loves putting together a great guestbook, and through the use of ASP, you can get that all-important secondary page that pops up right after the user submits. But more than that, you get to configure the thank-you page to include the user's name and other responses depending on what the user entered into the guestbook form. Want to try it? Go here!

HR Rule

Your Turn Icon Create a simple guest book form using at least one each of the example from above. For example one set of radio buttons, one set of text boxes, one set of pop-up lists, etc. I do not expect you to be able to set up the CGI scripts. I did feel however, it was necessary for you to know how they work, and how to install them once you have your own site.

Only one more week to go! On to the Final!

Material for this lesson has been adapted from the HTML GOODIES site created by Joe Burns located at http://www.htmlgoodies.com/

Date of last up date: January 2007