HTML Studio's
Html Studio's Web Tutor
Lesson : 1 - 2 - 3 - 4 - 5 - 6

Form Tutor - Lesson 1

Just like "follow the bouncing ball", I want you to open up Notepad (Yes, Notepad!) and follow me. Copy and paste the following to get started:

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Save it as form1.html in some folder somewhere. Go ahead and give it its own folder. Start up your browser. Use it to open form1.html and run Notepad and the browser side by side. This way you can create your pages and almost instantaneously see the results of your handiwork. If hitting the reload button is not quite resetting everything, hit the reload button while holding down the SHIFT key.

Type in your form tags.

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
</HEAD>
<BODY>

<FORM>
</FORM>

</BODY>
</HTML>

Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do. 1) You can send the data to a CGI script for processing. The parsed data is then emailed to you. This is the preferred method, or 2) You can have the data emailed directly to you using the mailto action. This is simpler but less reliable.

For the sake of simplicity, we will start with the second method.

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
</HEAD>
<BODY>

<FORM METHOD=POST ACTION="mailto:abc@123.com" ENCTYPE="text/plain">
</FORM>

</BODY>
</HTML>

The only thing you have to do is plug in your email address after mailto:

To send the data to more than one email address, separate them with commas...

larry@3stooges.org,curly@3stooges.org,mo@3stooges.org

Now, I said that this method is simple, but not entirely reliable. For the time being, it is perfectly OK to use this method as you work through the tutorial. As you complete the lessons you can practice sending yourself information. For most people, under most circumstances, everything will be just fine. If you'd like, you can skip the rest of this lesson for now and dive right into making forms. After you learn a little about forms (or if you're having trouble submitting them), definitely come back here and learn more about form processing.

Every so often, depending on the sender's browser/email configuration, using the mailto action might just bring up an empty New Mail window instead of sending the form data. Sometimes (rarely) you'll click on the button and nothing will happen. In this case you will not be able to even practice with the simpler mailto action. You will have to go straight into using a CGI form handler to practice with.

Before we get into that, there is one more thing about the mailto action that I want to mention. Sometimes, depending on the person sending the data, you will recieve the data in a very strange format. Instead of something nice & neat like this...

FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA

The info comes back looking like this...

FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313
+Mockingbird+Lane&CITY=Beverly+Hills&STATE=CA

What you may want to keep handy is a little program that converts this "raw" data into a human readable format. For Windows users, one such program is Mail Converter. (It is distributed as part of this tutorial, clicking on the link will "download" it to where ever you'd like.)

CGI Form Handling                 

The most reliable way to process your form data is to send it to a script on a server for processing. The most obvious place to look for such a script is your own ISP or web host. Most have a form mail script that you can send the data to. If you look at their help pages (hopefully they have help pages), you will probably find directions for using their script. The directions normally involve setting the ACTION attribute to a particular something...

ACTION="/cgi-bin/mail.pl"       (this is just an example)

They may also require that you insert some HIDDEN fields in the form so they know where to send the processed data to and where to send your visitor after he fills out your form...

<input type=hidden name="to" value="buckie@yadayada.com">
<input type=hidden name="return-url" value="http://yadayada.com/thanksdude.html">

(Once again, these are examples. Don't use them unless you like disappointment.)

If for some reason your ISP or web host is unable to provide a form mail script, all is certainly not lost. You still have a few options.

One option is to use one of many free form processing services out there. These are simply form mail scripts that reside somewhere else but are offered for use to the general public. Below are two places where you might be able to find one.

http://www.cgi-resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/
http://www.sbrady.com/hotsource/cgi/index.html#ffp

Another option (only if you have access to your server's CGI bin) is to run your own script. Here again are places where you might be able to find a script.

http://www.cgi-resources.com/Programs_and_Scripts/
http://www.artsackett.com/freebies/asform/

Once again, use a CGI script one way or another if you can. The mailto method is simple sure, but for a portion of your visitors (2%? 10%? more?) the thing will fail.


Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6