3.1.1- Using a Form to Obtain Information from the User

by NT Community Manager.
Last Updated by Sarah Welna.

Public Categorized as 03. Basic ASP Techniques.

Not tagged.

<< 3.1.0- Getting Information From the User

3.2.0- Using the Information Obtained From the User >>

Using a Form to Obtain Information from the User

Here is the first set of tags needed to set up the structure of a form (we will add the spaces for input in the next example). You begin and end the form section of the page with the <FORM> and </FORM> tags. Here's an example:

<P>Please fill in the following form:</P>

...

</FORM>

The opening <FORM> tag here has two attributes. The first, ACTION, gives the name of the ASP file that should be opened next, and which will use the information that we gather in the form. (Actually, it doesn't have to be an ASP file; but in this book, it usually will be.) The second attribute, METHOD, determines which of two ways (POST or GET) that the browser will use to send the information to the server. This directly corresponds to the method sent in the HTTP request to the server that we talked about in the previous chapter . In this chapter, we will always use POST; we will see the difference between POST and GET in Chapter 7 , when we discuss both in more detail.

The ACTION attribute of the <FORM> tag tells the browser what page is going to be opened when the submit button is pressed. After the user has submitted the data, the browser automatically requests this file. The name of the file should be in double quotes, although it doesn't have to be. Most browsers can parse the name without the quotes but including them ensures compatibility with all browsers.

The Submit and Reset Input Tags

Within the <FORM> tags, you generally need to include three sets of <INPUT> tags. Two of them are the submit and reset buttons. Their tags are similar:

<P>Please fill in the following form:</P>

</FORM>

The code above will produce the following page on the browser:

The Submit and Reset button tags have two attributes in this example. The first attribute, TYPE, tells the browser what kind of button to create. The second, VALUE, specifies the message that is to be displayed on the button. Note that both of these attributes should be enclosed in quotes. The TYPE attribute can be set to SUBMIT or RESET or even BUTTON; those are keywords to the browser so you should not try to rename them.

The VALUE will appear to the user on the face of the button, and thus it can be anything you like, as long as you type it in quotes. For example, consider the following form:

</FORM>

This code produces a web page that behaves exactly as before, but that now looks something like this:

The Information Input Tags

OK, that's enough to give us the framework of a form: but now we need the item of real interest – a place for the user to input data. The input spaces on a form are called fields and are created with the <INPUT> tag. Now we need to get the field set up wherein the user will actually enter information. One such field is a text box, as we've added here in the code in the shaded lines:

<P>Please type your name in the space below</P>

</FORM>

This new line changes the browser page to the following:

The new input line has two attributes, TYPE and NAME. In this case, we have specified TYPE="TEXT", which instructs the browser to give us a text box into which the user can type some input.

The second attribute, NAME, is the more important: every input field must have a NAME. The data (entered by the user) will be joined to the name of its field; these two attributes will be passed together to the ASP page specified by the <FORM> tag's ACTION attribute.

For example, suppose we have a page containing a form, and that the form has three fields that ask the user for his first name, middle name and last name as follows (of course, the form also has two fields presenting the Submit and Reset buttons):

When the user clicks on the Submit button, a second page (usually with an .asp suffix) will be called: this new page will receive the three pieces of information from these three fields, in a format such as FirstName="Alexander", MiddleName="The" and LastName="Great". If the INPUT tag didn't contain a NAME attribute, then in the new page there would be no way to know which piece of information was from which field.

We can now put this together into a few practice forms. You won't be able to do anything with the information that you gather just yet, but it's important just to get the forms working first.

Try It Out – Form to Get Department Affiliation

Your boss wants to register employees for an upcoming 'spring retreat'. Each department will meet on a different weekend, so the organizers need to get each employee's department affiliation when the employee first visits the web site. In this example, we'll make a form page which asks for the user's department affiliation.

1. Open your preferred page editor and type in the following code for the form page:

<HTML>

<HEAD>

<TITLE>Spring Retreat – Get Department Form</TITLE>

</HEAD>

<BODY>

<H1>Spring Retreat Logistics</H1>

<H2>Each department will meet at a different time and place.<BR>

Please provide the name of your department<BR></H2>

Please type your department here:

</FORM>

</BODY>

</HTML>

This page contains a reference to tulip1.jpg. You can download this file and any other images used in this chapter from the Wrox web site http://www.wrox.com/WileyCDA/WroxTitle/productCd-0764543636,descCd-download_code.html. Alternatively, you can substitute your own image – you'll need to adjust the WIDTH and HEIGHT attributes!

2. Save this page as SpringRetreatDepartForm.asp, into your \inetpub\wwwroot\BegASPFiles directory.

3. Create a new page, which should contain the following code:

<HTML>

<HEAD>

<TITLE>Spring Retreat Notice</TITLE>

</HEAD>

<BODY>

<H1>Spring Retreat</H1>

<H2>Thank you for registering your department.</H2>

</BODY>

</HTML>

4. Save this as SpringRetreatNotice.asp, in the same directory.

5. Open your browser and run the page SpringRetreat
DepartForm.asp, which will produce the following:

6. Type in the name of the department (for argument's sake, type Sales) and click on the Click here to send this information button. The following page should be displayed:

In this chapter all of the files have the extension .asp. The form files that do not have ASP code are not required to have the .asp extension: they would work fine with .htm or .html. However, as your site grows in complexity and you expand your repertoire of ASP skills, you will want to include ASP code on almost every page. Naming all of your files with the .asp extension from the start overcomes the problems of changing the extension to .asp at the time you add code.

How It Works

The first few lines of SpringRetreatDepartForm.asp are the standard lines of the header. The first line of the body creates the image and then we have five lines that format and display some opening text. The action starts with the opening <FORM> tag:

Within that tag we have two attributes. ACTION tells the browser which page to call when the user clicks on the Submit button. The METHOD tag tells the browser how to send the data the user types to the server.

At this point in your study, always use the POST method.

Within the <FORM> and </FORM> tags we have one text line and three input lines:

Please type your department here:

Let's have a quick look at these four lines. The first line simply displays text so that the user knows what to type in the field. The second line actually creates the box in which the user will type. Note the two attributes: TYPE="TEXT" tells the browser this should be a text box, as opposed to a check box or options buttons. NAME="Department" gives the identifier, Department, that is attached to the data that the user will type.

Never leave the NAME attribute out of an <INPUT TYPE="TEXT"> tag; without it, the data can never be used by ASP.

The other two input lines provide the standard Submit and Reset buttons. In this case we have used the VALUE attributes to change the words on the buttons from the default values, so that the buttons contain text that is a bit more customized for our situation.

Then we close the form section with the </FORM> tag:

</FORM>

When the user sees this page, they can enter information in the box. If the user isn't happy with what they've entered, they can click on Reset data and enter different information in the text box.

What happens when the user clicks on the Click here to send this information button? First, the browser takes the information that was typed into the text box (this might be "Sales", if that's what you wrote in the text box) and assigns it to the input box name to make Department="Sales". Then, the browser sends this to the server, along with a request for the page called SpringRetreatNotice.asp. When the server finds the .asp page, it will run it through the ASP DLL and it will have the information that the user typed into SpringRetreatDepartForm.asp available to it. In the next few pages we will learn how to use that information. The server then sends the SpringRetreatNotice.asp page back to the browser.

At this point, we have not used the information from the visitor; however, we have demonstrated how the <FORM ACTION="page.asp"> is activated by the Submit button to send a request to the server for the next page. Now, let's create a form that gets several items of information from the user.

Try It Out – Forms: Get Jacket Information

For the upcoming corporate retreat, your Department of Employee Spiritual Growth plans to provide a jacket, with the company logo, to each employee. You have been asked to create a page for employees to visit and register information for ordering their jacket. You need to know their preferences in size (Small, Medium, Large or Extra Large), gender (Male or Female) and color (Argent or Azure).

1. You're probably getting used to the procedure by now: open up your preferred web page editor and type in the following code:

<HTML>

<HEAD>

<TITLE>Form for Spring Retreat Jacket</TITLE>

</HEAD>

<BODY>

<H1>Company Spring Retreat<BR>

Jacket Order Form</H1>

<H3>Please fill in this form and click on Save My Preferences</H3>

<P>Please type your gender</P>

<P>("male" or "female"):

<P>Please type your preference of size</P>

<P>"S" "M" "L" "XL":

<P>Please type your preference of color</P>

<P>"Argent" or "Azure":

</FORM>

</BODY>

</HTML>

2. Save the page as SpringRetreatJacketForm.asp, into your \inetpub\wwwroot\BegASPFiles directory. This is the page that will ask for the jacket information.

3. Keep your editor open and type in a new page:

<HTML>

<HEAD>

<TITLE>Spring Retreat Jacket Confirmation</TITLE>

</HEAD>

<BODY>

<H1>Company Spring Retreat<BR>

Jacket Order</H1>

<BR>

<H1>Confirmation</H1>

</BODY>

</HTML>

4. Save this as SpringRetreatJacketConfirmation.asp, in the same directory. This is a confirmation page to which the form information will be transferred.

5. Now start up your browser and run the page SpringRetreatJacketForm.asp, which will produce the following:

6. Enter some details, and click on the Save my Preferences button to send the information to the server. The browser then automatically opens up the page called SpringRetreatJacketConfirmation.asp:

How It Works

This code is similar to the last except that we are now working with three fields of data instead of one. The first few lines are the page header. Within the body we first present three lines of simple HTML text giving the user some instructions for the page.

<HTML>

<HEAD>

<TITLE>Form for Spring Retreat Jacket</TITLE>

</HEAD>

<BODY>

<H1>Company Spring Retreat<BR>

Jacket Order Form</H1>

<H3>Please fill in this form and click on Save My Preferences</H3>

Then we begin the important part with the <FORM>. The <FORM> tag must contain at least the attribute to tell the browser what page to call when the Submit button is pressed. In this case that is the ACTION=SpringRetreatJacketConfirmation.asp. At this point in our study, we are only concerned with using the METHOD=POST attribute:

In this next section, the code alternates between lines of plain HTML text and input fields (of type TEXT). The HTML text in this case is asking the user for information, and for each question asked there is a related input field – "gender", "size", and "color":

<P>Please type your gender</P>

<P>("male" or "female"):

<P>Please type your preference of size</P>

<P>"S" "M" "L" "XL":

<P>Please type your preference of color</P>

<P>"Argent" or "Azure":

As always, we add Submit and Reset buttons and close off the form as follows:

</FORM>

There are a few points to remember when working with forms

The <FORM> tag needs two attributes: ACTION= and METHOD=
The ACTION attribute is the name of the page (in our case, an ASP page) that will process the information that the user enters and submits
For now, always use METHOD=POST
Every input needs a name
Every form must have a submit button and should have a reset button
Don't forget to close off your forms, with the closing </FORM> tag