INTRODUCING FORMS

One of the most powerful parts of a web page is the form. A form allows you
to gather information from a visitor or customer for immediate or for
later use. The person fills in the form and then SUBMITS the information (which is also called the form data) to your
server. For
example an advanced form might collect credit card information and send it off
to Flagship merchant
services or another company for processing.

Some of the information in the first two sections in this lesson may be a little confusing. This information is
designed to help you understand just how forms and CGI scripts work. There are several
companies on the internet that offer free forms and free guestbooks and they all come complete with all
the coding necessary to place them on your website. You cannot send the contents of a form directly
to your email address. It has to be routed through the internet company supplying the free form or guestbook
to be interpreted into a readable form through their CGI script and then emailed to you. All this is done
almost instantly. That is, when a visitor clicks on the "send button", the information that the visitor
fills into the form or guestbook is sent to the
internet host company for interpretation and then immediately to you. Obtaining a free form or a free guestbook is discussed
later in this lesson in the section titled, "Free forms and guestbooks". So you don't need to worry about
understanding everything in the first two sections in this lesson. What you do want to learn
is how to set up the various elements of a form so that you can take a free form or guestbook
and adapt it to your particular needs - and that is what this lesson is all about.

One way to have the information from a form sent to you is through the
mailto: command. An example using this method is given later
in the "Creating a form" section. With the mailto: command, the information that a visitor
fills in is sent to your e-mail address when the "submit" button is clicked.
However, using the mailto: command gives very inconsistent results among
browsers. It simply does not work well. Therefore using the mailto: is not recommended
for having the contents sent to you. Here are the main reasons:

The mailto: only works in
Netscape and Firefox browsers. Internet Explorer does
not recognize forms with the mailto:
command in the same way that Firefox and Netscape do. When Explorer encounters the "mailto:"
command, it will simply open up the e-mail box waiting for the visitor to send an e-mail to you -
as if "mailto:" was a regular HREF attribute. The HTML coding for forms,
however, will work in all browsers.

There is no confirmation to the visitor of the form contents being sent.

The text arrives in your e-mail as one long line - all run together. Using the form given
below in the "Creating a form" section, and using my name and address, the first part of the data will look like:

visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city=Brantford
&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7&visitor_email=
bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.on.ca%2FHTML
and so on ...

For most people, this form output is hard to read - especially if you have a lot of information to
sort through. I will be discussing this strange looking output in more detail in the
section entitled "URL encoding".

The form information arrives in your email client in an attached file.
An attached file has to be opened in a text editor such as Notepad, WordPerfect
or Microsoft Word.

To get around these problems associated with the mailto: command, you attach the visitor's form
information to a CGI script which is the topic of the next section.

CGI - COMMON GATEWAY
INTERFACE

CGI stands for
Common Gateway
Interface.
A CGI script allows you to send the information from a
form looking like regular easy to read e-mail without the problems associated with the
mailto: command. In other words, a CGI script can manipulate or process the information
from a visitor into a more readable and useful form. This is done at
the server level and a response is returned to your
browser or to your e-mail address..

A CGI script together with the form allows you to collect information from the visitor, analyze
and parse the information into a readable form, and then have the readable contents sent to you.
When the visitor submits the form data, the CGI script can also have another page pop up
thanking the visitor for filling out the form. You can also have the CGI script
post what visitors write to another page. This allows everyone to read
what others write. You have to be careful with this one because it can take up a lot of
server space after a while.

A CGI script is a computer program that interprets the data sent to it by the visitor.
It divides this long stream of hard to read data into something you can more easily read
and use. You can write the CGI script yourself, have
someone write it for you, or you can download a suitable script from the internet.
If all you want is a guestbook or an order form, there are plenty of places on the net to
get a free one (discussed later in the section "Free forms and guestbooks").
All the required information and coding comes with the guestbook or form so you
don't have to worry about CGI scripts. Everything you need to know comes with the package.

CGI scripts are often written in a programming language such as
C, Perl or
JavaScript. The advantage of using a language such as these
three is that the script can be easily transferred from computer to computer and
doesn't need to be compiled into something else. In other words, you can download
or copy a JavaScript from someone else, adapt it to your needs and incorporate it into
your web page.

CREATING A FORM

While you may need to find an internet company offering free forms and guestbooks to
interpret the data, writing the HTML code to make the forms is easy. Every
form has three parts:

the FORM tag

the actual form elements where the visitor enters the information

the SUBMIT tag which creates the button that sends all the collected
information to the server (usually to be interpreted by a CGI script).

Let's begin by setting up a simple Guestbook that asks for
a name, address, e-mail address, plus other information. The form and information
presented here can apply to any type of form you may require on your web page.

Here is the form we will set up. Below this form is the complete HTML
coding along with explanations. Note: This form is not connected to my
e-mail address or to any CGI script so you can practice all you like
(I used a false e-mail address so my box won't fill up with e-mail from this lesson).
If you haven't already signed my real guestbook, you can do so by choosing
"Please sign my Guestbook" from the menu at the top
of this lesson. You can also choose to sign my guestbook from my main
and alternate home pages.

I would
be most pleased if you would take a moment to sign my guestbook and tell me what you
think of my website.

Name:

Address:

City:
State/Province:

Country:
Zip/Postal Code:

E-mail address:

If you have a website, let me know and I will pay you a
visit!
website address:

Please rate my website!
It's Great!
It's Good!
It's Fair!
It's Poor!

Tell me a little about yourself:
I am Male
I am Female

Please indicate your interests. Check off as many as you
wish!
skiing
swimming
jogging
reading
movies
surfing the net
sports in general
other

Seen any good websites lately? Got a good story to tell? Write them down
or just say Hi!!

Thanks for
visiting!

The above form uses the five most often used basic areas of form styles. These five
areas are:

TEXT BOXES for entering one line of basic text. I
used several text boxes such as for the visitor's name, address and city.

POP-UP BOXES which are menu choices. I used the pop-up
box to determine the visitor's country.

RADIO BUTTONS which I used to rate my website and
also to determine if the visitor is male or female.

CHECK BOXES which I used to determine the visitor's interests.

TEXT AREA BOXES for the visitor to type a multi-line
message. I used the TEXT AREA BOX in the above form for the visitor to let me know of a
good website, to tell me a story or to just say "Hi!".

Below this paragraph is the complete HTML document that creates the above form and then
we will discuss the various parts. Please SWITCH to NOTEPAD,
type in this HTML document so you can try it out using your own e-mail
address and also to get a feel of how a form works and how it appears
in your e-mail as an attached file and also what it will look like
when you load it into a word processor. You will also need this form typed
in to answer some questions. And you can learn a lot by experimenting!
Don't forget to include the
usual HEAD, TITLE and BODY tags. Once you have typed it in, you can then
SWITCH back to your browser, load the HTML file and begin testing and experimenting.

Now here is the HTML document. You can leave out the IMG tag if you don't
want to save the guestbook picture in your working directory.

<IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""><STRONG>I
would be most pleased if you would take a moment to sign my guestbook and tell me what you
think of my website.</STRONG>

THE FORM TAG

Our form begins with an image of a small guestbook followed by the instructions.
Images are completely dealt with in Lessons 7 and 8. Here are these lines again:

<IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""> <STRONG>I
would be most pleased if you would take a moment to sign my guest
book and tell me what you think of my website.</STRONG>

I did not include a guestbook picture in my actual guestbook. However,
I did make the guestbook title (My GuestBook) into an image so I could use a special font.

Once you get past the opening statements, you then have to tell the
browser that you are starting a form and what you want done with the
form. This command is:

<FORM METHOD="POST" ACTION="mailto:jbes@bfree.on.ca">

This command line does three things:

It tells the browser that a form is starting now.
FORM is a container element in that
it has an opening tag (<FORM> ) and a
closing tag (</FORM> ).
Everything contained between these opening and closing tags is part of
the form.

It tells the browser that the METHOD of dealing
with the form data is to POST it. METHOD
is a form attribute and POST is called the
"value" of the attribute METHOD.

It tells the browser to post all the data from the visitor to
my e-mail address (not my real e-mail address).
This is ACTION part.
Giving the e-mail address will only work in Firefox and Netscape style browsers.
As stated above, there are two
basic problems associated with using an e-mail address with the ACTION attribute:

Few browsers support the "mailto:" action at this time. So only
visitors that use those browsers will be able to submit form data to you. Everyone
else will either get an error message or the e-mail box simply opens up in the normal way
for someone to send an e-mail to you which has nothing to do with the form.

If a browser does accept the mailto: e-mail address, it will still not decode the form
input before mailing it to you. Thus you get all your form input encoded which as
you read earlier makes the data difficult to read.

If you are going to try the mailto: command anyway, be sure to replace my e-mail address
with yours so you can fill out the form and send the data to yourself. If you use the given
e-mail address in the mailto: command, you will only get an error message stating
that the address does not exist - so you need not worry about sending
me any of your test data. You can therefore experiment with the form all you like.

If you are planning to obtain a free form or guestbook, you will be given the FORM
tag from the company to insert into your coding. It will contain the necessary METHOD and
ACTION attributes to have the form contents sent to their CGI script for decoding.

USING A CGI SCRIPT
INSTEAD OF THE MAILTO: COMMAND

If a CGI script is used to interpret the form data, the ACTION
attribute must then specify the URL of the CGI script which processes the
form and sends the processed information back to you. That is, when using a CGI script
to interpret the data, the action will not be an e-mail address as given in the previous section,
but will be an address such as:

In this case, the ACTION attribute is sending the visitor information to a
CGI script (which I called "process_form") - wherever
that CGI script is located. That is, the attribute ACTION contains
the name of the CGI script to process the form (process_form) as well as the location of the
script (domain_name.com/cgi-bin/your_directory).
Thus the ACTION attribute contains the complete URL of the CGI script.

In our form, the METHOD of dealing with the form data is to
POST it. Well, there are actually
two METHODS that can be used. That is, there are two
values for the METHOD attribute. One is POST
as shown and the other is GET. GET is
the default value if you don't use the METHOD attribute (the only
required attribute for the FORM tag is ACTION).

Now when using GET instead of POST, the data from the form is packaged
and appended to the end of the URL specified in the ACTION attribute. This
data is actually sent to the CGI as a query-string variable
attached to the end of the ACTION URL as in:

http://www.domain_name.com/cgi-bin/your_directory/process_form?visitor_name=John+Gilson&
visitor_address=6+Pioneer+Place and so on...

When the server executes your CGI script to process the form, its sets
this variable called "query-string" to everything after the question mark in the
URL. Thus with the GET method, all the encoded data is assigned to the query-string
variable.
The drawback to the GET value is that there may be limits on the data
that can be stored in the variable. So if you could expect to receive
lots of data (especially if you have a large comment field), you might lose
some of that data if you use the value GET.

POST, on the other hand, sends the data separately
through a direct link to the server. In other words, it is sent as a separate stream and is not
assigned to a variable. For this reason, you can have as much data as you want.
It may therefore be safer to use POST rather than GET for the METHOD
attribute. When you get a form or guestbook off the net, you will be given the coding to use so you
don't have to worry whether to use POST or GET. In either case, the form data ends up on the server side
(and therefore in your CGI script) as coded data such as:

visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city=
Brantford&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7
&visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.
on.ca%2FHTML and so on ...

The first step in your CGI script, then, is to decode all that data so you can
manage it better.

Here are some final points for this section:

A form may contain markup tags to mark up your text.

A form cannot be nested. That is, you cannot have a form inside a form.

If your form is in a frame, you may want to include the attribute
TARGET as part of any URL, as in TARGET="_top" to load the result into the
full body of the current window. Two other attributes for TARGET are:

blank (TARGET="_blank") to load the result into a new
blank window and

parent (TARGET="_parent") to load the result into the
immediate parent of the document the form is in.

Let's now look at each of the five form areas given in the
above form.

TEXT BOXES

The first form area is called the TEXT BOX. Text boxes
contain one line of text and are often used for names, addresses, credit
card information, etc. I used it to get the visitor's name, address, city, State/Province, Zip/Postal code,
e-mail and website addresses. A guestbook normally will not require all this information (see my
actual guestbook). Here are the first four text boxes to serve as a reminder:

Name:

Address:

City:
State/Province:

Here are the first two lines from the form asking for the name and address:

Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35">

<P>Address: <INPUT TYPE="text" NAME="visitor_address" SIZE="35">

A TEXT BOX is a box that allows for one line of text. In the first
example, the viewer or visitor is asked to type in his or her name.
The visitor will first have to click into the box to activate it. In the
second box, the visitor is asked to type in the address.

The INPUT tag simply tells the browser that visitor input will
occur here. This INPUT tag comes with a number of attributes:

TYPE is an INPUT attribute that specifies the type of
control that is to be used. In this case its value is "text" meaning
a one line text box.

NAME is the attribute that allows you to assign any
name to the text box. In our case in asking for the visitor's name, I
have named it "visitor_name". In other words, the attribute
NAME has the value "visitor_name". Thus
when the data is collected by the
server, the information typed in this text box will be identified by the value
"visitor_name". Basically, when each piece of information is sent
by the visitor to the CGI script, it is sent in two parts: first
an identifier or name so you will know what data will follow
and the second part is the actual data. An important part
of a form element is this concept of NAME/VALUE
pairs. In our example, the name is "visitor_name" and the data "value" is
whatever the visitor types in for the name. Using my name, John Gilson,
this would be sent to the CGI script as: visitor_name=John+Gilson.
Of course a CGI script would print this information, along with all the
other information from the form, in a nice easy to read manner. Also keep in mind that
nothing is actually sent to the server until the visitor clicks on the
"Submit!" button at the bottom of the form.

The SIZE attribute denotes the character
length or size of the text box - that is, the
length of the input field. I chose a length of 35 for both the name and address,
20 for the city and 25 for the State/Province. You can make your text boxes
any size you wish. If the visitor enters more characters than will fit into the box,
the text will scroll. I like to think of "character length" as representing the "size" or "length" of
the text entry box as opposed to the "number of characters". This is because not all
characters are the same size. For example, in any text box, I can place
more lower case f's than I can upper case
W's because a lower case "f" simply takes up less space
than an upper case "W". So the number of characters
that will actually fit into a box will vary depending on the characters used.
However, you could think of the number of characters as being "average
size" characters. I like to think of the lower case "h" as representing an average size character.

Using the VALUE attribute, you can have text printed in
a text box when the form appears on the page (called "default text").
For example, if you want
to ask for the visitor's country using a text box and you know that most of your visitors
will be from the United States, then to have the name "United States" appear in the
box as default text, the INPUT tag would be something like:

Problem 2: SWITCH back to NOTEPAD and this time delete both the SIZE and
MAXLENGTH attributes from the visitor name box so that the line now looks
like:

Name: <INPUT TYPE="text" NAME="visitor_name">

Now save the file, SWITCH back to your browser and load the file. Since
we no longer have a box size, what character length did the browser use? In other
words, what is the default value for the box length if
you do not include the size attribute?

You can use a table to set up your form elements. So if you do not
like the way the text boxes line up, control them through the use of a
table. See Lessons 11 and 12 if you need to review tables.

Use <BR> (line BReak) and
<P> (Paragraph)
tags to space the form elements. As you likely noticed, I used the <P> tag to
double space the different sections of the form. I also wanted the "City"
and "State/Province" on the same line and so I did not force a line break between them
with a <BR> or <P> tag.

You can also use the ampersand command (&nbsp;)
to force extra spaces between the headings (such as the heading "Name:") and the text boxes.
I used the ampersand command to force extra spaces in different locations in my actual
guestbook. You can see how this was done by visiting my guestbook page and choosing
"VIEW" from the menu bar and then "SOURCE" or "DOCUMENT SOURCE".

POP-UP MENU BOXES

The second form area is the POP-UP MENU BOX. Creating menus
for your visitors makes it easy for them to enter information or to
provide criteria for a search without having to type anything. As
an illustration, I used the
pop-up menu box for the viewer to choose the country. Here is a reminder of
what it looks like (in an actual situation, there would be many more countries
listed):

Country:

The box, until clicked on, only shows one item. In our case, it is the
"United States". Here is the HTML coding to generate the pop-up menu box.

The SELECT tag in the first line tells the browser that
a SELECT form or POP-UP form is going
here. In this context, SELECT means to
"SELECT" from a menu of choices. SELECT is a container
element in that it also requires a closing tag (</SELECT> ). Everything
in between the opening and closing tags is part of the pop-up menu form.

The NAME attribute follows the same reasoning
as in the above TEXT BOX section in that it specifies the NAME of the country
list (part of the NAME/VALUE pair we discussed earlier).
Visitor_country is the name for this
menu of countries that will identify the country when it is collected by the server.
I am naming this data "visitor_country" implying that what follows
is the visitor's country. Thus if a visitor selects Canada, the information
will be sent to the server as visitor_country=Canada.
Again keep in mind that no information will be sent to the server until the
visitor clicks on the Submit! button at the bottom of the
form.

The SIZE attribute has a value of "1". This denotes
the number of items that must be initially visible to the visitor. If set to "1", you will
get a drop-down list. If it is set to more than one, you will get a scrollable list.
If you use the attribute MULTIPLE as in:

Country: <SELECT NAME="visitor_country" SIZE="2" MULTIPLE>

it will allow the visitor to select more than one item from the menu. Exactly
how a visitor can select more than one item at once is dependent on his or her
browser's platform - so do not include "instructions" on how to do this.
They may be wrong and can cause a lot of confusion.

Obviously, allowing a selection of more than one country is not a good
example as the visitor can only live in one country - but it illustrates the point.
Normally the pop-up menu is used to make one selection.

Each OPTION tag denotes an item in the menu. I only
gave 7 choices or options to illustrate the pop-up menu but you can have
as many as you wish. Note that with the United States option, I used the attribute
SELECTED.
This attribute gives the default value. Since I wanted
the United States to be the choice by default, I used the SELECTED
attribute to place this country's name in the box. So use the
SELECTED attribute if you feel there is a most common answer.

You can also use the VALUE attribute with the
OPTION tag.
The VALUE attribute allows you to further identify the data when it is
collected by the server. For example, suppose in your form you decide
to ask for your visitor's age category. You could have something like:

RADIO BUTTONS

The third form area is called the RADIO BUTTON. These
are the little round buttons that you see in our form for rating the website and
to find out if the visitor is male or female. Here again are the radio buttons for
our form:

Please rate my website!
It's Great!
It's Good!
It's Fair!
It's Poor!

Tell me a little about yourself:
I am Male
I am Female

Each button is "alive" which means that you can click on any one of them.
When you click on a radio button, the button "darkens"
in the center. Also,
you can only choose one button. If you choose
another button, the first one will give up its selection. The name
Radio Button comes from "way back" when car radios
had big black plastic buttons to select stations. When you pushed a button,
the dial moved. When you pushed another button, the first choice was
dropped and the dial moved again. You couldn't push two buttons at once.
Radio buttons in forms work in the same way.

Here are the lines that give these buttons beginning with the instruction.

Note that the group of four buttons to rate the website all have the
same NAME which I called "rating". For
the two buttons involving the sex of the visitor, I gave the same
NAME "sex".
The NAME attribute
identifies each radio button in a set of buttons and in any one set of radio
buttons, only one button can be selected. In other words, out of all the
radio buttons with the same name, only one can be active
at a time. Thus the NAME attribute names the category the buttons are in.

Each radio button must have a VALUE.
The VALUE (part of the NAME/VALUE pair) is the
name assigned to the radio button. You must define a value for later
sorting of the data by the CGI script. For example, if the visitor chooses the radio button
"It's Great!", the VALUE "great" will be sent to the server (instead of "It's
Great!"). Thus the information submitted to the server will be "rating=great".

Note in the choice "It's Great!", I included the attribute
CHECKED. The attribute
CHECKED makes the radio button active by default. Thus the
choice "It's Great!" will be darkened or checked - hoping that most visitors
will agree with this choice and move on to the next part of the form.

If it is not clear that only one choice is to be made, then you can
always include an instruction such as: Please select one of the following.

After rating the website, the next part of the form is to choose
Male or Female.
These statements follow the same reasoning as for rating the website
except that there are only
two choices. As stated above, choosing male or female is a different
category than the website rating, so it needs its own name which I called "sex".
Note that I did not select one to be the default value
because there is no "most common" answer. Thus no default was set with the
"checked" attribute.

CHECK
BOXES

The fourth area is the CHECK BOX. I used the
CHECK BOX to determine the visitor's interests.
The given list in our form is only for illustration purposes and is by no means meant to be
a complete list. Often with lists such as these, there is also the choice
of "Other" and then allowing the visitor to type in what
the "other" is (as I did in my actual guestbook).

Here are the check boxes as a reminder:

Please indicate your interests. Check off as many as you
wish!
skiing
swimming
jogging
reading
movies
surfing the net
sports in general
other

Check boxes are much like radio buttons except for three differences:

The item is a square (not round like a radio button).

It is marked with an X or with a
checkmark and not darkened as with radio buttons.

You can check as many items as you wish. You are not limited to one
selection as with radio buttons.

Here is the HTML code for this part of the form beginning with the
instruction.

The TYPE of INPUT as indicated is
"checkbox" (no space in the word "checkbox").
TYPE="checkbox"
produces a check box. A check box has two states - on and off. As with
Radio Buttons, the NAME indicates the "category" or "set" of
check boxes which I have named "interests". The
VALUE will only be sent to the server if the corresponding
check box is checked - that is, when the check box is "on". Otherwise it is ignored altogether.

Also note the following two points:

If visitors might find it confusing to know what to do, you could
include an instruction such as I did ("check off as many as you wish") or
something like: Select one or more of the following:

If you want one or more of the choices to be pre-selected by you, then use
the attribute CHECKED. You can check as many boxes as
you like so that when the form page opens up to the visitor, some of the
boxes will already have checks in them. A visitor can always remove a
check by clicking in the checked box.

TEXT AREA BOXES

The fifth and last area shown in the form is the TEXT AREA BOX
(also know as the TEXT BLOCK) and it allows the visitor to type in a
block of text. The text area box is also called the COMMENT BOX. Here is the Text Area
Box once again beginning with the instructions:

Seen any good websites lately? Got a good story to tell? Write them down
or just say Hi!!

The Text Area Box can be as reasonably big as you want. As well, more text can be entered
than can fit in the display area.

Here is the HTML code for the text area box beginning with the instructions:

<STRONG>Seen any good websites lately? Got a good story to tell?
Write them down or just say Hi!!</STRONG>
<P><TEXTAREA NAME="comment" ROWS="15" COLS="50"></TEXTAREA>

Now for the discussion:

TEXTAREA is one word. This tag tells the browser
that a multi-lined Text Area Box is to
be created allowing the visitor to write something in the box. The Text Area Box
is like the Text Box we used for the name and address except that the Text
Box only allows for one line of text. The Text Area Box allows for many lines
of text. All the viewer has to do is click in the box to activate it and then begin typing
the message.

The TEXTAREA tag unlike the TEXT BOX statement, requires a closing
TEXTAREA tag as indicated by the </TEXTAREA>.

Note that I named the text area box "comment" but you can
give it any suitable name. When a visitor types in the box, the data will be sent
to the server as comment=data. Thus I know that any data
from the text area box will be first identified by the name "comment".

ROWS="15" tells the browser to set up 15 rows for the text
and COLS="50" tells the browser to set up 50 columns for the
text - that is, 50 characters per row. The ROW attribute specifies how
high the text area box will be.
The COLS attribute specifies how
wide the text area box will be. You can of course make the box
bigger or smaller - whatever suits
your needs. If you use a column width of about 50, you will be
certain that the text area box will easily fit in all browsers. The text is printed in a "courier"
font meaning that each character takes up the same amount of space - whether a lower case "f"
or an upper case "W". This allows the width to be specified as so many characters per row.

Another attribute that can be used with the TEXTAREA tag is the
WRAP attribute. It specifies how text will wrap. Possible
values are "hard",
"soft" or "none". For example, if you
want to specify no wrapping of text, it will be WRAP="none". You can experiment with
these attributes so see their effects on the typing of text in the text area box.

In Explorer, a vertical scroll bar is displayed in the TEXTAREA box. In
Firefox and Netscape, scroll bars will show up when needed.

Problem 3: SWITCH to NOTEPAD and change the TEXTAREA tag to the
following:

SUBMIT AND RESET BUTTONS,
CLOSING A FORM PAGE

Finally we need something to allow the visitor to send the visitor information (that is,
the contents of the form) to the server and to allow the visitor the option of starting
over. Two buttons are then needed - one to SUBMIT the information or data to
the server and one to REDO the information. Here are these two buttons again
beginning with a "thank you":

Thanks for visiting!

Here are the commands I used to place these buttons beginning with the thank
you. If your browser supports coloring blocks of text, you may have
noticed that the "Thanks for visiting!" was printed in a maroon color. You can omit
the FONT container element if you wish.

TYPE="submit" creates a 3-D button that submits the
visitor's form data when clicked on.

You can give the button a name (an instruction) by using the
VALUE attribute. In our form I named it
Submit! (VALUE="Submit!).
Whatever instruction you decide to place on the button, just make sure it's
clear that a click will send the visitor's information to the server.

Problem 5: The VALUE attribute is optional. Switch
to NOTEPAD and delete the VALUE="Submit!" so that
the line now looks like:

<INPUT TYPE="submit">

Save the change, load the changed HTML file into your browser. What is the
default submit message (that is, the default instruction) on the submit button?

TYPE="reset" creates a 3-D button that clears the
entire form and resets everything back to the original values when clicked on.
You can also give this button a name or instruction by using the
VALUE attribute. You need to give the
visitor an opportunity to start over with a fresh form - including all the default values.
If everyone could fill out a form perfectly the first time, we would
not need the "delete" and "back space" keys on the computer keyboard. So give your
visitors a "reset" button that will restore the form to its original state,
because sometimes it's easier just to start over with a clear form with all
variables returning to their default settings.

The VALUE attribute for the reset button is used to give
the instruction. In our form I chose to use the instruction "Start over"
(VALUE="Start over").

Problem 6: The VALUE attribute for
the reset button is also optional. Switch to your text editor
and delete the VALUE="Start over". Save the change, load the
HTML file into your browser. What is the default
reset message?

A form must have at least one submit button. In other words, more than one
submit button is allowed. If each submit button has its own unique
NAME attribute, then the name of the
submit button selected by the visitor is sent along with the rest
of the form data. This allows the CGI script to determine which button was pressed.
For example, this can be done with:

<INPUT TYPE="submit" NAME="submit_name" VALUE="Submit!">

where "submit_name" is the name assigned to the button and with each button
having its own assigned name (part of the NAME/VALUE pairs
to be sorted by the CGI script).

You can also have one or more images instead of a button to submit the form data
or have a combination of buttons and images to submit data. Each image can also have its
own name so that the CGI script can determine which image was clicked on.
Using an image to submit data is the topic of the next section.

The URL specified in the ACTION attribute of the FORM tag does not have to
be an e-mail address or a CGI script. One of the reasons for not wanting this is to get a
3-D button which when clicked on takes you to a new page. For example, in Lesson 6 on
links, part of the lesson creates buttons for linking to
other pages using the FORM container element. For example, to create a simple 3-D
button that links to my home page (index.htm), we have:

If you now go back to Lesson 6, you will have a better understanding of the HTML
coding involved in generating link buttons. Note that buttons are not
normally used for ordinary links. Buttons are usually used only with forms and other situations that
involve submitting data.

Finally we MUST close the FORM page with the closing form tag which
is </FORM> and end the HTML document with the usual closing
BODY (</BODY>) and HTML
(</HTML>) tags.

USING AN IMAGE TO SUBMIT
FORM DATA

Instead of a submit button, you can use an image to submit the data
information. With an image you don't need a "submit" button because the
form data is automatically sent when the user clicks on the image.

Here is the HTML code using an image to submit the form data:

Name: <INPUT TYPE="image" SRC="image.gif" NAME="image_name">

Note the following points:

"image.gif" represents the name of the image (or the
URL of the image to be used). If you do not precede
the image with an instruction, the image should be self-explanatory to
the visitor. In other words, it should be clear to the visitor that the
image is to be clicked on to send the form data to the server.

When the visitor moves the mouse pointer over the image, it will
turn into a pointing hand indicating that the image is active.

When the visitor clicks on the image, the coordinates
of the clicked point, measured in pixels from the
upper left hand corner of the image,
are also sent. The coordinates are sent as x and
y coordinates. The x-coordinate
is submitted with a ".x" appended to the
NAME (which I called "image_name" - but you can give it any suitable name).
The y-coordinate is submitted with a
".y" appended to the name. Try this feature
to see it work. If you were using a map of the world as the image for example,
you could ask the visitor to indicate the country where he or she lives by
clicking on the map. From the coordinates, the CGI script can then determine
the visitor's country or region. However, for most people, the coordinates
will not provide any useful information.

If you want to use more than one image to submit the data, you can give
each image its own unique NAME.

Note the absence of the VALUE attribute in this INPUT statement.
The VALUE attribute is only used to place instructional
text on buttons - not on images. With images, the coordinates of the clicked point
take the place of the VALUE attribute ("NAME=coordinates" is sent to the server as opposed to
NAME=VALUE in the name/value pairs).

As is always the case with images, you can use the
ALIGN attribute to specify the alignment of the surrounding
text with the image. Possible values are "top",
"middle", "bottom",
"left" or "right".

In general, you should only use an image at the end
of the form to submit data because as soon as the image is clicked on, the form data is
immediately sent to the server. You can, however, create a questionnaire out of images
if you make the next question appear after the data from the last question has been sent to
the server.

NAME="visitor_password" simply means that when the
data is collected by the server, the characters typed in the password box
will be identified by the name "visitor_password".

The SIZE attribute for the length of the box is
optional. The default size, however, is dependent on the browser used. On many browsers, it
is 20 characters. On my browser it is 29 characters. It is therefore recommended that you
include the SIZE attribute for complete control of the box length.

The MAXLENGTH attribute is also optional. MAXLENGTH
simply defines the maximum number of characters that can be entered.

HIDDEN TEXT

Hidden elements are used to store information gathered from one
form so that it can be used with the data from another
form. In other words, hidden elements are used by CGI scripts to transfer
information from one form to another. Nothing is displayed by the
browser (that is, hidden elements are invisible (hidden) to the visitor), but the
information is still sent to the server.

Here is the HTML code for hidden text.

<INPUT TYPE="hidden" NAME="hidden_text" VALUE="visitor_id">

Note the following points for this INPUT line:

The information to be transferred is assigned the variable name "hidden_text".

The "visitor_id" is the information itself that is to be transferred.

The hidden text can be placed anywhere in the body of the HTML form.

Here is an example that involves hidden text. As you may know, I sell on this website
a JavaScript course, and some other products and services.
It used to be that a company by the name of Net MoneyIN
processed all my credit card orders. If you clicked on the "order button", you left my website
and were taken to Net MoneyIn's secure site to fill in the form with your credit card information.
At the top of this secure order page was my company name (Brantford Educational Services)
as well as the name of what you were ordering (for example, JavaScript Course),
the price ($19.95), the number of copies being ordered (which was set to 1), and the total
cost ($19.95). Now if this was the standard form used by all Net MoneyIn customers, how did
my information get there on their secure order form? Well, the answer
is through hidden text. Here is how it works: On my HTML web page that advertises
my JavaScript course, the button that you clicked on to take you to
Net MoneyIn's secure order page was a SUBMIT button in a FORM
element. Here were some of the actual statements:

These are the HTML statements given to me by the people at Net MoneyIn. Note that my company
name, "Brantford Educational Services" was stored in variable "sn". That is, "Brantford
Educational Services" was the VALUE assigned the NAME "sn" (making up a "name/value" pair).
I was not allowed to change the NAMES because they were used by Net MoneyIn for
all their business customers to transfer the VALUE information to the order page
when the order button was clicked. However, I was allowed
to change the VALUES. So if I had a new company name, or a new e-mail address,
or a new price, I could make the change in my HTML document,
and the new information was then instantly transferred to the secure order page when the SUBMIT
button was clicked! All companies that were involved with Net MoneyIn had to use the same
NAMES but with VALUES according to their own businesses.

Also, when you clicked on the order button and went to Net MoneyIn's secure order page,
you could choose SOURCE or DOCUMENT SOURCE from the VIEW menu to see my
company name, book title, price, etc., as if they were typed in like any other part of the
HTML document. They were, however, transferred to those spots as hidden elements
by a CGI script when you clicked on the order button!

URL ENCODING

URL encoding is the format that the browser uses to package the data from a form when it
is sent to the server. The browser gets all the names and values from
the form input, encodes them as name/value pairs, translates special characters
such as those used in encoding,
lines up all the data and sends them to the server.

Each name is separated from its corresponding value by an equal sign (=). In cases
when the visitor does not enter a value for a particular request, the name still appears
in the output, but with no value (for example, "visitor_address=").

Some special characters are encoded in hexadecimal preceded by a percent
sign (%). Special characters include =, &, /, : and %.

Spaces in the input are indicated by plus signs (+).

The first step for the CGI script is to decode all that data so you can manage it better.
Fortunately, CGI scripts do exist (or can often be easily made up) that will decode the
name/value pairs into something you can more easily work with. You can begin by
checking with your internet provider. For a small fee they may be able to provide the
CGI script you need. If not, you can then search the internet for suitable scripts or
you can obtain a free guestbook or a free form as discussed in the next section. These
free guestbooks and forms include free access to CGI scripts to interpret the data.

FREE FORMS AND
GUESTBOOKS

I will end this lesson by stating that there are many places on the internet that
offer free forms and guestbooks. You can obtain a free form or a free guestbook by visiting the
following "Free Stuff Page":

Not only do they have links to websites offering free forms and guestbooks, they also have links to
a host of other free things such as free counters, free graphics, free games, etc., etc.

The main difference between a free guestbook and a free form
is that a guestbook is simply a very short form. With most free guestbooks, all the
visitor has to do is enter his or her name, email address, and a comment (much like a real guestbook that you
would sign at a function - a name and maybe an address or comment). If the visitor has a home page
there is often also the opportunity to enter the URL. With a free guestbook, visitor data is usually posted
so everyone can view all the comments that are made. Also, when a visitor chooses to sign the guestbook,
he or she is taken to the website of the company that has the guestbook. That is, everything is done from
a remote server which can slow things down a little. I tried out a number of the free guestbooks from the
above location and they all worked.

I wanted more than a simple short form for my guestbook. I wanted complete control over every item
in my guestbook. I was able to do that from a company called Freedback.com
whose URL is given below. Freedback.com offers free forms with a lot of flexibility. I did the
complete HTML coding for my guestbook and used their CGI URL in the ACTION attribute of the
FORM tag to decode the data. Complete instructions are provided by Freedback.com. If you want
to see my guestbook coding which is based entirely on the information presented in this lesson, just visit
my guestbook and choose SOURCE from the VIEW menu.

My guestbook is in my directory on my ISP's server. This way I can add to the guestbook,
delete items from the guestbook - make any changes that I want. With Freedback.com, you are
able to have as many text boxes, check boxes, radio buttons, pop-up menus, etc. as you like. You are in complete
control of what you want your form to look like and what goes into your form - and it's all FREE!
Only when the visitor clicks on the "submit" button does the visitor information go to Freedback.com's
server to be decoded by their CGI script. When the visitor chooses "submit", a summary of the form data
is displayed to the visitor and at the same time, the decoded data is e-mailed to me. That is, Freedback.com
sends me the same summary as displayed to the visitor. Freedback.com makes their money from the
advertising that is displayed above the summary.

Here is Freedback.com's website that offers the free form that I used:

ANSWERS

You could not type more than 34 characters.
The MAXLENGTH attribute lets you
define a maximum number of characters
that can be entered in the text box. Keep in mind that a visitor can
type in more text than will fit in the text box - so if you want to make sure
there is a limit, use the MAXLENGTH attribute.

The default character length if you do not include the SIZE attribute is 20 for most browsers.
Because you never really know how someone's else browser displays default values, you should
always try to maintain control when possible. Thus you should include the SIZE attribute with your
text boxes.

The words "My favorite website address is:" appeared in the text area box.
If you want to have something written in the text area box when the form
appears on the page (called "default text"), write the information just before the
</TEXTAREA> as shown in the problem - that is between the opening
and closing TEXTAREA tags. Note: Placing HTML coding in the text
area box will not work.

To determine the default number of rows and characters per row, first
remove the ROWS and COLS attributes so the line looks like:

<P><TEXTAREA NAME="comment"></TEXTAREA>

Then SAVE the changes, load the document into your browser and count the
number of rows and the number of characters per row. The results will vary
depending on the browser used. Many browsers will default to 4 rows and 40
characters per row. My browser defaults to only one row with 20 characters per
row. To maintain control of the size of the text area box, I strongly
recommend that you include the ROWS and COLS attributes. Here is a problem I
did not ask you to figure out. What is the maximum number of
characters that a visitor can enter into a text
area box? Answer: 32,700 characters.