|
|
How Do Forms Work?
Their web browser sends the data that your visitor enters into your form to the web server. The web server will use a CGI (Common Gateway Interface) application to place the data in an email and send it to you. The web server finds this application and the instructions that you give it concerning the format of your email through your HTML form tag. An example of a form tag looks something like:
<.FORM ACTION="/cgi-bin/email/screenname/response.eml" METHOD="POST">
Lets take a closer look at the form tag and see just what's going on.
The first part, FORM, is pretty clear. This is denoting the start of a form.
The ACTION attribute has a long and sometimes confusing looking value. If we can break it down into its components, it really is not all that hard to understand. Starting with the "/cgi-bin", this is telling the web server that the application that we are going to be using to handle the form data is located in a directory of the web server named "cgi-bin". This directory already exists on the web server and does not need to be created in your web space at My Place. The next part, "email", is the name of the script or application that will do the actual work of handling the form data. The following section, screenname, should be your screen name, as the email script will be looking in your web space to find the instructions on how to format the email and insert the data from the form. The last part of the ACTION attribute's value, response.eml, is the name of the file that contains the instructions for making up the email and placing the data in it.
You will need one form tag with an action and a method attribute at the start of your form. You will also need the closing form tag, <./FORM>, at the very end of your form. Nested between these two tags will be the tags for the method you choose to have your visitors use to enter their data. Let's take a look at these tags next.
--------------------
Getting Started - The Input Tag
Page 3 of 14
Throughout this tutorial we'll be showing you html tags. In order to get them to display properly, we've added a period between the opening < and the tag. You should remove this when writing your html code. Remember, use <tag> and not <.tag>
The first tag we will look at is the input tag, <.INPUT>. This is a very versatile tag and can be used to add a space for text input, checkboxes, radio buttons, submit and reset buttons. Using the TYPE attribute in the tag sets the kind of input that you want to use. To let the CGI on the server know which field of your form the data is being entered into, you will also give the field a name by using the NAME attribute.
To add a field to your form that will allow your user to enter their email address, you can use something like:
<.INPUT TYPE="text" NAME="email">
As you can see from the value of the TYPE attribute, this tag will create a box that your visitor can enter a text response into. The name of this field, which the CGI will use to handle the data, is "email".
You can set the length of the box that appears on your page by using the SIZE attribute.
<.INPUT TYPE="text" NAME="email" SIZE=30>
This will set the length of the box to allow the display of 30 characters.
The maximum number of characters that your visitor can enter is set by the MAXLENGTH attribute.
<.INPUT TYPE="text" NAME="email" SIZE=30 MAXLENGTH=50>
In your template or ".eml" file you could insert this data by using "#email#" The CGI would add the data entered in the input area to your email.
The tag above will produce a box 30 characters wide into which your visitor can enter up to 50 characters.
A variation of the text type is the TYPE="password". Although there is no real encryption or coding of the data done by this input, the text entered in the box is displayed as asterisks or "*" symbols. This is a convenient feature if the data being sent is of a confidential nature. An example of this tag is:
<.INPUT TYPE="password" NAME="quiet" SIZE=30>
--------------------
Working With Checkboxes
Page 4 of 14
A second type of input that can be added to your form with this tag is the checkbox. This is used to allow your visitor to check a small box next to the options you offer. Your visitor will be able to select one or more of the boxes. The checkbox inputs are grouped together by using the same name for each input in the group. When this name is used in the template for the email response, a comma-separated list of each value checked will be inserted in the email sent to you by the CGI. An example of a checkbox group would look something like:
In making my web page I used:
<.INPUT TYPE="checkbox" NAME="used" VALUE="HTML code">HTML code
<.INPUT TYPE="checkbox" NAME="used" VALUE=""AOLPress>AOLPress
<.INPUT TYPE="checkbox" NAME="used" VALUE="Front Page">Front Page
<.INPUT TYPE="checkbox" NAME="used" VALUE="Other">Other
In your template or ".eml" file you could insert this data by using "#used#". The CGI would add a list of all those checked to your email.
An input that works quite similarly to the checkbox is the radio button. This also provides a method for your visitor to select an option from your choices. Unlike the checkbox, the radio button allows only one selection to be made. The radio button group also uses the same name for each field in the group and the name of the field is used in the template file to insert the selection made by your visitor. An example would look something like:
My favorite meal is:
<.INPUT TYPE="radio" NAME="meal" VALUE="Breakfast">Breakfast
<.INPUT TYPE="radio" NAME="meal" VALUE="Lunch">Lunch
<.INPUT TYPE="radio" NAME="meal" VALUE="Dinner">Dinner
<.INPUT TYPE="radio" NAME="meal" VALUE="Too busy to eat">I am too busy to eat.
In your template or ".eml" file you could insert this data by using "#meal#". The CGI would add the value of the checked option to your email.
---------------------
Taking Control With Hidden Form Tags
Page 5 of 14
There is another type of input field that can be used to set some special instructions for your form. These will not be seen by your visitor but will direct how the form interacts with them. You can use this hidden field to control those fields of your form must be filled in, what page will appear as a confirmation or thanks page, and what the subject of your email from the form data will be.
If the form has a field named subject, the email message will have that value as its subject. Otherwise, the subject will be Form Mail. This field may be hidden by defining it as type=hidden in the form. See this example:
<.INPUT TYPE="hidden" NAME="subject" VALUE="web site feedback">
Users of your forms will normally get back a simple page that reads "Thank You!". You may specify a custom response page by adding a hidden field named ResponsePage to your form. The VALUE of the field should be the URL of the page you want returned. For example:
<.INPUT TYPE="hidden" NAME="ResponsePage"
VALUE="http://members.aol.com/screenname/thanks.htm">
------------------------
Adding the "Submit" Button
Page 6 of 14
The last two, but still very important, types of input fields are the submit and reset. These are used so that your visitor can send the information in the form or clear all the fields to start over. Examples of these are:
<.INPUT TYPE="submit" VALUE="Send it!"> which will place a button with a message "Send it!" on your page.
And
<.INPUT TYPE="reset" VALUE="Start over"> which will place a button with a message "Start over" on your page.
There are often times when you would like to give your visitor some additional space to enter more information. Or perhaps you would like more information and want to use a larger area to prompt your visitor to feel free to enter some more information than can be placed in a standard one line input box. The multiline textarea tag sets your user free from the constraints imposed by the single line input tag.
---------------------
Adding A TextArea For Freeform Input
Page 7 of 14
The basic textarea tag looks something like:
<.TEXTAREA NAME="moredata" COLS=40 ROWS=6><./TEXTAREA>
Note that this tag has some attributes that were not used in the single line text input. The first is the COLS attribute, This sets the width of the text box in characters. The ROWS attribute sets the height of the box in lines of text. Please also take note that this tag has a closing tag , <./TEXTAREA>, unlike the <.INPUT> tag.
You can specify some text to both be displayed in the box as a sample for the type of information you want by enclosing it between the opening and closing tags. See this example:
<.TEXTAREA NAME="moredata" COLS=40 ROWS=6>Please send more data about yourself. Do you have any hobbies?<./TEXTAREA>
---------------------
The "Select" Tag
Page 8 of 14
The text area tag gives your user plenty of space to enter information and the radio button and checkbox both allow for choosing among different options. These fields, however, do take up quite a bit of space on the screen and can lead to a form that appears to be long and unwieldy. A method of providing a number of choices to your user, while also keeping a compact look for your form is to use the <.SELECT> tag. This is used along with the <.OPTION> tag to produce a pull down type of menu.
The <.SELECT> tag is used to set the overall control over the field, while the <.OPTION> tag is used to define the individual items in the menu. Your visitor will be able to select one of the options presented by the pull down menu, much like the radio button input. The HTML code for a sample pull down menu would look something like:
My computer's operating system is
<.SELECT NAME=system>
<.OPTION>Windows 95
<.OPTION>Windows 98
<.OPTION>Windows 3.1
<.OPTION>Mac OS 7
<.OPTION>Mac OS 8
<./SELECT>
While this may seem logical to allow one choice here, what if your user has two or more computers, using different operating systems? We can take care of this possibility by using the MULTIPLE attribute in the <.SELECT> tag.
My computer's operating system is
<.SELECT NAME=system MULTIPLE>
<.OPTION>Windows 95
<.OPTION>Windows 98
<.OPTION>Windows 3.1
<.OPTION>Mac OS 7
<.OPTION>Mac OS 8
<./SELECT>
This will allow your visitor to select more than one of the options, somewhat like the checkbox input.
You are also able to set the number of options visible by using the SIZE attribute in the <.SELECT> tag. In this example, three options will be visible.
My computer's operating system is
<.SELECT NAME=system MULTIPLE SIZE=3>
<.OPTION>Windows 95
<.OPTION>Windows 98
<.OPTION>Windows 3.1
<.OPTION>Mac OS 7
<.OPTION>Mac OS 8
<./SELECT>
------------------------
The "Option" Tag
Page 9 of 14
There are also some tools that you can use within the <.OPTION> tag to control the data that will be sent to you. Using the example above, if we were not really interested in the exact operating system used but only whether an up to date version was being used, we could do some behind the scenes tricks to get the data that we need.
My computer's operating system is
<.SELECT NAME=system>
<.OPTION VALUE="old">Windows 95
<.OPTION VALUE="new">Windows 98
<.OPTION VALUE="old">Windows 3.1
<.OPTION VALUE="old">Mac OS 7
<.OPTION VALUE="new">Mac OS 8
<./SELECT>
We also have the ability to pre-select an option by using the SELECTED attribute in the <.OPTION> tag.
My computer's operating system is
<.SELECT NAME=system>
<.OPTION>Windows 95
<.OPTION>Windows 98
<.OPTION>Windows 3.1
<.OPTION>Mac OS 7
<.OPTION SELECTED>Mac OS 8
<./SELECT>
--------------------
The Form Action
Page 10 of 14
So, here we have all the tools to make a form and have the data sent to the email CGI script on the server. But once the data gets there, what is the script going to do with it? How will it know how we would like the data to be inserted in the email that will be sent to us?
The script will follow the instructions that we have set out in our template file. The template file is nothing more than a text file that contains the information that we would like to see in the email, along with some placeholders where we would like the data from the form to be inserted. These placeholders are the value of the NAME of each of our form fields, surrounded by "#" marks. Let's look at a simple form and its template file:
<.FORM ACTION="/cgi-bin/email/screenname/response.eml" METHOD="POST">
My name is: <.INPUT TYPE="text" NAME="name">
<.BR>
My email address is: <.INPUT TYPE="text" NAME="email">
<.BR>
My favorite meal is:
<.INPUT TYPE="radio" NAME="meal" VALUE="Breakfast">Breakfast
<.INPUT TYPE="radio" NAME="meal" VALUE="Lunch">Lunch
<.INPUT TYPE="radio" NAME="meal" VALUE="Dinner">Dinner
<.INPUT TYPE="radio" NAME="meal" VALUE="Too busy to eat">I am too busy to eat.
<.BR>
<.INPUT TYPE="submit">
<./FORM>
Since the <.FORM> tag ACTION is pointing to a file named "response.eml" this is the name that we will use for our template file when we upload it to My Place.
The file itself, which should be created in a text editor such as Notepad on a PC or SimpleText on a Mac, can look something like:
My name is #name#
You can send me email at #email#
I really like to eat #meal#
You can see that the NAME of each form field was used to set where the data will be inserted in the email sent to you by the email response script. There is no need to use any HTML coding in your template file for an email response form, since the data will be used in an email and not in a web page.
----------------------
A Quick Review
Page 11 of 14
As a quick review, lets follow the way the data gets from your form to your email. The visitor to your page will enter data in the fields of your form. When they click the submit button, the data will be sent to the email script on the server. The script will use the NAME=value pair sent by the form and the template file that you have made to replace the placeholders in the template with the values of the data from the form. This will then be sent to you as an email message.
Both the web page that contains your form code and the template file must be uploaded to your web space at My Place. When uploading the files, be sure to use the ASCII transfer method and also be sure that the remote file name of your template file matches the file name used in your form tag's ACTION attribute.
--------------------
A Sample Form
Page 12 of 14
A sample HTML file for a simple form that allows your visitors o send you email about your web site is shown below. You can copy this into a text editor such as Notepad for PCs or SimpleText for Macs. Remove the period after each "<" bracket. The upload the file to My Place using the ASCII transfer method.
<.HTML>
<.HEAD>
<.TITLE>Did You Like My Page?<./TITLE>
<./HEAD>
<.BODY BGCOLOR="#ffffff">
<.CENTER>
<.H3>Did You Like My Page?<./H3>
<./CENTER>
<.HR>
<.BR>
<!-- REPLACE screenname with YOUR screenname -->
<.FORM ACTION="/cgi-bin/email/screenname/form.eml" METHOD="POST">
My name is: <.INPUT TYPE="text" NAME="name">
<.BR>
My email address: <.INPUT TYPE="text" NAME="email">
<.BR>
I thought your page was
<.SELECT NAME="rating">
<.OPTION>Great!
<.OPTION>Pretty good.
<.OPTION>Good.
<.OPTION>Not bad at all.
<.OPTION>in need of a little work.
<./SELECT>
<.BR>
Come see my page at <.INPUT TYPE="text" NAME="url">
<./FORM>
<./BODY>
<./HTML>
--------------------
A Sample Template
Page 13 of 14
Here is a sample template file that can be used with the sample form code listed above. The text listed below should also be copied into a text editor and uploaded to My Place using the ASCII transfer method. Two important points:
1. The remote file name should be form.eml
This must be entered exactly, using lower case letters
2. The file should be uploaded to your main web directory at My Place, not to a subdirectory.
#time# #date#
My name is #name#
My email address is #email#
I think that your page is #rating#
You can see my page at #url#
---------------------