So You Wanna Be A Salesman?

In order to sell anything in the internet, or even gather information about your readers, you need some kind of a form for them to fill out. You know the type. You've probably even filled one or two out. They ask for your name, address, credit card number, third cousin's step mother's unkless wife's date of birth, etc.

This type of data retrieval is called a FORM, and is really a difficult process.

There are usually two parts to making a FORM work. The first is the HTML part, which we will cover here. The second is the CGI part, which we will avoid here. The HTML form, which we will cover, sends data to a computer program running on the web server your page is deposited on. That computer program, called a CGI, extrapolates the necessary data from your form, and regurgitates it in a ( hopefully ) secure manner so that your ex-wife's third cousin's credit card isn't violated. Because of the complexity of the subject, we won't cover the CGI part now ( besides, I'm not teaching Perl here, just HTML ). We will, however cover the basics of the HTML part.

Forms are actually pretty simple. The basic tags are:

< FORM METHOD="POST" ACTION="/cgi-bin/form.exe" >

Your form content goes here < FORM >

Not too frightening yet eh? The METHOD tells it what to do with the form info - ya post it. But where? The ACTION tells it where to post the data - in this case, it is sent to an executable file called form.exe located in the cgi-bin directory of the webserver. This executable file looks at the data and, well, does stuff to it. Perhaps it builds a database. Perhaps it sends mass spam. Perhaps it bills a credit card.

If instead of POSTing your data TO the webserver, you wanted to gather information from the webserver to input to your webpage, you would use the GET method instead of the POST method.

The FORM tag is pretty useless in and of itself. It's the stuff we INPUT on the form that is what we need - so let's learn how to input, shall we?

< FORM METHOD="POST" ACTION="/cgi-bin/form.exe" >

< INPUT NAME="FirstName" TYPE="TEXT" SIZE="12" >

< FORM >

This code gives the following results:

First Name:

As you can see, the < INPUT > tag created a TEXT box to write in. That's what we mean by TYPE-"TEXT" Also, the text box is 12 characters long. We are assuming our customers don't have 32 letters in their first name. To accomplish this, we say SIZE="12".

If we wanted to input more than just one line of information, though - say you run a cooking site and need to get recipe's from your readers - you would have to use a slightly different input type - called a TEXTAREA. The text area is used as follows:

Your Recipe :

The code used to create this Text Area looks like this:

< TEXTAREA NAME="RECIPE" ROWS="10" COLS="40" >
You may type your recipe here.
< /TEXTAREA >

Other methods of input include Checkboxes, Radio Buttons, Select, etc. Let's take a look at some of these, and their possible uses:

For either - or / true - false / questions, the radio button reigns supreme!
Pick a color:
BLUE
RED
The code for this is:

BLUE < INPUT TYPE = "RADIO" name = "COLOR" VALUE = "BLUE" >
RED < INPUT TYPE = "RADIO" NAME = "COLOR" VALUE = "RED" >

You could perform the same type of selection using Checkboxes. Checkboxes work well with multiple choice as well:

Pick a color:
BLUE
RED
The code for this is:

< INPUT TYPE = "CHECKBOX" NAME = "COLOR" VALUE = "BLUE" > BLUE
< INPUT TYPE = "CHECKBOX" NAME = "COLOR" VALUE = "RED" > RED

A third option for performing this same type of questionaire is the SELECT / OPTION type of input. I guess if you want to be litteral, it's not quite an input type, but a selection option, as it doesn't go in the input - type tag, but has a separate tag of it's own. Here's an example, and the code that goes along with it.

<SELECT >

< /SELECT >

Once you get your form to look the way you want it, you have to submit it to the CGI file on the server. There is a special input tag for this:

< input type="submit" value="Email This Information" >

Which creates a button like the one below:

Note - time has passed since the writing of this section - and it has since become an internet Faux Pas to send information (especially addresses, credit card numbers, etc) via email, as it can be lifted by unwanted eyes. There are better ways (PayPal being one of the best) that are more secure. That being said - why do we even teach it? Because it is PART of HTML code, and you came here to learn HTML code. Now that you've learned it, use at your own risk.

You may also choose to create a reset button to clear all the values:

Now let's put all this together:

On The Following Indicator... ( GREEN will indicate your current location)
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24

[ COURSE INDEX ] [ HTML GLOSSARY ] [ HOME ]

Otherwise - please click to visit an advertiser so they know you saw their ad!

This Course was written by Ray Dall © All Rights Reserved.
This page and all its content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1

VISITORS: