Adding Interactivity with Forms

Considering that it was originally called interactive media, the Web really wasn't very interactive at first. About the most that could be said for it was that users got to choose where they were going, even if they didn't have much say about how they got there. As things have progressed, Web authors have searched for ways to include the user in the experience. Sites now routinely track users through the site, trying to surmise what interests them, so they can tailor the content appropriately. That's all terrific, and there's definitely a place for that. But you can do something a bit more straightforward to understand the user's preferences; you can ask.

One of the early innovations on the Web was the concept of an HTML form, which enables the user to submit information to a Web site, completing the circle of feedback.

A form is a page that includes elements allowing the user to input information, such as text boxes and radio buttons, and at least one element allowing the user to submit the form. These forms, which are specified with the <form></FORM> tags, can be used for almost anything, from user surveys to games to taking requests for search engines. Next, you'll build a form that takes a user's registration information and gathers information about their favorite kinds of science fiction.

In Chapter 3, "Creating Interactive Web Content", we created the file archives.asp by making a copy of template.asp. We're going to create register.asp the same way. Open template.asp in your text editor and save a copy called register.asp in the Web server's home directory. Next we add a simple form with a text box as in Listing 4.4.

Code Listing 4.4. register.asp: Creating a form

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <% pageTitle = "Register" %>
2: <!--#include virtual="/pagetop.txt"-->
3:
4: <H1>Register</H1>
5: Fill in this form to become a member of Primary Outpost.
6: <P>
7: <FORM>
8: Desired Username:  <INPUT TYPE="text">
9: </FORM>
10:
11:<!--#include virtual="/pagebottom.txt"-->
12:</BODY>
13:</HTML>

Almost all elements you put into a form contain <INPUT TYPE="type" …>. Take a look at the page, as shown in Figure 4.9. Feel free to type in the Username text box. Because this is the only text box in the form, most browsers will submit it when you press Enter. Try it. You'll notice that far from performing some miraculous deed, it just takes you back to the original page. That's because you didn't give it anything else to do.

First we need to create a destination for the form. Open template.asp and save a copy as take_registration.asp in the Web server's home directory. Add some text to the body of it so that you recognize the page when it comes up.

Return to register.asp. To send it to take_registration.asp when the form is submitted, we assign it an action as shown in Listing 4.5.

Code Listing 4.5. register.asp: Add an action

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <% pageTitle = "Register" %>
2: <!--#include virtual="/pagetop.txt"-->
4:
5: <H1>Register</H1>
6: Fill in this form to become a member of Primary Outpost.
7: <P>
8: <FORM ACTIONFORM ACTION="/take_registration.asp">
9: Desired Username:  <INPUT TYPEINPUT TYPE="text">
10:</FORM>
11:
12:<!--#include virtual="/pagebottom.txt"-->
13:</BODY>
14:</HTML>

In this code, you tell the browser that when the form is submitted, you want it to go to that page. Save this page, reload it in your browser, and try again. This time you go to the page, as you had expected. However, notice the URL your browser is showing. Notice that question mark? It's the start of the querystring I mentioned in Chapter 3, "Creating Interactive Web Content" when I talked about the AdRotator redirect page. Unfortunately, there is no querystring. You neglected to assign a name to the text box, as shown on line 9 in Listing 4.6.

Code Listing 4.6. register.asp: Naming the username element

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <% pageTitle = "Register" %>
2: <!--#include virtual="/pagetop.txt"-->
4:
5: <H1>Register</H1>
6: Fill in this form to become a member of Primary Outpost.
7: <P>
8: <FORM ACTIONFORM ACTION="/take_registration.asp">

9: Desired Username:  <INPUT TYPE="text" NAME="p_name">
10:</FORM>
11:
12:<!--#include virtual="/pagebottom.txt"-->
13:</BODY>
14:</HTML>

Save the file, reload it, and try again. Notice the URL you are presented with:

					http://localhost/take_registration.asp?p_name=My+text
				

This is an important distinction; items that have names are submitted with the form, items that don't, aren't. Let's do two things now. Let's take a quick look at some of the attributes of the text box by setting the size, the maximum length of text, and an initial value when the page is first called up. While you're adding elements, also add two buttons (see Listing 4.7).

Code Listing 4.7. register.asp: Text field attributes and adding buttons

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <!--#include virtual="/pagetop.txt"-->
2:
3: <H1>Register</H1>
4: Fill in this form to become a member of Primary Outpost.
5: <P>
6: <FORM ACTION="/take_registration.asp">
7: Desired Username:  <INPUT TYPE="text" NAME="p_name" SIZE=20 MAXLENGTH=15
					
					VALUE="MyUserName">
8: <P>
9: <INPUT TYPE="submit" VALUE="Submit Registration"><INPUT TYPE="reset"
					VALUE="Start Over">
10:</FORM>
11:
12:<!--#include virtual="/pagebottom.txt"-->
13:</BODY>
14:</HTML>

You haven't given either of these buttons names because you only have one submit button, so there's nothing to distinguish, but you did add values to them. As with the text box, adding a value to a button determines what the button says when you build the page. Unlike a text box, however, you can't change the value on a button.

Take a look at the text box (see Figure 4.10). Change the value to something more to your liking. Notice, that you can't put more than 15 characters in the box, however, because of the maxlength value that you set. This value is extremely handy, especially when you're ultimately putting the data into a database. Remember, if you say you want the column to be 50 characters long, that's all you get. It's much better to stop users from putting too many characters in the form than to let them get all the way through the form and send it back because their information doesn't fit.

You've probably seen Reset buttons on the Web and noticed that they are used to clear a form. Most people don't realize, however, that clearing a form isn't exactly what the Reset button does. Click the Reset button, Start Over. Instead of clearing the form, it does something much more powerful; it returns the form to its original state.

Finally, there's the Submit button. It does exactly what you'd expect it to do, submit the form. You may not need it now because you only have one text field, but as soon as you add another one, the browser no longer submits when you press Enter.

Add the first part of your registration page (see Listing 4.8). You use all text boxes except for the two password entries. The password box is exactly like the text box, except that when you type in it you can't see the letters. This is to keep someone from looking over your shoulder and stealing your password when you're logging in.

Code Listing 4.8. register.asp: Add personal information

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <!--#include virtual="/pagetop.txt"-->
2:
3: <H1>Register</H1>
4: Fill in this form to become a member of Primary Outpost.
5: <P>
6: <FORM ACTION="/take_registration.asp">
7: Desired Username:  <INPUT TYPE="text" NAME="p_name" SIZE=20 MAXLENGTH=15>
8: <BR>
9: Password:  <INPUT TYPE="password" NAME="p_pass1">
10:<BR>
11:Password (again):  <INPUT TYPE="password" NAME="p_pass2">
12:<BR>
13:First Name:  <INPUT TYPE="text" NAME="p_first">
14:<BR>
15:Last Name:  <INPUT TYPE="text" NAME="p_last">
16:<BR>
17:Email Address:  <INPUT TYPE="text" NAME="p_email">
18:<P>
19:<INPUT TYPE="submit" VALUE="Submit Registration"><INPUT TYPE="reset" VALUE="Start Over">
20:</FORM>
21:
22:<!--#include virtual="/pagebottom.txt"-->
23:</BODY>
24:</HTML>

OK, now that you have a basic form, let's do something with it. Open your take_registration.asp file. You're going to do two things here. First take your values and put them into variables, and print them to the screen to see them.

You might be wondering why you're doing that when you're ultimately going to put the data into a database. Good question. Here's the answer: If you build a house, would you build the whole thing, lay your carpet, bring in your furniture, and then make sure the foundation was level? Of course not! (And if you would, please let me know, so I don't hire you to build my house.) Instead, you'd check each step as you went along so that you knew the work was solid before you built anything on it. That's what you're doing here, and what you're going to do as you build your project. You'll check each step to make sure it works before you move on. That way, if there's a problem, you'll only have to backtrack one or two steps to find out where it is. Open the take_registration.asp file we created earlier with your text editor and add the code in Listing 4.9.

Code Listing 4.9. take_register.asp: Getting information from the form

0: <%@ LANGUAGE="VBSCRIPT" %>
1: <!--#include virtual="/pagetop.txt"-->
2: <%
3:     p_userid = Request.querystring("p_name")
4:     p_pass1 = Request.querystring ("p_pass1")
5:     p_pass2 = Request.querystring ("p_pass2")
6:     p_first = Request.querystring ("p_first")
7:     p_last = Request.querystring ("p_last")
8:     p_email = Request.querystring ("p_email")
9: %>
10:
11:<H2>User Registration</H2>
12:
13:Userid:  <%= p_userid %> <BR>
14:Password:  <%= p_pass1 %> <BR>
15:Password (again):  <%= p_pass2 %><BR>
16:First Name:  <%= p_first %><BR>
17:Last Name:  <%= p_last %><BR>
18:Email:  <%= p_email %><BR>
19:
20:<!--#include virtual="/pagebottom.txt"-->
21:</BODY>
22:</HTML>

When you submit the form, you should see a listing of your form elements (see Figure 4.11).

Now you add another type of form element (a radio button) to register.asp. Radio buttons are handy because they make sure that the user enters only one value, so the choices are mutually exclusive of each other. Let's add a yes or no question, as in Listing 4.10:

Code Listing 4.10. register.asp: Adding radio buttons

…
17:Email Address:  <INPUT TYPE="text" NAME="p_email">
18:<BR>
19:Do you believe in aliens?
20:<INPUT TYPE="radio" NAME="p_aliens" VALUE="yes" CHECKED>Absolutely
21:<INPUT TYPE="radio" NAME="p_aliens" VALUE="no">Don't be ridiculous
22:<P>
23:<INPUT TYPE="submit" VALUE="Submit Registration"><INPUT TYPE="reset" VALUE="Start Over">
24:</FORM>
25:
26:<!--#include virtual="/pagebottom.txt"-->
27:</BODY>
28:</HTML>

Notice on lines 20 and 21 that you explicitly assigned a value to the radio button that doesn't match what you actually see on the page. It's this value that's going to be submitted with the form. The text on the page, or label, is there to help the user, and the form is oblivious to it. You could switch the answers, and the form would never know about it, submitting the value No when a user chooses Absolutely and vice versa.

The actual name for this is not radio button, but radio group, because the form groups them together based on their name to make sure that only one is active per group at any given time. Now add a second set of buttons asking about user preferences (see Listing 4.11).

Code Listing 4.11. register.asp: A second radio group

…
21:<INPUT TYPE="radio" NAME="p_aliens" VALUE="no">Don't be ridiculous
22:<P>
23:How do you enjoy your science fiction?<BR>
24:<INPUT TYPE="radio" NAME="p_medium" VALUE="television">Television<BR>
25:<INPUT TYPE="radio" NAME="p_medium" VALUE="movies">Movies<BR>
26:<INPUT TYPE="radio" NAME="p_medium" VALUE="books">Books<BR>
27:<INPUT TYPE="radio" NAME="p_medium" VALUE="comics">Comics<BR>
28:<INPUT TYPE="radio" NAME="p_medium" VALUE="online">Online<BR>
29:<INPUT TYPE="radio" NAME="p_medium" VALUE="fanzines">Fanzines<BR>
30:<P>
31:<INPUT TYPE="submit" VALUE="Submit Registration"><INPUT TYPE="reset" VALUE="Start Over">
32:</FORM>
33:
24:<!--#include virtual="/pagebottom.txt"-->
35:</BODY>
36:</HTML>

Notice that because you didn't set any buttons as CHECKED to begin with, none of them were checked. However as soon as you click a button, you are committed to submitting at least one choice. There is no way to uncheck that element without selecting another in the group.

The trouble with a radio group, is that you can have only one element checked and you want to allow users to set multiple media, which you can do by changing the second set of radio buttons to check boxes (see Listing 4.12).

Code Listing 4.12. register.asp: Using check boxes instead of a radio group

…
22:<P>
23:How do you enjoy your science fiction?<BR>
24:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="television">Television<BR>
25:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="movies">Movies<BR>
26:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="books">Books<BR>
27:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="comics">Comics<BR>
28:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="online">Online<BR>
29:<INPUT TYPE="checkbox" NAME="p_medium" VALUE="fanzines">Fanzines<BR>
30:<P>
31:<INPUT TYPE="submit" VALUE="Submit Registration"><INPUT TYPE="reset" VALUE="Start Over">
32:</FORM>
33:
34:<!--#include virtual="/pagebottom.txt"-->
35:</BODY>
36:</HTML>

With the check boxes, users can choose as many options as they want, which brings up a whole new issue: How do you deal with this when you process the form?

Choose several of the medium items and submit the form. Take a look at the URL in your browser. You'll see p_medium several times, with different values. When your Active Server Page tries to evaluate the querystring and pull out a value for p_medium, it actually gets a series of values, a type of array (see Figure 4.12).

Instead of figuring out how many items are in the array and looping through it, let ASP worry about it, as on lines 20 through 24 in Listing 4.13.

Code Listing 4.13. take_register.asp: Processing multiple check boxes with a for each loop

…
11:<H2>User Registration</H2>
12:
13:Userid:  <%= p_userid %> <BR>
14:Password:  <%= p_pass1 %> <BR>
15:Password (again):  <%= p_pass2 %><BR>
16:First Name:  <%= p_first %><BR>
17:Last Name:  <%= p_last %><BR>
18:Email:  <%= p_email %><BR>
19:<%
20:    for each p_medium in request.querystring("p_medium")
21:%>
22:        Preferred medium:  <%= p_medium %><BR>
23:<%
24:    next 
25:%>
26:<!--#include virtual="/pagebottom.txt"-->
27:</BODY>
28:</HTML>

With a for each loop, VBScript loops through each item and assigns it to p_medium. This item might be text, as it is in this case, or a kind of object. When there are no more items to look at, the loop ends. This way, it doesn't matter how many elements a user chooses, the code will still work.

Now that you have all of your information, you need to start thinking about how you can store this information in the database. This process is called data modeling.