HTML Forms

Forms

Before you read this article - a word of warning! Forms do not seem to work as well in the latest versions of the popular browsers! To be honest, rather than write your own you would probably do better to use one 'off the shelf' which will be written in a different language. There used to be a number of very good free forms out there but unfortunately there are very few left now. Spammers homed in on them and one after the other they withdrew. There are a number of commercial ones that are relatively cheap so all is not looking too bleak. If you want to know more about them, then read on........

The Form is a most useful tool as it is the easiest way to obtain information from a viewer of your site in the manner you want it! They consist of input fields (buttons, text boxes & etc.) that the user can interact with. Forms can be set up so that when the user presses "Sumbit" a CGI (Common Gateway Interface) or Javascript script will process the user's input. However, for simple forms this is not necessary as with a little judicious editing you can easily read the information you seek. We'll come to that later .... first we must set up our form.

The form itself is enclosed (as you have probably worked out already) in the

<FORM> ... </FORM> tags.

Forms can get quite complicated when it comes to processing the input so as we are setting up a SIMPLE form, we will restrict ourselves to the "POST" method. (The other method used is "GET" but we won't be looking at that in this tutorial of simple HTML). So, once inside the <FORM> tag the first thing is to set the method of reply, for this example we are posting to the fictitious e-mail address of receive@testform.co.uk:

We have now set up our form to send us the info, all we need now is to set that out on the form itself. This can be in any format you require, only dependent on the information you are seeking. To ensure a neat appearance it is probably best to design the layout using a table but for the purposes of this tutorial I'll keep it simple and not introduce a table. So, how to get the information? There are several options available to you, you can set up TEXT, PASSWORD, CHECKBOX, RADIO, HIDDEN, RESET and SUBMIT fields each of which can be given a NAME and VALUE. As you can imagine, the NAME is very important as they allow you to distinguish the different input fields. If you had two or more with the same name, or no name, you would find it difficult to "read" the reply. VALUE is optional as it enables you to set a default starting value in a field, should you need one. Each field is enclosed in <INPUT TYPE= ... > INPUT is another one of those tags that stands alone!

TEXT field. <INPUT TYPE="TEXT">
This is a simple one-line box in which the user may type anything. You can set the SIZE (in characters) of the box and the MAXLENGTH (in characters) of the input allowed. Here is an example which you can write in:-

<INPUT TYPE="TEXT" NAME="Example 1" SIZE="30" MAXLENGTH="20"

TEXT AREA <TEXTAREA> ... </TEXTAREA>. Maybe the field you need is bigger, not just widthways but in height? Enter "TEXTAREA", "ROWS", AND "COLS":-

Try writing in the box and see what happens. You will notice that this time it is just the size of the box on the screen that is restricted by the above parameters, the input itself is not. Note also that <TEXTAREA> is not a "StandAlone" tag but needs the </TEXTAREA> end tag.

If you need a PASSWORD the the <INPUT TYPE="PASSWORD"> command is used. It is basically the same as TYPE="TEXT" except that the user's input will not be written to the screen. Instead, an asterisk will be shown for each character. Try writing in the box this produces:-

<INPUT TYPE="PASSWORD" NAME="Example 3" SIZE="30" MAXLENGTH="20"

Now we come to the CHECKBOX. This can have two states, unchecked or checked, and you can set the starting state. Add nothing to the command, as in the first example, and the box is unchecked until the user clicks on it. Add "CHECKED" to it and it will be checked unless the user clicks on it to uncheck it, as in the second example. It is important to give each button an individual VALUEe or you won't be able to interpret correctly the resulting data!:-

Next we have the RADIO BUTTON. Radio buttons are similar to check boxes except that when selecting one, you automatically deselect the other(s). They are, obviously, only useful in groups of two or more. To group them together they all have to be given the same name. As with the checkboxes, you can specify the radio button to be initially selected by including CHECKED against the relevant button. If you don't, then initially none will be selected. Once again, it is important to give each button an individual VALUE.

Now we have the HIDDEN Field. Why would we want a hidden field? Well, if you are using a script to unscramble the incoming data, you might need to send a specific value to be used, e.g. the address of a URL to be sent to when the user has completed the form. For our example we will not need this function, but this is how it is done when it is needed:-

><INPUT TYPE="HIDDEN" NAME="Example 6" VALUE="You will not see this!">

And you can't see it! But, believe me, it is here, between the line above and this one. If you need to use it you enter the required data where I wrote "You will not see this!"

Now for RESET. This field doesn't need a name and is self-explanetary in its function. You can select what will appear on the button by specifying VALUE=" ... ". When the user clicks on the button, all input fields are re-set to their default values.

<INPUT TYPE="RESET" NAME="Example 7" VALUE="Then click me.">
(It is the second button that we are looking at, the first was created so that the second had something to work on! Write something in the first, then click on the second)

Finally, we need to SUBMIT the form. As for RESET this field doesn't need a name and once again you can specify what appears on the button by use of VALUE. As soon as the user clicks on the SUBMIT button, the ACTION and METHOD referred to at the top of this page are invoked.

Clicking on the button now, however, won't post the form as we haven't set up any instructions for doing this!

This is by no means an exhaustive introduction to forms, there are more options available, but I feel this is sufficient to get you started.
Once you have mastered this tutorial then any of the more advanced books on HTML will be a good investment.

Click here for an example form.