The Tao of Computing:
A Down-to-Earth Approach to Computer Fluency
 
by Henry M. Walker Jones and Bartlett Publishers
 

Laboratory Exercise on User Data in html

Summary: This laboratory exercise clarifies some differences between static and dynamic Web pages. This leads to an introduction to html forms, a simple mechanism for users to enter data during Web interactions. This lab outlines the basic flow of information between the user and Web server and provides some experience with the communication of that data.

An Outline of Data Processing over the Web

As discussed in the lab on html basics, the simplest interactions for a user follow these basic steps:
  1. Within a Web browser (e.g., Netscape, Internet Explorer, or Mosaic), you type an address (or URL or Uniform Resource Locator), such as sample-html-page.html .
  2. Your browser sends a request to the server for that address.
  3. The server finds the file on a disk drive.
  4. The server retrieves the file from the disk.
  5. The server sends the file back to your browser.
  6. Your browser interprets the file and displays it on your screen.
This sequence of events is illustrated in the following diagram.

Client-server interaction for the World-Wide Web - 1

In this type of simple interaction, each Web document was created once with all information included at that time. Such documents are said to be static; the Web pages do not adapt to user input.

In contrast, a dynamic document is produced by a program that can receive input from a user and modify the Web page based on that input. When dynamic Web pages are generated, the sequence of events for Web interaction has an extra step:

  1. Within a Web browser, you type a URL.
  2. Your browser sends a request to the server for that address.
  3. The server finds the file on a disk drive.
  4. The server retrieves the file from the disk and notes that the file identifies a program to run.
  5. The server runs the program, which produces an HTML document.
  6. The server sends the newly-produced HTML document back to your browser.
  7. Your browser interprets the file and displays it on your screen.
This sequence of events is illustrated in the following diagram.

Client-server interaction for the World-Wide Web - 2

For many dynamic documents, the program creating the Web page utilizes data supplied by the user.

A Simple Web Form

The Web page sample-form.html shows a typical form that can collect user data.

  1. Display the Web page sample-form.html in your browser, fill in some data, and click the "submit" button.
  2. Describe the dynamic Web page that results.

In this example, the original Web page collects two pieces of information and transmits the data to a script or program that runs on a Web server. The script retrieves the information and displays it nicely.

In real applications, the user-supplied information might involve such material as words for a Web search, product and credit-card information for e-commerce, or your comments for a book review. The script running on the server then acts on your data, perhaps tailoring your Web search, completing a purchase order, or adding your comments to a database.

Unfortunately, full processing on a Web server typically requires considerable knowledge of computer programming, and discussion of server scripts is beyond the scope of this series of labs. In what follows, therefore, we restrict our attention to how the user enters information and the mechanism used to transmit that data to the Web server.

On the Web page sample-form.html, the basic context for the entering of user data is called a form. This includes the following few lines, written in html:

<form
     action="http://www.cs.grinnell.edu/~walker/fluency-book/forms-info.php"
     method="GET">

Enter some text here:  <input type="text" name="yourText">
<br>

Enter a number here:  <input type="text" name="yourNumber">
<br><br>

<input type="submit" value="Submit Data">
</form>
As this example shows, an html form begins with a form tag and ends with </form>. At the start, the action indicates the URL of the program to be run on a server when the "submit" button is pressed. The method field indicates either GET or POST, the two ways data can be transmitted from an html form to the Web server.

The next lines provide fields for user input through input tags. In the field

<input type="text" name="yourText">
type="text" indicates that the form will include a box for entering text. The attribute name="yourText" provides a name for the user's data; the server's script can retrieve this information by asking for data associated with yourText.

In fact, sample-form.html contains two text boxes, one labeled yourText and the other labeled yourNumber. When the user enters data in each field, the browser tags each piece of information with its identifying name and passes it along along to the server.

In addition to the input fields, the Web page contains some text and formatting instructions to help the user in filling out the form.

  1. sample-form.html labels one box for text and the other box for a number. Try placing numbers in the box for text and letters in the box for numbers. What happens when you click "submit"?

In subsequent labs, we will consider to what extent we can review data supplied by a user, so that numeric fields can be checked to be just numbers, etc.

  1. After clicking "submit", look carefully at the URL in the dynamic Web page. Describe what you see.

The GET Method

When a form submits information with the GET method, the user-supplied data are appended to the URL. This extended URL has the format
   http://www.cs.grinnell.edu/~walker/fluency-book/forms-info.php?yourText=...&yourNumber=...
The first part of this line has the familiar form of a URL, and a question mark separates this location from the user data. Information from the form is organized into pairs:
   key=value
Here, the key is the name given in the form. The user-supplied information follows an equal sign. In this case, the form has two text boxes, so the extended URL has two key-value pairs. An ampersand (&) separates data from different boxes.
  1. The above description indicates that a question mark, equal sign, and ampersand may have special significance in a URL. Type some of these symbols within a text box, and look at what happens in the resulting URL that is generated.

  2. Back in the sample-form.html, enter text that includes a space, an ampersand (&), and a semicolon (;). Describe the resulting URL that is generated when you click "submit".

Within a URL, special characters, such as punctuation marks, are sometimes specified through their ASCII coding (as described in Chapter 2 of The Tao of Computing. In a URL, the coding begins with a percent sign (%), followed by the ASCII coding with two numbers (in the hexadecimal number system). [In case you care, in hexadecimal, the digits 0 through 9 correspond the same numbers as in the familiar decimal system. Then A represents the number 10, B the number 11, ..., and F the number 15.]

  1. Save sample-form.html to your account, so that you can edit this Web page.

  2. Add formatting information to the page, so the words some text appears in a bold font, the text number appears in italics, and several blank lines separate one box from the next. (To review some formatting commands in html, re-read the previous lab on html basics.)

  3. Using the reformatted page from the previous step as a base, add two new text boxes to the form, asking for a first name and a last name. Use reasonable names for these fields. Test your form to be sure that it works properly.

Other User Input

The page sample-form.html illustrates text boxes as one open-ended mechanism for user input. Users can supply any information they wish.

Other types of user input provide the developers of a Web site with some control over the nature of the data entered. Still other input formats provide additional capabilities. Three of the more common types of user inputs are:

Type of InputDescriptionComments
radio box User selects a response Only one box can be checked; if a user selects a second box, the first becomes unchecked
checkbox User can select any number of responses For technical reasons, some server programs require the name of the field to end with square brackets [ ]
password User types input, but characters are displayed as circles or asterisks (*) This input type is often used when the user is to provide passwords

These formats for user input are illustrated on the Web page another-form.html.

  1. Use another-form.html, supplying answers as you wish. Make up fake data for the password box; Do NOT supply a password that you use elsewhere!

    Click submit, and record what happens.

  2. Go back to another-form.html, and save the page source in your account for later experimentation.

  3. View the source, and describe how each input field is specified. How does the output from the server script relate to the information given on this Web page and the data supplied by the user? That is, what key, value pairs are generated?

  4. Use the "submit" button again on another-form.html, and view the URL of the resulting page.

    1. Check that the URL format has the same extended form that you saw previously for sample-form.html.
    2. When you typed data into the password box, only circles or asterisks were displayed. What information is transmitted in the URL? Comment on the extent to which a password box seems to enhance confidentiality or privacy.

  5. Starting with another-form.html, add a new radio box (with a new name field), asking for a person's marital status with boxes for single, married, divorced, and widowed. Be sure to test that this new page works properly.

  6. Beginning with your revised script from the previous step, add a few new fields of varying types for user input. Test your new page, and describe what is displayed when you click "submit".

The POST Method

The forms sample-form.html and another-form.html were written with the GET method for communicating data from your Web browser to the server. As we have seen, the GET method appends information from the form to the designated URL.

A second method, the POST method, works similarly, except that information is transmitted behind the scenes rather than appended to the URL.

  1. Copy sample-form.html to a new file, new-form.html.

  2. In new-form.html, change the word GET to POST. Save the edited new-form.html, load this page into your browser, enter appropriate data, and click "submit".

    1. Describe the information displayed by the script that runs on the server.
    2. Describe what information is found in the script's URL. Does the URL have a simple or extended form?

  3. Save a copy of another-form.html, change GET to POST, use this new form with appropriate data, and click "submit". Again, describe the information displayed by the script and the script's URL.

    While the data transmission behind the scenes does not use encryption for passwords, confirm that this information is now hidden from the casual observer. Comment on the extent to which a password box now seems to enhance confidentiality or privacy.

Work To Be Turned In



This laboratory exercise coordinates with Chapter 11 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Jones and Bartlett, March 2004.
created December 16, 2003
last revised December 30, 2003

Valid HTML 4.01! Valid CSS!