Below is the code that I use to implement this framework. Every form uses some variation of this - some don't need any validation, others always display the form again. But each form starts with the code below.

Take a moment to glance over the code above, then I'll step you through this code, line-by-line, and examine what is happening.

The <form> framework

I start by testing the amount of data in the Form collection of the Request object. If there is some (if Count is greater than zero) then the form has been "submitted".

This means that the form has already been displayed, filled in by the user, the submit button pressed and the data sent to the page that was referenced by the <form> tag (I'll show you that later).

On the second line I declare and initialize all the variables that will contain the data on the form. You need one variable per input. They are initialized to the default value that you want on the form when it is first displayed.

If the form has been submitted I need to validate the data entered by the user. The code does the steps out of order like this so that I have a chance to re-display the form if invalid data is entered.

I set the variables to the data on the form by asking the Form collection for the values by the names I specified. Remember to always force the data to be the correct type by either adding a blank string, or subtracting zero as shown below:

Then do the actual validation, and if it fails display a message and set bSubmitted=false to cause the form to be displayed again:

Displaying the form

So, on to displaying the form. In this case I want to display the form only when the form hasn't been submitted yet, but of course you could remove the "if" and display the form again every time - my search form does that.

Note that as discussed earlier, bSubmitted will also be false if the form has been submitted with invalid data, so the form will refresh with the submitted values intact, ready for the user to fix the errors.

The <form< tag has two main attributes - action and method.

action defines which page to call when the form is submitted. You can hardcode your page name as I have, or you can make the form easier to maintain by using the name of the current page held in the ServerVariables collection, as shown below:

Note that the ServerVariables collection is quite "expensive" the first time you use it on a page - although it contains many useful values, please use sparingly.

The method attribute can have two values, get and post. Only in very rare cases will you want to use get - since it uses the URL to submit the values it is limited to 255 characters of data, is very insecure, and ugly!

post, on the other hand, passes the values in the HTTP headers where it cannot be seen, and the limit is much higher.

<form> inputs

Having opened the <form> tag, my next job is to send out some <input> tags.

The type attribute defines the type of input (obviously!) - there are many choices, only two of which I shall demonstrate here.

For more information on the <form> and <input> tags, visit the best online HTML reference I've found - the Web Design Group

type="text" provides us with a simple text entry box. name="name" is a poor example to use (oops), maybe name="yourname" makes it a little clearer - yourname is the name you use to retrieve the data from the Request.Form collection when the form is submitted.

size="10" suggests to the browser that only 10 characters should be displayed on the form, although you can enter more characters and the input will scroll. (maxlength="10" would suggest a maximum length, but don't rely on that)

Lastly, the value attribute defines the initial value of the input. I always pass in the variable values, which is why I initialized them to default values, then updated them when the form was submitted. If the validation fails the form will then reappear with all the same information present in the form!

Here's another example - the submit button. You can define the text on the button using the value attribute. That's all there is in this simple form, so the closing <form> tab follows.

All that is left now is the processing of the data on the form!

Processing the data

Now that we're nearly finished, let's review the framework code once more. Hopefully this time through you'll recognise the code that I've explained up to this point:

If the form was submitted, validate the data. If not submitted yet, or if any validation failed, display the form. Only if the form was submitted successfully process the data.

This last step, here just displaying the users name, is where the real work of the form is done. Storing sName to a database table, sending sName to someone in an email or many other tasks could all be performed here.

Since the variables are all set up and ready to be used there is no form-specific code needed - you could simply call my SendEmail( ) function and perhaps pass in variables from the form: sEmail, sFrom, sBody, etc. There are many examples of forms on this site - just choose Search from the navigation bar and enter "form"!