Gathering User Input in an HTML Web Page


Imagine that we wanted to create a web page that calculated a user's Body Mass Index, or BMI.

By the Way

The Body Mass Index, or BMI, is a ratio of a person's height to weight. BMI is commonly used as a quick determination of whether one is underweight, at a healthy weight, overweight, or obese. For more information about BMI, see http://www.cdc.gov/nccdphp/dnpa/bmi/.


To determine someone's BMI, we need to know his height and weight. For the time being, imagine that we want to create this web page without using ASP.NET, using HTML markup instead to generate the two text boxes needed for the user's inputted height and weight.

When HTML was designed, two elements were created to facilitate collecting user input. These two HTML elements are the <form> element and the <input> element. Although a thorough understanding of these elements is not needed for collecting user input in an ASP.NET web page, having a strong grasp on the concepts of how user input is collected from a web page is important. Therefore, let's briefly examine the <input> and <form> elements, as well as how they work in conjunction to allow a web page to collect user input.

Examining the <input> Element

The <input> tag can be used to create a text box, radio button, check box, or button. The <input> element's type attribute specifies what type of user input control is displayed in the user's web browser. For example, if you wanted to create an HTML web page that contained a text box, you could use the following HTML:

<input type="text"> 


To display a check box, you would use

<input type="checkbox"> 


By the Way

We will not delve into the HTML specifics for collecting user input in this book. For more information on this topic, check out http://www.w3schools.com/html/html_forms.asp, or consider picking up Sams Teach Yourself HTML and XHTML in 24 Hours (ISBN: 0672320762).


Because our web page will need two text boxesone for the person's height in inches and one for the person's weight in poundswe will use two <input> elements, both with type="text".

Listing 9.1 contains the preliminary HTML web page for our BMI calculator. Keep in mind that this page is far from complete!

Listing 9.1. Our First Draft of the BMI Calculator

1: <html> 2: <body> 3:   <h1>BMI Calculator</h1> 4:   <p>Your Height (in inches): <input type="text" name="height" /></p> 5: 6:   <p>Your Weight (in pounds): <input type="text" name="weight" /></p> 7: </body> 8: </html> 

Listing 9.1 simply displays two text boxes, one for the user's height and one for weight. As you can see in lines 4 and 6, the <input> elements of Listing 9.1 each contain a name property. The name property is needed to uniquely identify each <input> element. As we will see in the next section, "Passing the Input Back to the Web Server Using the <form> Element," the <input> element's name attribute is used when sending the contents of the various <input> elements back to the web server.

Figure 9.1 shows the code in Listing 9.1 when viewed through a browser.

Figure 9.1. The user is presented with two text boxes.


In addition to the two text boxes, we need some way for the user to indicate to the web browser that she has completed entering her data. To accomplish this, a submit button is used. A submit button is a button that, when clicked by the user, indicates to the web browser that the user has finished entering her input. The HTML markup for a submit button is as follows:

<input type="submit" value="Text to Appear on Submit Button"> 


Listing 9.2 contains the HTML from Listing 9.1, but augmented with the submit button. Figure 9.2 shows the HTML from Listing 9.2 when viewed through a browser.

Figure 9.2. A submit button has been added.


Listing 9.2. Our Second Draft of the BMI Calculator

 1: <html>  2: <body>  3:   <h1>BMI Calculator</h1>  4:   <p>Your Height (in inches): <input type="text" name="height" /></p>  5:  6:   <p>Your Weight (in pounds): <input type="text" name="weight" /></p>  7:  8:   <p><input type="submit" value="Calculate BMI" /></p>  9: </body> 10: </html> 

Passing the Input Back to the Web Server Using the <form> Element

Recall from our discussions in Hour 1, "Getting Started with ASP.NET 2.0," that when a user requests a web page from a web server, the web server sends the web page's HTML to the user's browser. This HTML is then rendered graphically in the user's browser. For the browser to receive this HTML, the web browser and web server must communicate with one another, but after the web browser has received the HTML, the communication ends.

The important point to take away from this discussion is that there is a physical, logical, and temporal disconnect between the web server and the web browser. That is, the web server has no idea what the user is entering into his browser. All the web server ever does is wait for incoming web requests and then return the appropriate HTML.

Due to this disconnect between the web browser and the web server, the web browser needs some way to be able to let the web server know the input the user entered. This is accomplished via the HTML <form> element.

The <form> element must have contained within it the <input> elements used to collect the user input, as well as the submit button. When the <form> element's submit button is clicked, the form is said to have been submitted. When a form is submitted, a specified web page is requested by the browser, and the data entered into the various <input> elements within the <form> element are sent to this web page.

This description of the <form> element leaves two questions unanswered:

  • When the <form> is submitted, how does it know what web page to send the contents of its <input> elements to?

  • How, exactly, are the contents of the <input> elements sent to this web page?

We can answer these two questions by examining the action and method attributes of the <form> element. The action attribute specifies a URL that the browser is directed to after the <form>'s submit button is clicked. Therefore, it is the value of the action attribute that indicates the web page that is visited after the <form> is submitted.

The contents of the <input> elements are compacted into a single string and are sent in a specific format. Precisely, the format used is as follows:

InputName1=InputValue1&InputName2=InputValue2&...&InputNameN=InputValueN 


Here, InputName1 is the value of the first <input> element's name attribute, and InputValue1 is the value of the first <input> element. InputName2 is the value of the second <input> element's name attribute, and InputValue2 is the value of the second <input> element, and so on. Note that each <input> element's name and value are separated by an equals sign (=), and each pair of names and values is separated by an ampersand (&).

The method attribute determines how this string of <input> element names and values is sent to the web server. The method attribute can have one of two possible values: GET or POST. If method is set to GET, the contents of the <input> elements are sent through the querystring. The querystring is an optional string that can be tacked on to the end of a web page's URL. Specifically, if a website URL has a question mark in it (?), everything after the question mark is considered the querystring.

You have probably seen web pages whose URL looks like

http://www.someserver.com/somePage.htm?Name=Scott&Age=21 


Here, the contents after the question mark are considered the querystring.

If method is set to POST, the <input> elements' contents are sent through the HTTP headers, meaning there is no querystring tacked onto the end of the URL.

By the Way

Whenever a web browser requests a web page, it sends HTTP headers in addition to the requested URL. These are simple strings of text. One such HTTP header, as we discussed in the preceding hour, is the User-Agent header, which sends information on the type of browser making the web request.

When the method attribute is set to POST, the Post HTTP header is used to send along the contents of the <input> elements. When we place this information in an HTTP header, the querystring is left uncluttered.


Let's augment Listing 9.2 to include a <form> element that contains action and method attributes. Listing 9.3 is this augmented HTML page.

Listing 9.3. A <form> Element Has Been Added

 1: <html>  2: <body>  3:  4:   <form method="GET" action="SomePage.htm">  5:     <h1>BMI Calculator</h1>  6:     <p>Your Height (in inches): <input type="text" name="height" /></p>  7:  8:     <p>Your Weight (in pounds): <input type="text" name="weight" /></p>  9: 10:     <p><input type="submit" value="Calculate BMI" /></p> 11:   </form> 12: 13: </body> 14: </html> 

The <form> elementspanning from line 4 to line 11encloses the two <input> elements that generate the two text boxes as well as the submit button <input> element. The <form>'s action attribute is set to SomePage.htm, and the method attribute is set to GET.

When the user visits the HTML page shown in Listing 9.3, he will be presented with two text boxes and a submit button, as was shown in Figure 9.2. After the user enters his height and weight and clicks the submit button, the web browser will request the web page, as follows:

SomePage.htm?height=heightEnteredByUser&weight=weightEnteredByUser 


Figure 9.3 shows the web browser's Address bar after the user has visited the HTML page generated by Listing 9.3 and has entered the value 72 for height and 155 for weight.

Figure 9.3. The querystring contains the values entered into the height and weight text boxes.


By the Way

SomePage.htm would likely read in the values passed in through the querystring, perform some calculation on these values, and then display the results to the user. Starting in the "Dissecting ASP.NET Web Forms" section, we'll see how to programmatically process user input in an ASP.NET page.


Comparing Postback Forms and Redirect Forms

If the <form>'s method attribute on line 4 in Listing 9.3 is changed to POST, when the user submits the form, she is still directed to SomePage.htm. This time, though, no information will be passed through the querystring. Rather, this data will be hidden from sight from the user, passed through the HTTP headers instead.

As we saw, the <form>'s action attribute specifies the web page that the browser requests after the <form> is submitted. In Listing 9.3, this web page was SomePage.htm. Such forms are typically called redirect forms because, when submitted, they redirect the user to a different web page.

Imagine, though, what would happen if the action property were set to the same URL as the page that contains the <form> element. That is, say we create an ASP.NET web page called PostbackFormExample.htm that has the following HTML:

<html> <body>   <form method="POST" action="PostbackFormExample.htm">     <p>What is your age? <input type="text" name="age" /></p>     <p><input type="submit" value="Click to Continue" /></p>   </form> </body> </html> 


When the user first visits PostbackFormExample.htm, she will be shown a text box labeled "What is your age?" Underneath this text box, she will see a submit button titled Click to Continue. After the user enters some information into the text box and submits the <form>, what will happen? Because the method attribute is set to POST, the <input> text box's data will be sent via the HTTP Post header. Because the action attribute is set to PostbackFormExample.htm, the user will be sent back to PostbackFormExample.htm (but this time with information passed in through the HTTP Post header).

Such <form>s are called postback forms because they use the POST method and because when the <form> is submitted, the user is sent back to the same page. That is, the <form>'s <input> element's data is posted back to the same web page.

Figure 9.4 shows a pictorial representation of both a redirect form and a postback form. Note how the postback form sends the contents of its <input> elements back to itself, whereas a standard form forwards the contents to a different web page.

Figure 9.4. Postback forms differ from redirect forms.





Sams Teach Yourself ASP. NET 2.0 in 24 Hours, Complete Starter Kit
Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit
ISBN: 0672327384
EAN: 2147483647
Year: 2004
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net