
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.
<FORM METHOD="POST" ACTION="mailto:your email address">
Notice the command did three things:
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.
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.
name=(whatever is written in the box)
That way you know this information was written in the box marked "name". Also, remember you don't have to call the box "name." Call it whatever you want. It will arrive to you with that name. If you're using the box to get the reader's name, call it "name." If you're using the box to get the reader's e-mail address, call it "e-mail." etc., etc.
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.
![]()
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?
Thus, when the form arrived to you, the e-mail would read:
"signing_in_from_ home_page"
Pretty darn slick!
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.
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.
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.
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>
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.
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:
Here's the source code:
Just cut and paste it, if you'd like...
<INPUT TYPE=submit VALUE="Send it!">
<INPUT TYPE=reset VALUE="Start over">
</CENTER>
</FORM>
If all you want is a simple guestbook that sends mail to you -- boom. You're done. Just...
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!
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>
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.
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.
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....
telnet%
Does that look familiar? If not, don't worry, you will see the blinking cursor where you will enter information.
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.
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.
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.
<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.
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.
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.
Section 4: "Turn On" the CGI-BIN and Script
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....
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.
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!
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/