LESSON SIXTEEN - FORMS


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Introducing forms | | CGI - Common Gateway Interface | | Creating a form | | The FORM tag | | Using a CGI script instead of the mailto:  command | | Text boxes | | Pop-up menu boxes | | Radio buttons | | Check boxes | | Text area boxes | | Submit and reset buttons, closing a form page | | Using an image to submit form data | | Password boxes  | | Hidden text | | URL encoding | | Free forms and guestbooks | | Please sign my Guestbook |


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:

  1. 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.
  2. There is no confirmation to the visitor of the form contents being sent.
  3. 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".

  4. 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.


top | | bottom |

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.


top | | bottom |

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:

  1. the FORM tag
  2. the actual form elements where the visitor enters the information
  3. 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:

  1. TEXT BOXES for entering one line of basic text. I used several text boxes such as for the visitor's name, address and city.
  2. POP-UP BOXES which are menu choices. I used the pop-up box to determine the visitor's country.
  3. RADIO BUTTONS which I used to rate my website and also to determine if the visitor is male or female.
  4. CHECK BOXES which I used to determine the visitor's interests.
  5. 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>

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

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

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

<P>City: <INPUT TYPE="text" NAME="visitor_city" SIZE="20">
State/Province: <INPUT TYPE="text" NAME="visitor_state" SIZE="25">

<P>Country: <SELECT NAME="visitor_country" SIZE="1">
<OPTION SELECTED>United States
<OPTION>Australia
<OPTION>Canada
<OPTION>England
<OPTION>France
<OPTION>Netherlands
<OPTION>New Zealand
</SELECT>
Zip/Postal Code: <INPUT TYPE="text" NAME="visitor_code" SIZE="10">

<P>E-mail address: <INPUT TYPE="text" NAME="visitor_email" SIZE="35">

<P><STRONG>If you have a website, let me know and I will pay you a visit!</STRONG><BR>
website address: <INPUT TYPE="text" NAME="visitor_website" SIZE="45">

<P><STRONG>Please rate my website!</STRONG><BR>
<INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great!
<INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good!
<INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair!
<INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor!

<P><STRONG>Tell me a little about yourself:</STRONG><BR>
<INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female

<P><STRONG>Please indicate your interests. Check off as many as you wish!</STRONG><BR>
<INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing
<INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming
<INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging
<INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading
<INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies
<INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net
<INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general
<INPUT TYPE="checkbox" NAME="interests" VALUE="other">other

<P><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>

<FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR>
<INPUT TYPE="submit" VALUE="Submit!">
<INPUT TYPE="reset" VALUE="Start over"></H3></FONT>
</FORM>

</BODY>
</HTML>

Now for a discussion on the above HTML coding:

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:

  1. 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.
  2. 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.
  3. 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:
    1. 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.
    2. 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.


top | | bottom |

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:

http://www.domain_name.com/cgi-bin/your_directory/process_form

In other words, the FORM tag will look something like:

<FORM METHOD="POST" ACTION="http://www.domain_name.com/cgi-bin/your_directory/process_form">

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:

  1. A form may contain markup tags to mark up your text.
  2. A form cannot be nested. That is, you cannot have a form inside a form.
  3. 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.


top | | bottom |

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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:

    Country: <INPUT TYPE="text" VALUE="United States" NAME="visitor_country" SIZE="25">

    If a visitor is not from the United States, then he or she would simply have to erase the name and type in the correct country.

  5. MAXLENGTH is another attribute you can use. To see what this attribute does, try the following problem:

    Problem 1: SWITCH to NOTEPAD and add the following attribute and value to the INPUT tag that asks for the visitor's name:

    MAXLENGTH="34"

    so that the complete line looks like:

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

    Now save the file, SWITCH back to your browser and then load the file. Type in a very long name - longer than the box length. What happened?

    Click here to go to the answer section |

    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?

    Click here to go to the answer section |


Note:

  1. 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.
  2. 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.
  3. 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".

top | | bottom |

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.

Country: <SELECT NAME="visitor_country" SIZE="1">
<OPTION SELECTED>United States
<OPTION>Australia
<OPTION>Canada
<OPTION>England
<OPTION>France
<OPTION>Netherlands
<OPTION>New Zealand
</SELECT>

Note the following points concerning the pop-up menu box:

  1. 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.
  2. 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.
  3. 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.

  4. 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.
  5. 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:

    Age: <SELECT NAME="visitor_age" SIZE="1">
    <OPTION VALUE="child">less than 8
    <OPTION VALUE="youth">8 to 12
    <OPTION VALUE="teenager">13 to 19
    <OPTION VALUE="young adult>20 to 29
    and so on...

    If the visitor chooses "8 to 12", the data sent to the server will then be: visitor_age=youth, as opposed to: visitor_age=8+to+12.

  6. You must end the pop-up menu box section with the closing SELECT tag (</SELECT>).
The next part of the form asks for the Zip/Postal Code, E-mail and website addresses. I used the standard TEXT BOX to obtain this information.


top | | bottom |

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.

<STRONG>Please rate my website!</STRONG><BR>
<INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great!
<INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good!
<INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair!
<INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor!

<P><STRONG>Tell me a little about yourself:</STRONG><BR>
<INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female

Now for a discussion on these lines

  1. The TYPE of INPUT is to be a RADIO button.
  2. 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.
  3. 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".
  4. 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.
  5. 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.


top | | bottom |

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:

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

<STRONG>Please indicate your interests. Check off as many as you wish!</STRONG><BR>
<INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing
<INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming
<INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging
<INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading
<INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies
<INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net
<INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general
<INPUT TYPE="checkbox" NAME="interests" VALUE="other">other

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:

  1. 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:
  2. 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.

top | | bottom |

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:

  1. 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.
  2. The TEXTAREA tag unlike the TEXT BOX statement, requires a closing TEXTAREA tag as indicated by the </TEXTAREA>.
  3. 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".
  4. 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.
  5. 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.
  6. 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:

<P><TEXTAREA NAME="comment" ROWS="15" COLS="50">My favorite website address is:</TEXTAREA>

Now save this change and load the HTML document back into your browser. What did this change do to the text area box?

Problem 4: Our text area box consists of 15 rows and 50 columns. Now SWITCH back to NOTEPAD and make whatever changes are necessary to determine the default number of rows and columns.

Click here to go to the answer section |


top | | bottom |

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.

<FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR>
<INPUT TYPE="submit" VALUE="Submit!">
<INPUT TYPE="reset" VALUE="Start over"></H3></FONT>

Discussion:

  1. TYPE="submit" creates a 3-D button that submits the visitor's form data when clicked on.
  2. 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?

    Click here to go to the answer section |

  3. 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.
  4. 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?

    Click here to go to the answer section |

  5. <H3 ALIGN="center"> centers the buttons and strongly emphasizes the "thank you".
  6. 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.

  7. 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:

    <FORM METHOD="GET" ACTION="index.htm">
    <INPUT TYPE="submit" VALUE="Return to Home Page">
    </FORM>

    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.


top | | bottom |

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:

  1. "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.
  2. When the visitor moves the mouse pointer over the image, it will turn into a pointing hand indicating that the image is active.
  3. 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.
  4. If you want to use more than one image to submit the data, you can give each image its own unique NAME.
  5. 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).
  6. 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".
  7. 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.

top | | bottom |

PASSWORD BOXES

TYPE="password" creates a single line text box except that when the visitor types in the box, the letters are hidden by bullets or asterisks.

Here is the HTML code to set up a password into your form (beginning with the instruction):

Please enter your password (max. 5 characters):
<INPUT TYPE="password" NAME="visitor_password" SIZE="6" MAXLENGTH="5">

Note the following three points:

  1. 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".
  2. 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.
  3. The MAXLENGTH attribute is also optional. MAXLENGTH simply defines the maximum number of characters that can be entered.

top | | bottom |

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:

  1. The information to be transferred is assigned the variable name "hidden_text".
  2. The "visitor_id" is the information itself that is to be transferred.
  3. 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:

<H3 ALIGN="CENTER">
<FORM ACTION="https://www.netmoneyin.com/scripts/orders/order.cgi">
<INPUT TYPE="hidden" NAME="sn" VALUE="Brantford Educational Services">
<INPUT TYPE="hidden" NAME="se" VALUE="bes@bfree.on.ca">
<INPUT TYPE="hidden" NAME="su" VALUE="http://www.htmltutorials.ca/ordering.htm">
<INPUT TYPE="hidden" NAME="pd" VALUE="JavaScript Course">
<INPUT TYPE="hidden" NAME="pp" VALUE="19.95">
<INPUT TYPE="hidden" NAME="ou" VALUE="1">
<BR><INPUT TYPE="submit" VALUE="CLICK HERE TO PLACE YOUR ORDER BY CREDIT CARD">
</FORM></H3>

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!


top | | bottom |

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.

A sample of encoded data is:

visitor_name=John+Gilson&visitor_address=1725+Orrington+Ave.&visitor_city
=Evanston&visitor_state=Illinois&visitor_country=United+States&visitor_code=60201
&visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.
on.ca%2FHTML%2F&rating=great&sex=male&interests=read&interests=internet ... and so on.

URL encoding follows these rules:

  1. Name/value pairs are separated by ampersands (&).
  2. 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=").
  3. Some special characters are encoded in hexadecimal preceded by a percent sign (%). Special characters include =, &, /, : and %.
  4. 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.


top | | bottom |

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":

http://www.thefreesite.com/

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:

http://www.freedback.com/?self


top | | bottom |

ANSWERS

  1. 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.
  2. 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.
  3. 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.
  4. 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.

  5. The default message is "Submit Query".
  6. The default message is "Reset".


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Seventeen |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email