ࡱ > M O L @ bjbjT~T~ :T 6 6 `8 6 p p 8 4 O O O O O * * * j l l l l l l $ X * * * * * O O * O O j * j O mLT V 0 X h * * * * * * * * * * * * * * * * * * * * * * * p y : 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. Its 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:
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: 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