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:
-
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 .
-
Your browser sends a request to the server for that address.
-
The server finds the file on a disk drive.
-
The server retrieves the file from the disk.
-
The server sends the file back to your browser.
-
Your browser interprets the file and displays it on your screen.
This sequence of events is illustrated in the following diagram.
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:
-
Within a Web browser, you type a URL.
-
Your browser sends a request to the server for that address.
-
The server finds the file on a disk drive.
-
The server retrieves the file from the disk and notes that the file
identifies a program to run.
-
The server runs the program, which produces an HTML document.
-
The server sends the newly-produced HTML document back to your browser.
-
Your browser interprets the file and displays it on your screen.
This sequence of events is illustrated in the following diagram.
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.
-
Display the Web page sample-form.html in
your browser, fill in some data, and click the "submit" button.
-
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.walker.cs.grinnell.edu/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.
-
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.
-
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.walker.cs.grinnell.edu/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.
-
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.
-
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.]
-
Save sample-form.html to your account, so
that you can edit this Web page.
-
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.)
-
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 Input | Description | Comments |
| 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.
-
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.
-
Go back to another-form.html, and save the
page source in your account for later experimentation.
-
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?
-
Use the "submit" button again on another-form.html, and view the URL of the
resulting page.
-
Check that the URL format has the same extended form that you saw
previously for sample-form.html.
-
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.
-
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.
-
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.
-
Copy sample-form.html to a new file,
new-form.html.
-
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".
-
Describe the information displayed by the script that runs on the server.
-
Describe what information is found in the script's URL. Does the URL have
a simple or extended form?
-
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
-
Copies of the file sample-form.html for steps 9 and 15.
-
Explanations for steps 2-4, 6, 10, 12, 13b, 17, and 18.
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
|
|