Form Basics

You all know what forms are - if you look at the bottom you'll see one of them on this page for the search function.

Put simply, forms are what allow your site visitors to send information back to you or your site's server. The most common type of form is the mail form, used to e-mail the information entered to the site owner. There's a mail form on the code-warrior feedback page.

The FORM Tag

A form is in fact made up of two important elements - the FORM tag, which tells the browser how to process the data, and a set of input fields or controls (like text boxes, radio buttons, etc.) that actually take the user's input.

Let's start with the form tag - it will surround all of the controls to be bound to your form. To tell the browser what to do with your form inputs, it uses two attributes: METHOD and ACTION. The form's method is normally either GET or POST (depending on how it's meant to work). The ACTION will point to some other code that processes the data - maybe JavaScript, but more often it will be some kind of server side language script, often CGI.

CGI?

What's a CGI script? It's just some rather clever code written in a complicated language (Perl to be precise) that you don't need to worry about. It will take all your form data, play around with it and (in the case of a mail form) stick it in an e-mail and send it you.

All you need to know is the path to the CGI script - think of it as a normal file. You can use one on your own server, provided by your ISP, or one on an external server. A small number of ISP's will allow you to upload your own scripts to the server, but most restrict you to what they have provided.

Once you've found the path to the script, throw it into the ACTION attribute and set the METHOD attribute to either GET or POST depending on what the form you're using requires (check with your ISP / the author of the script).

Now that you've got your FORM tag sorted out, you've just got to add some fields / controls, to allow your visitors to actually send you some information. We'll look at the various controls on offer on the next few pages.

A Simple Mail form

Before we move on I should mention that you can actually create a mail form without using a CGI script. Simply use the following as your form tag:

<FORM METHOD="POST" ACTION="mailto:html@code-warrior.co.uk">

Replace the e-mail address with the address you want to send the information to. Add some controls and a </FORM> tag and you're done.

The problem with this type of mail form is that it's messy. It relies on the browser being set up with an e-mail program to process that data. If no program is set up, it won't work. And even if a program is set up, it may throw up some unusual messages.

Therefore for the smoothest of mail forms, use a script. Only use MAILTO as a last resort.

If you are going to use MAILTO might I recommend using the following code to prevent spam email address harvesters from adding your name to their database.

<script language="JavaScript">
document.write('<a href="mailto:' + 'yourname@' + 'yourdomain.co.uk' + '">' + 'youremailaddress' + '</a>');
</script>