Howto Guide to HTML Forms

Home

Introduction

Forms are very useful on a Web Site and are almost mandatory for a business site. Initialy they will be used for enquiries and latter on for orders to be placed. The HTML Tags to insert the various input "boxes" on a web page are not difficult and you can try it all out locally to see what it looks like. The difficulty comes in how to deal with the output of the Form and get it sent to you. This depends to a large extent on the ISP you are using to host your web site and what facilities they offer.

Overview

Before we start it is useful to have an overview of how a form is handled. Firstly there are a number of Tags for Input to the Form on the page which is downloaded from the server to the browser - all modern browsers such as Internet Explorer 3 or greater and Netscape Navigator 2 or greater handle Forms. The user enters text into the various Input "boxes" on the Form without any further communication with the server and they are held locally in various variables specified in the Input Tags. These can be called almost anything you like provided they are made up of alphanumeric characters and underscores such as my_name. There are two other Tags associated with a Form - the first specifies where the Form is sent ie another page or script (we will come to what a script is eventually) on the server. The Second tag actually sends off (Submits) the contents of the Form back to the place specified on the server with a list of all the variable names you defined in the Form and what their final Values were. We do not need to know details at this point of how they are encoded other than to know that they are compressed into a long string which then has to be interpreted in the page or script and then saved somewhere you can look at (ie another HTML page) or sent to you in a meaningful email message.

An Example of a Form and the Tags used

Now lets have a look what a typical form looks like and the tags used.

The FORM Tag

The Form Tag encloses the section comprising the form and also specifies the mechanism used to attach the variables and where it is sent when submited.

<FORM METHOD=POST ACTION="form_response.ihtml">

The METHOD is usually POST these days although you may see GET in other people's code. ACTION is the page to which one links - it can be a full URL or just a relative address as here. It will often be to something ending in .cgi in a directory called cgi-bin if you are using a Unix based server. Most cgi (Common Gateway Interface) scripts are written in a language called PERL and it is not something you want to get involved with! In this case it is to a script written in iHTML on a Windows NT Internet Information Server (IIS) server (as used by Fasthosts)

INPUT Tag TYPE="text" - Text Boxs

We will now look at some of the Tags used for input to a form the simplest being for boxes for text to be entered:

Please enter your Name:
<INPUT TYPE="text" NAME="forename" VALUE="" SIZE="8">
<INPUT TYPE="text" NAME="initial" VALUE="" SIZE="2">
<INPUT TYPE="text" NAME="surname" VALUE="" SIZE="16">
Please enter your Email:
<INPUT TYPE="text" NAME="email" VALUE="" SIZE="38">

The various parameters are fairly obvious TYPE ="text" and SIZE="n" define it is a text box of length n to be displayed. VALUE allows an initial string to be displayed - for reasons that will become clear latter I have defined empty strings to make sure that all the parameters are sent to the script

Please enter your Name:
Please enter your Email:

The SELECT tag - Drop Down Boxes

We will now look at the Tag to provide a drop down box.

The TEXTAREA Tag - large boxes for text

If we now look at how to provide a large box for comments, enquiries etc to be entered into we have all we need to provide a simple form

<TEXTAREA NAME="commentbox" ROWS="8" COLS="48">Type your comments here</TEXTAREA>

Type your comments here

This time I have put in an initial input to again make sure that the variable is defined - a space would be fine but you would not be able to see what I did.

The INPUT Tag TYPE="submit" or TYPE="reset" - to Submit or clear your Form

And finally we need a way to Submit it or Clear it. Normally this is just before the closing Form tag

NOTE: This form is not actually submited but some Javascript code checks if a valid email address and surname has been given and then tells you if it would have been sent. See the page on Form Field Validation to find out more

The INPUT Tag TYPE="radio" and TYPE="checkbox"

There are two more useful inputs radio buttons and check boxes. The difference is that you can have several check boxes ticked whilst you can only choose one radio button.

Please Contact me by:<br>
<input TYPE="radio" NAME="response" VALUE="Email" CHECKED> Email<br>
<input TYPE="radio" NAME="response" VALUE="Telephone"> Telephone<br>

Please Contact me by:
Email
Telephone

Notice that the additional parameter CHECKED has forced the Email radio button to be selected

Finally an example of a check box

I would like to be sent junk mail
<input TYPE="checkbox" NAME="junk" VALUE="junk_mail_please" CHECKED>

I would like to be sent junk mail

Check boxes are very useful but are slightly more dificult to handle in the scripts as you need to check if the variable name has been defined before you can use the Value

Conclusion

We have now looked at the most common Tags and how they are used to create a Form. There are a few more Tags and attributes available but those above should be sufficient to get one started. Forms need to be laid out well and Tables are useful for that. The <BR> and non printing space are also useful.

We now need to look at what happens when the Form is submitted and how the contents are sent to us. This is covered in the the next page on Howto Handle Form Output which covers the associated scripts required to, for example, email the values of the various named variables on your form. There is also page on Form Field Validation where the concepts if checking for the presence of essential fields and the validity of email addresses before the form is submited using JavaScript is explained

If you want to Provide Feedback or try out a real popup Feedback Form click the one of the links.