More Than HTML:
Forms can be a great asset to your site, especially if you want information about the people who visit your site. The first thing you will need to understand is that forms require a handler. This means that your form will not work without some method of processing the input. Remember your basic computer rules of I/O? Well, forms give the input so something else has to handle the output.
The first and most primitive way of handling form output is via your e-mail client. This method is easy to use, but it is very hard to understand the output, especially if you have a lot of information to process. I will give you examples of this method in just a moment.
The second and most efficient way of handling form output is via a CGI (Common Gateway Interface) script. Although it is best, CGI scripts are tedious to configure and you must have access to your server's cgi-bin. You can also use free form handlers that can be found all over the Internet. This is one site that I have found most reliable. CGI For Me. If you would like to learn about CGI programs written in perl, or would like to know how to configure and use them, the best source of free perl scripts and FAQs is at Matt's Script Archive.
OK, now on to making forms.
The first line of code for ever form you will create you must tell the browser that you are requesting information via a web based form, how the form is to be handled, and what method you will be using. We will always use the POST method here. The other method is GET which is appended information and is a lot more difficult to use.
<FORM ACTION="mailto:email@example.com" METHOD="post">
The ACTION= specification tells the form what type of handler you are using and the METHOD= specification tells the form to post the information to the e-mail client and then send it to the address given.
Next you need to have the input "blocks" for your visitor's information:
Your Name: <INPUT TYPE="text" NAME="name" SIZE=35>
Lets look closer:
Let's put another box in this form:
Your E-mail: <INPUT TYPE="text" NAME="email" SIZE=35>
This time you have given the input box a different name. This lets the form handler know that it is a different information block and should be kept separate.
Now you must give the visitor a way to send the form:
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
Notice you ahve a new type of block and an added specification value=. This is the generally accepted submit code for all types of web based forms. You can use any value you want because it is only the text that will be displayed on your submit button. It is also nice to give the visitor a chance to clear the form and start over:
<INPUT TYPE="reset" NAME="clear" VALUE="Oops, clear it">
This will earse all the information that the visitor type in the form.
Now end your form:
If you do not end the form you will have a blank page from the point you inserted the form.
Here's what you have:
(Note: This is a non-working form, clicking the submit button will do nothing)
Now, the information you will get in your e-mail will look like this:
This is the exact e-mail I received when I tested this form. Now, this is how you interpret this information. All the information blocks are separated by the & symbol. The first block is name=test. Test is what I typed in the first input box of the form, therefore, "name" is the name of the first block and 'test' is what the visitor would have typed in. The next block is email=yourname%40yourserver.com. (will read as your email address) "Email" is what I named the second block and firstname.lastname@example.org is the the email address you will use for the form. The %40 is the system code for the @ symbol. The last block is submit=Submit. I named the submit button "submit" and gave it a value of Submit. Rather awkward huh? But it works.
Now that you have the basic form, lets have some fun! Let's add a drop down selection box for rating your site:
You can add the following codes anywhere between <FORM> and </FORM>.
How do you rate my site?
Here's what you get:
So far you have the visitor's name, e-mail address, and a rating system, let's give the visitor a chance to send you his/her comments about your site:
It will look like this:If you want the visitor to only be able to select one choice you would use "radio buttons":
What is your sex?
<INPUT TYPE="radio" NAME="sex" VALUE="male">Male
And this is what you have:
If you would like to have information sent along with the form automatically but don't want the visitors to see the information you would use a hidden block:
<:INPUT TYPE="hidden" NAME="form" VALUE="Posted from http://www.yoursite.com/form.html">
This will not be seen in the form and the visitor will not know that the information is being sent unless they have looked at the source code.
Using CGI to Handle Forms
To use a cgi based form handler, you will first need to have a CGI e-mail program in the cgi-bin of your hosting service. For information about the cgi-bin and your service, contact your server administrator. Next you will need to configure (personalize) the program. Always edit and upload CGI files as ASCII text. I use Notepad with Windows 95 to edit all of my CGI files. Use the help file that is provided with the CGI program to configure it properly.
The last step is to link your CGI program to your form:
<FORM ACTION="http://www.yoursite.com/cgi-bin/formmail.cgi" METHOD="post">
The rest of the form will be the same as explained above. If you have chosen to use Free Form, CGI For Me, or another free CGI server, once you have created your account, you will be given instructions on using the service. They will give you all the information you need for your form to work without problems.