The Garsonix guide to HTML

Chapter 7: Using Forms.

Forms can be used for many things. Search Engines use them to get the items you want to find on the Internet. One of the main uses of them is for mail response forms. This is what we are going to concentrate on, then if you ever need to use a form for a different purpose the things you have learnt here will still be useful.

How a form works is you create one with lots of text and tick boxes. The information typed into them is stored in your computer's memory. When you click on the send button this information is sent to a program on the computer that holds the web page. In the case of a mail response form this program sends you an email with the details typed into the form, but there are programs that can do many other things like in Search Engines where the program searches a database for items and returns a list of web pages. These programs are called cgi-scripts.

Internet Service Providers normally provide a number of cgi-scripts for their users and these should include a mail response one. I use one provided by my ISP but it would be unfair of me to show it in my examples because it is just for their customers. You will have to write to your ISP or look on their home pages to find about the cgi-scripts they provide.

The tag to start a form looks like this:
<FORM ACTION=" " METHOD="post">.
Between the " " for form action you type in the location of the cgi-script you are using. Before the </FORM> tag you can choose between several different kinds of input boxes.

The first you need on a mail response is a hidden one that tells the cgi-script who to send the response email to. This may be worded slightly differently for different cgi-scripts so it's worth while to check any instructions for your script. It looks like this:
<INPUT TYPE="hidden" NAME="recipient" VALUE="your.email@whatever.com">

At the end of your form you need a button that sends the data in the form, you may also want a clear button that lets the user clear the contents of the form if they fill it out wrong. These are both very easy. A submit button is done like this:
<INPUT TYPE="submit" VALUE="what you want it to say on the button">
A clear button is done like this:
<INPUT TYPE="reset" VALUE="what you want it to say on the button">

The most common type of input box is a simple text one that lets you type a line of text like your name. It looks like this:
<INPUT TYPE="text" NAME="name" SIZE=10 MAXLENGTH=20>
The name doesn't matter, it is what the input will be labelled on you email response. The size is the number of characters or letters that can appear in the box, however the box is capable of displaying more and this amount is indicated by the maxlength.

Here is an example that sums up what we have learnt so far:

<HTML>
<HEAD>
<TITLE>Forms.</TITLE>
</HEAD>
<BODY>

<FORM ACTION=" " METHOD="post">
<INPUT TYPE="hidden" NAME="recipient" VALUE="your.email@whatever.com">
<INPUT TYPE="text" NAME="name" SIZE=10 MAXLENGTH=20>
<INPUT TYPE="submit" VALUE="Submit form">
<INPUT TYPE="reset" VALUE="Clear form"> </FORM>

</BODY>
</HTML>

Display this example.

This form won't actually post it anywhere because the cgi-script's location has not been included. That really explains all the basis of forms. I will spend the remainder of the chapter going through the other types of input boxes and then we will have one big example that uses them all.

Radio Buttons.

These are a number of little buttons where only one can be selected. An example of their use would be for a question like "How old are you?" and then they could select which radio button suited them like 18-32. This is how it's done:
<INPUT TYPE="radio" NAME="age" VALUE=17>
You can include as many of these buttons after each other. To make them part of the same group they must all have the same name. The value would be different depending on what the button was labelled. It is important to include some text next to all buttons and boxes telling the user what the box is for.

Check Boxes.

These are little boxes that you can tick. For example next to a question like "Do you want to join our mailing list?" They look like this:
<INPUT TYPE="checkbox" NAME="Mailing-List" VALUE="Yes">
If the checkbox is ticked the response will have yes next to the name of the checkbox.

Pop Down Lists.

These can be used for similar things to radio buttons where there are lots of options but you can choose only one. It consists of a few tags and looks like this:
<SELECT NAME="something" SIZE=1>
<OPTION VALUE="sock">A Sock
<OPTION VALUE="shoe">A Shoe
</SELECT>
The value is what will be returned if that option is selected. The writing after the option tag is what is printed in the pop down list. You can include as many options as you want on the list.

Password Boxes.

These are the same as text boxes, except that all the characters typed appear as little stars so other people watching the computer can't see what they have really typed. The tag looks like this:
<INPUT NAME="secret" TYPE="password" SIZE=10 MAXLENGTH=20>
Size and maxlength have the same meaning as they do for a normal text box.

Comment Boxes.

These are also called text areas. They are a bit like text boxes but they let you type several lines of text. The tag looks like this:
<TEXTAREA COLS=60 ROWS=8 NAME="Comments"></TEXTAREA>
You do need both of the tags, anything you put between them is printed in the box. Rows is how many lines of text you can have. Cols is something to do with how wide it is but I'm not sure what it's measured in.

We have now been through all the tags so here is a big example which makes a big form that uses all the different kinds of boxes. The form will not actually send because the location of the cgi-script is not included. If you know of a cgi mail response script that is for wide public use I would be interested to know so I can use it in these examples.

<HTML>
<HEAD>
<TITLE>Forms.</TITLE>
</HEAD>
<BODY>

<FORM ACTION=" " METHOD="post">
<INPUT TYPE="hidden" NAME="recipient" VALUE="your.email@whatever.com">

Text box:
<INPUT TYPE="text" NAME="name" SIZE=10 MAXLENGTH=20>
<P>
Radio buttons:<BR>
What is your favourite colour:
<INPUT TYPE="radio" NAME="colour" VALUE="red">Red
<INPUT TYPE="radio" NAME="colour" VALUE="green">Green
<INPUT TYPE="radio" NAME="colour" VALUE="blue">Blue
<P>
Check Box:
<INPUT TYPE="checkbox" NAME="Mailing-List" VALUE="Yes">
<P>
Pop Down List:
<SELECT NAME="country" SIZE=1>
<OPTION VALUE="UK">United Kingdom
<OPTION VALUE="USA">America
<OPTION VALUE="other">Other
</SELECT>
<P>
Password Box:
<INPUT NAME="secret" TYPE="password" SIZE=10 MAXLENGTH=20>
<P>
Comment Box:
<TEXTAREA COLS=60 ROWS=8 NAME="Comments">Hello.</TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Submit form">
<INPUT TYPE="reset" VALUE="Clear form"> </FORM>

</BODY>
</HTML>

Display this example.

Now that we've covered forms we are ready to go onto the next chapter which is on frames.

Return to contents page.
Go on to next chapter.

A GARSONIX WEB SITE: ©1997.