ASP Lesson 6: HTML Forms - Submitting and Processing Data

One important use of ASPs is the processing of HTML Forms, which up until the creation of Active Server Pages has largely been done using CGI scripts, Perl, or some derivative thereof. ASP's perform faster than the old fashioned method of CGI because they run in the same process as the web server.

HTML Forms

Forms are generated from 5 basic objects, which are:

1. Text Boxes
Textbox:
Password box:
Text Area:
2. List Boxes
Dropdown Box: List Box:
3. Check Boxes
 4. Radio Buttons
Blue Green Yes  No
5. Command Buttons
Submit Button: Reset Button:
Reset Button:

Form objects must be enclosed between <form></form> tags to be viewable in most browsers. A form follows the following construction:

<form method=post action=form_processing_script>
form objects...
</form>

Form objects contain some, or all, of the following properties:

Name
all elements must have a name. Allows you to reference the object in scripts.
Value
useful for setting default values (for buttons, this property is the text that appears on the button).
Size
for text boxes, this applies to the width of the text box. For select boxes, this applies to the number of items displayed at a time (1 for a drop down select box, 2 or more for a list box).
Class
used for assigning styles to the object (discussed later).

The following form illustrates a basic form for gathering student information:

Student ID:
First Name:
Last Name:
Address:
City:
State:
Zipcode:

Figure 6.1: A first attempt.

As you can see, Form1 is not very pleasing to the eye. We can make this form look better by encapsulating the form within a table. For starters, I'll create a simple table with labels on the left and form objects on the right:

Student ID:
First Name:
Last Name:
Address:
City:
State:
Zipcode:

Figure 6.2: A better looking form.

Form 2 looks better than the first iteration, but it could still use some improvement. For instance, we could turn the borders off, add some back ground colors, nest some tables, or all of the above. You are, for the most part, only limited by your own imagination.

I've decided to stick with a fairly convential looking form to collect student data, which is illustrated below in Figure 6.3:

Student Information
Student ID Number:
First Name Last Name
Address
City ST Zipcode

Figure 6.3: The Student Information Form.

Processing results.

Now that we have the form, we need a method for processing the results. Before commiting the data to the database, it might be beneficial to present the data entered to the user. We are all human, and we all make mistakes. Better to allow the user to correct the data now before it's entered.

When a form gets submitted to an ASP script we use the REQUEST object to obtain the information contained in the form. Specifically, we use Request.Form(x), where x is either the index number or name of the item being requested. This returns a string containing the value of the form object. VBScript has one data type: Variant. Since variants can contain any type of data, when doing numerical comparisons it is best to explicitly convert your variable to a valid numerical data type (will be covered later).

The following example illustrates the Request and Response objects for processing our form data.

Example 6.1: Request and Response

<html>
<head><title>View Form Results</title></head>
<body bgcolor="#FFFFFF">
Here's the data contained in the form:<p>
Student ID: <%response.write Request.form("txtSID")%><br>
First Name: <%response.write Request.Form("txtFName")%><br>
Last Name: <%response.write Request.Form("txtLName")%><br>
Address: <%response.write Request.Form("txtAddress")%><br>
City: <%response.write Request.Form("txtCity")%><br>
State: <%response.write Request.Form("txtST")%><br>
Zipcode: <%response.write Request.Form("txtZipcode")%>
</body>
</html>

Applying what you have learned.

Build an HTML form for entering student grades, then submit this form to a script that will output the contents of the form to the browser. The form should have the following fields:

  1. Student ID
  2. Exam 1
  3. Exam 2
  4. Exam 3

Your form should have both Submit and Reset buttons, and text boxes for each of the four fields required above. Submit the form to a script called grades.asp.