HP color scanner - Furman University



Interactive Forms and Scripts

Overview: The Web begins to reach its full potential when its users are able to interact with others through a Web page. An important method for doing this is through HTML forms, which gather information from a user. This information can then be processed by a JavaScript (client-side) script, a PHP (server-side) script, or a CGI script, a special kind of computer program. The script might perform calculations, store data in a file, cause information to be displayed on a new Web page, cause an e-mail message to be sent, etc. In this activity we will explore the use and writing of forms that use a pre-written CGI script. The significance of this exercise is in the writing of the form, not the way that it is processed.

1. Overview

Using HTML forms, Web pages can be created which allow you to gather data and process it in different ways. The data can be organized and written to new Web pages, used to build and manipulate extensive databases, used as the subject of statistical analysis, etc. The data can also be packaged and mailed to a specified e-mail address. One way to perform these functions is to use special-purpose CGI scripts.

"CGI" stands for "Common Gateway Interface." On every Web server there resides a special directory that is designated as the repository for programs which can process input from Web forms. This is typically called the "cgi-bin" directory. (The "bin" stands for "binary", identifying an executable program.) Additional directories may also be designated as “executable” if desired, though it is often considered a security risk to do so.

Several programming languages may be used to write CGI scripts. These include Java, Visual Basic, C++, and Perl. Writing scripts in one of these languages requires considerable programming expertise, and is beyond the scope of this class. An additional obstacle to the authoring of scripts of this type is the fact that (typically) only the system administrator of a Web server can install them.

However, a rather large library of useful scripts has been developed, and many of them can be relatively easily modified for use on your Web site. When you find a useful script, you need to work with your network administrator to get it installed, and then write your form to use it.

Another way to process form data is to use PHP. If your server supports this technology, you can avoid many of the hassles of CGI scripting, because the PHP code is written into your HTML. It’s then processed by the server. (Java servlets and Active Server Pages are two other alternatives for server side processing.)

Finally, scripts written using JavaScript can also process data from forms and don't require any special access privileges because the code is written right in your HTML code, like PHP code. Unlike PHP, however, these scripts are processed by your browser (not by the Web server). We will cover both PHP and JavaScript in much detail a little bit later. In this activity we'll explore the use of CGI scripts written in Perl to process form data. The primary objective of this activity is to learn about writing forms, not about writing scripts (yet).

2. E-mail forms

E-mail forms provide Web authors with a fairly simple mechanism for using forms in their pages to gather information, package it, and have it mailed directly to the author of the Web page (or whomever the author designates). One way to set this up is to use a pre-written Perl script called "FormMail” to process a form that you write. FormMail is freely downloadable from the Web, and has been installed on the CS Department server for your use this semester.

Writing the form

There are a number of possible components to a fill-out form. The HTML used to create them is reasonably straightforward. We will consider each of the principle components in turn. Create a new file called form.html in your web folder from previous labs (on your USB drive). Perform the following experiments using this file.

Setting up

The first thing you must do is declare the form, which specifies in part how the data will be handled. The standard form tag looks like this:

HTML for the form

The URL generally specifies the name of a CGI script in the cgi-bin directory of some Web server. For our purposes, we need the URL of the FormMail script. Like so:

...

To construct this in Dreamweaver, look at the Insert palette right under the menu bar. The “Common” tab is currently selected. Choose the “Forms” tab instead. Click on the Form button (the left-most one). A red dashed box will appear on your page. (Alternatively, you can choose Insert>Form from the menu bar.) This represents your form. With the form selected, use the Properties palette at the bottom of the page to specify the properties shown above (name, method, action).

Between the FORM tags (i.e., inside the red dashed box) goes the HTML that invites the user to enter data using different types of form elements. Each form element must have a name. The name is very important as it is how the incoming data will be identified. For all of the components of a form, you should take care to choose a logical name. (No spaces are allowed.)

Some of the most common mechanisms for defining form elements are reviewed below. Try some of them out to see first-hand what they do. First read over the basic HTML description, then use Dreamweaver to create the appropriate form element. Ask questions if you get stuck.

Single line text input fields (Insert>Form>Text Field in Dreamweaver)

The most basic (and common) type of form field is the one-line box for the entering of text. All you need to specify is the type of data to be entered (text in this case), the size of the text box, and its name. The HTML looks something like:

Please enter your phone number:

The VALUE attribute is optional. It provides a default value for your text box. When the user types something into the text box and submits the form, whatever they typed in is sent to the CGI script under the name "Phone_Number".

FormMail has special features for handling text fields named "realname" and "email". These are the names you should use if you wish to collect the respondent's name and e-mail address. The HTML for each field would be:

Please enter your name:

and

Please enter your e-mail address:

If a "realname" field is defined, FormMail will use the name in the "From:" line of the e-mail message you receive. If an "email" field is defined, the address that is entered will be the return address of the message that you receive.

Multiline text fields (Insert>Form>Text Field in Dreamweaver)

Sometimes multiple lines of data are to be requested from a user. This can be accomplished using a special TEXTAREA tag in which a name, and the number of rows and columns is specified. Unlike the one-line text box HTML, the TEXTAREA tag comes in pairs. Between the opening and ending tag you can place default text. For example:

Default Text

Radio buttons (Insert>Form>Radio Button in Dreamweaver)

Radio buttons are used to select among a series of options when the user is allowed to make one and only one choice. For example:

True

False

The CHECKED property means that the "True" radio button will be checked as the default. This needn't be specified at all. The value that the user leaves checked will be sent under the name "Question1" to the specified destination (CGI script ).

Check boxes (Insert>Form>Checkbox in Dreamweaver)

When more than one option can be selected, check boxes are more appropriate than radio buttons. The following example shows how to set one up:

United States

Canada

Great Britain

With this configuration, the user can check off any number of boxes, with each that is checked causing the value "CHECKED" to be sent to the destination under the appropriate name.

Scrolling lists (Insert>Form>List/Menu in Dreamweaver)

Lists provide another mechanism for displaying options to a user. There are two basic formats: scrolling lists and pull-down menus. Each allows a single option to be chosen. A scrolling list displays some subset of the choices, with the others available via scrolling. The SIZE attribute specifies how many choices to display. For example:

Outstanding

Excellent

Above Average

Average

Below Average

Marginal

Horrible

Whatever the user selects will be sent as the value of the name "Rating". The first four options will be displayed with this configuration. The optional SELECTED attribute identifies which value will be the default selection.

Pull-down menus (Insert>Form>List/Menu in Dreamweaver)

With a pull-down menu, only one option is displayed, with the others available at the click of the mouse. The only difference from a scrolling list is that no SIZE is specified. For example:

Outstanding

Excellent

Above Average

Average

Below Average

Marginal

Horrible

In this case, the SELECTED attribute identifies the option that is initially selected and displayed.

Send and reset buttons (Insert>Form>Button in Dreamweaver)

Every form needs to be finished off with a "submit" button, which causes the form data to be packaged and sent to the designated CGI script. Another helpful (but not necessary) button to include is one that clears the form so the user can start over. The HTML for these buttons might look like:

After these would typically come the tag.

Implementing the FormMail script with hidden fields and default values

(Insert>Form>Hidden Field in Dreamweaver)

For the FormMail script to work correctly, the author of the form must specify the contents of some of the fields ahead of time. This is done using a mechanism called a hidden field. Hidden fields, as you might guess, are not displayed in your browser. They do, however, have values which are sent to the CGI script for processing.

The hidden fields defined below are typically declared immediately after the tag that begins the form.

The FormMail script requires that a value be provided for a field called "recipient". This specifies the e-mail address (or addresses) to which the form input will be sent. This declaration should follow right after the FORM tag, and it looks like this:

If you want to specify a subject heading for all of the messages you receive with this form, you use another hidden field with the name "subject", like so:

Alternatively, you can allow the user to specify the subject using a standard (non-hidden) text field:

A very helpful feature of FormMail is the ability to specify which fields of your form must be filled in for the e-mail to be sent. This is accomplished using a hidden field with the name "required". Suppose you have defined a text area called "Comment" which will be used to solicit student responses. You want the form to be rejected if nothing is entered in this field. Suppose you also require that the student's real name and e-mail address be given. The following hidden field would do the trick:

Finally, a hidden field can be used to specify to FormMail the order in which you would like to have the results displayed. For instance, you might insert the following field:

Note that for these examples, "recipient", "subject", "required" and “sort” are the names that FormMail dictates that you must use for the fields. In other cases, you may choose your own.

Note: It should be emphasized that the fields discussed in this section are specific to the FormMail script that we’re using for this example. Different CGI scripts will require different fields and field names. One of the things that you must learn when you install a new script is what information it requires under what field names.

Test the form

Take some time to implement some of the form components listed above, using your own e-mail address. Then upload the page to your CS Department server account. Use your browser to submit the form and then check your e-mail. Try out the option of specifying which fields must be filled in for the form to work (i.e., the required fields) and then submitting the form without those fields completed. Try specifying different subject lines. Try different types of fields. This is really a very flexible tool. To learn more, visit the Web site of the author at

Create a link from your home page (index.html) to form.html. Make sure both pages are uploaded to the CS Department server and test them.

Other scripts

As noted previously, we’ll soon begin learning the process of writing our own scripts to process form information. Our primary tool for this will be the language PHP.

3. Formatting

It is important to note that all of the HTML tags that you know can be embedded inside the FORM tags. That means that forms can be formatted using graphics, different fonts, and even tables and frames. Experiment until you find the most appealing layout for your form. And remember that this same script can be used to handle as many forms as you choose to write.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download