14.3 Using CGI with forms

14.3 Using CGI with forms

14.3.1 A revision of XHTML form and related elements

Working with forms is the cornerstone of many applications on the Internet from government departments to the private commercial sector, forms are everywhere. Just imagine how many electronic forms we all need to fill out in our daily lives. On the Web, from simple data collection, through online ordering, to database applications, forms are important tools to produce sophisticated interactive programs.

In order to use forms effectively on the Web, you need to understand the XHTML form element and its properties and methods. Also, at a professional level, a good understanding of CGI and related technologies such as Perl, PHP, and ASP is essential.

The XHTML form element <form> specifies a form for a user to fill out. More than one form can be specified in a single page and can be nested, i.e., forms can be inside a form. As a quick revision exercise, the form element has the following general format:

Listing: ex14-05.txt - Form Element

 1: <form action ="url" method="xxx" style="xxx" id="xx" name="xx">
 2:   ...
 3:   ... Any Sensible XHTML Elements Can Be Here, In Particular The
 4:   ... Interface or Input Elements
 5:   ...
 6:  <input type="submit" value="Submit" style="xxx" name="xxx" id="xxx" />
 7: </form>

The input element in line 6 is a button-like structure. When this button is pressed, the entire form is submitted to the application or program specified by the form action in line 1. All well-defined XHTML elements associated with the form are submitted to the action.

The action attribute usually specifies a CGI application on the server to be run with the submitted data. If this attribute is absent, then the current document URL will be used. For example, the following action specifies a Perl script to run:

action="showParameter.pl"

The method attribute determines how the data, parameters, or form contents are to be submitted. In normal circumstances, two choices are available:

• get		This method causes the form contents to be appended to the URL as if they were a normal query.
• post		This method causes the form contents to be sent to the server as a data body rather than as part of the URL.

The detailed nature of these form processing methods will be discussed later in this chapter. First, let's see what kind of input or interface elements can be used inside a form.

14.3.2 Using interface elements within forms

Inside the form element <form></form> you can have any XHTML element except maybe another form if you have an old browser. Specifically, the input, select, and textarea elements are often used since they have the ability to get user input and pass information to the CGI applications. These elements sometimes refer to the interface elements due to the fact that they are designed to get user input.

In practice, the first element associated with forms is the input element specified by

<input type="xxx" class="xxx" id="xxx" name="xxx" value="xxx" />

The class attribute defines the CSS style for the element. Using a class may be more convenient than inline style since most input elements occur several times with consistent style settings.

The name attribute is important. When it is embedded within a form, the value in the name field is used to pass data or parameters back and forth from CGI applications.

The type attribute specifies the input types and functionality of the element, as in Table 14.1.

Table 14.1. Type attributes for the <input> element

Type attribute	Description and example
text	Defines a text field ready for keyboard input, e.g., [View full width] <input type="text" name="usrN" id="usrN" class="xxx" />
password	Similar to text field. Entered characters are represented as asterisks, e.g., [View full width] <input type="password" name="passW" id="passW" class="xxx" />
checkbox	A single toggle button; on or off. Multiple checkboxes can be defined and checked, e.g., [View full width] <input type="checkbox" name="check1" id="check1" class="xxx" /> <input type="checkbox" name="check2" id="check2" class="xxx" />
radio	A single toggle button; on or off. Other toggles with the same name are grouped into "one of many" behavior, e.g., <input type="radio" name="rad" id="rad" class="xxx" /> <input type="radio" name="rad" id="rad" class="xxx" />
file	The button displays a file dialog box or a select box that allows the user to select the file, e.g., [View full width] <input type="file" name="fileN" id="fileN" class="xxx" />
button	Defines a button on the Web pages, e.g., [View full width] <input type="button" value="Click" class="xx" onclick="Fun()" />
submit	A button that causes the current form to be packaged and sent to a remote server, e.g., <input type="submit" value="Submit" class="xxx" />
reset	A button that causes the various input elements in the form to be reset to their default values, e.g., <input type="reset" value="Reset" class="xxx" /> 13

The combination of these input elements creates a rich set of tools to get user input. Along with other form elements such as textarea and select, you will have an important interface to obtain information from users.

The textarea element creates a rectangular area for text input. A typical example is

<textarea row="5" col="50" name="myText" id="myText" style="xxx">
This is Textarea</textarea>

This command creates a text area of 5 rows and 50 columns. In this case, the initial text inside the text area is the message "This is Textarea." We used textarea quite often in Chapter 13 to get the contents of an email.

Another interface element used with forms is select. The general calling format is

<select name="xxx" id="xxx" size="x" style="xxx">
      <option >Option 1</option>
      <option >Option 2</option>
      ...
      <option> Option</option>
</select>

If the size attribute is absent, it will create a button-like structure and act as a drop-down menu (similar to a combo box). If the size attribute is present and contains a number, e.g., 3, the select box acts like a listing box and displays three options. If you put the attribute multiple inside the select element, the select box can accept multiple choices. The option elements define the items inside the select box.

Now let's consider a simple example to use a form and submit it to CGI applications. The Web page is listed below:

Example: ex14-04.htm - Obtaining Form Contents

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Obtaining Form Contents - ex1404.htm</title></head>
 6: <style>
 7:  .butSt{background:#aaffaa;width:250px;
 8:     font-family:arial;font-weight:bold;font-size:16pt;color:#880000}
 9:  .txtSt{font-family:arial;font-weight:bold;font-size:16pt;color:#ffff00}
10: </style>
11: <body style="background:#000088;color:#ffff00;font-family:arial">
12: <div style="font-size:22pt;font-weight:bold;text-align:center">
13:    Form Contents and CGI Submission</div>
14:
15: <form action="ex14-09.pl" style="text-align:center">
16:  <table class="txtSt" cellspacing="5">
17:   <tr><td>Name:</td><td>
18:    <input type="text" name="usrN" id="usrN" class="butSt" /></td></tr>
19:   <tr><td>Email:</td><td>
20:    <input type="text" name="email" id="email" class="butSt" /></td></tr>
21:   <tr><td>Password:</td><td>
22:    <input type="password" name="passW" id="passW" class="butSt" /></td>
23:   </tr></table><br />
24:
25:  <table class="txtSt" cellspacing="5"><tr>
26:   <td><input type="submit" value="Submit" class="butSt" /></td>
27:   <td><input type="reset" value="Reset" class="butSt" /></td></tr>
28:  </table>
29: </form>
30: </body>
31: </html>

This page contains a form defined in lines 1529. Three input elements are used inside the form: namely, usrN (user name), email (email address), and passW (password). These text fields are used to obtain user information such as "Name," "Email," and "Password" respectively.

The form also contains a table to accommodate the Submit and Reset buttons. When the Submit button is pressed, the entire form is submitted to the CGI application ex14-09.pl declared in line 15. This Perl script is to echo the submitted contents and will be discussed later in section 14.4.1. Some screen shots of this example are shown in Figs 14.8 and 14.9.

Next, let's consider an example to demonstrate how to use a select box with multiple selections.

14.3.3 A page with multiple select boxes

To demonstrate another use of the form element and how to submit it to a CGI application, consider an example with various select boxes. The Web page has the following listing:

Example: ex14-05.htm - Obtain Values From Multiple Select Boxes

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Multiple Select Boxes - ex1405.htm</title></head>
 6: <style>
 7:  .butSt{background:#aaffaa;width:200px;
 8:     font-family:arial;font-weight:bold;font-size:16pt;color:#880000}
 9:  .txtSt{font-family:arial;font-weight:bold;font-size:16pt;color:#ffff00}
10: </style>
11: <body style="background:#000088;font-family:arial;font-size:18pt;
12:    color:#ffff00;font-weight:bold">
13: <div style="font-size:22pt;font-weight:bold;text-align:center">
14:    A Demonstration Of Form Contents and<br /> Parameter Passing</div>
15:
16: <form action="ex14-09.pl" style="text-align:center">
17:
18: <table class="txtSt" cellspacing="5"><tr><td>Name:</td>
19:  <td><input type="text" name="usrN" id="usrN" class="butSt" /></td>
20: </tr><tr><td>Email:</td><td colspan="3">
21:   <input type="text" name="email" id="email" class="butSt"
22:   style="width:510px" /></td></tr>
23: </table><br />
24:
25: <table cellspacing="20" class="txtSt"><tr><td>
26:   Which operating system are you using?</td><td>
27:   <select class="butSt" name="os" id="os">
28:    <option>Windows 9x</option><option>Windows NT</option>
29:    <option>LINUX</option><option>Mac OS</option>
30:   </select><br /></td></tr>
31: <tr><td>
32:   Which browser do you like best?</td><td>
33:   <select size="5" class="butSt" name="Browser" id="webT">
34:     <option>IE 6+</option><option>IE 5.5</option>
35:     <option>IE 5.0</option><option>NS 7+</option>
36:     <option>NS 6.x</option><option>NS 4.7</option>
37:     <option>Opera</option><option>Mozilla</option>
38:     <option>Others</option>
39:   </select></td></tr>
40: <tr><td>
41:   What kind of Web technologies do you like?<br />
42:   (You can pick multiple answers by holding <br />the Ctrl key.)</td><td>
43:   <select size="7" multiple class="butSt" name="webTech" id="webT">
44:     <option selected>XHTML</option><option>CSS</option>
45:     <option>XML & XSLT</option><option selected>ECMAScript</option>
46:     <option selected>DOM</option><option>CGI</option>
47:     <option>Database</option><option>Perl Script</option>
48:     <option>ASP</option><option>PHP</option>
49:     <option>Web Security</option>
50:   </select></td></tr>
51: </table>
52: <table class="txtSt" cellspacing="5"><tr>
53:  <td><input type="submit" value="Submit" class="butSt" /></td>
54:  <td><input type="reset" value="Reset" class="butSt" /></td></tr>
55: </table>
56: </form>
57: </body>
58: </html>

This is a form application to ask some questions on computers and Web technologies. In lines 1656, we have three tables. The first table contains two input elements of text type and are used to get the name and email address of the user. The second table contains three rows. For each row, there is a select element. The first select element (lines 2730) contains some choices of operating system. The size attribute of this <select> is absent, therefore this select box acts as a combo box and only one row is displayed. The second select element (lines 3339) displays five rows containing a choice of Web browsers. The third select box (lines 4350) is a select box with multiple selections and therefore multiple answers can be picked while holding down the Ctrl key. A screen shot of this example is shown in Fig. 14.10.

The page has a Submit button defined in line 53. When this button is pressed, the entire form is submitted to the form action and processed by the server program ex14-09.pl. Again, this program is a Perl script (discussed later in section 14.4.1) run by the server to display the form contents to the screen. The result is shown in Fig. 14.11.

Since the third select box in Fig. 14.10 can have multiple selections, you have multiple results associated with the name "webTech" shown in Fig. 14.11.

Before the discussion of the Perl script ex14-09.pl used in the previous two examples, let's consider a practical example regarding an online ordering form from a restaurant.

14.3.4 A page to collect online orders

For small businesses such as cafés, shops, or small restaurants, the main business concern is not a large customer database, money transactions, or security on the Web. Assume you are the owner of a café. Perhaps you would like to do the following on the Internet:

• Collect "Take Away" orders.

• Notify orders so that delivery can be made.

• Keep a permanent record so that orders can be traced.

Once the orders are collected and transferred to you, your staff can collect payment at the same time the food is delivered.

This is a basic model of e-commerce and we will show you how to implement it step by step. First, getting online orders can be performed by the page below:

Example: ex14-06.htm - Collecting Online Orders

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Collecting Online Orders - ex1406.htm</title></head>
 6: <style>
 7:   .butSt{background:#aaffaa;width:200px;
 8:     font-family:arial;font-weight:bold;font-size:16pt;color:#880000}
 9:   .butSt2{background:#aaffaa;width:30px;height:30px;
10:     font-family:arial;font-weight:bold;font-size:18pt;color:#880000}
11:   .txtSt{width:200px;
12:     font-family:arial;font-weight:bold;font-size:16pt;color:#ffff00}
13: </style>
14: <body style="background:#000088;font-family:arial;font-size:18pt;
15:    color:#ffff00;font-weight:bold">
16: <div style="font-size:22pt;font-weight:bold;text-align:center">
17:    Jenny's Cafe <br /> Internet Ordering & Delivery Services</div>
18:
19: <form action="ex14-09.pl" style="text-align:center">
20:
21: <table class="txtSt" cellspacing="5"><tr><td>Name:</td>
22:  <td><input type="text" name="usrN" id="usrN" class="butSt" /></td>
23:  <td>Phone Number:</td>
24:  <td><input type="text" name="phone" id="phone" class="butSt" /></td>
25: </tr><tr><td>Address:</td><td colspan="3">
26:   <input type="text" name="addr" id="addr" class="butSt"
27:   style="width:510px" /></td></tr>
28: </table><br />
29:
30: Special Offer From Today's Menu ($3.50 Each)<br />
31: All Come With Fries<br /><br />
32: <table cellspacing="5" border="0">
33: <tr><td><input type="checkbox" name="comb" id="comb" class="butSt2"
34:     value="Burger Combo" /></td>
35:  <td class="txtSt">Burger Combo</td>
36:  <td><input type="checkbox" name="seaf" id="seaf" class="butSt2"
37:    value="Sea Food Burger" /></td>
38:  <td class="txtSt">Sea Food Burger</td></tr>
39: <tr><td><input type="checkbox" name="chick" id="chick" class="butSt2"
40:     value="Chicken Burger Royal" /></td>
41:  <td class="txtSt">Chicken Burger Royal</td>
42:  <td><input type="checkbox" name="lamb" id="lamb" class="butSt2"
43:     value="Lamb Fajita" /></td>
44:  <td class="txtSt">Lamb Fajita</td></tr>
45: <tr><td><input type="checkbox" name="deli" id="deli" class="butSt2"
46:     value="Vegetarian Delight" /></td>
47:  <td class="txtSt">Vegetarian Delight</td>
48:  <td><input type="checkbox" name="supr" id="supr" class="butSt2"
49:     value="Two Jumbo Sausages" /></td>
50:  <td class="txtSt">Two Jumbo Sausages</td></tr>
51: </table><br />
52:
53: How Would You Like To Pay?<br /><br />
54: <table cellspacing="5" border="0">
55: <tr><td><input type="radio" name="rad" id="rad" class="butSt2"
56:    value="Cash" checked /></td><td class="txtSt">Cash</td>
57:  <td><input type="radio" name="rad" id="rad" class="butSt2"
58:    value="VISA" /></td><td class="txtSt">VISA</td></tr>
59: <tr><td><input type="radio" name="rad" id="rad" class="butSt2"
60:    value="Check" /></td><td class="txtSt">Check</td>
61:  <td><input type="radio" name="rad" id="rad" class="butSt2"
62:    value="Master Card" /></td><td class="txtSt">Master Card</td></tr>
63: <tr><td><input type="radio" name="rad" id="rad" class="butSt2" value=
64:    "American Express" /></td><td class="txtSt">American Express</td>
65:  <td><input type="radio" name="rad" id="rad" class="butSt2" value=
66:    "Customer Account" /></td><td class="txtSt">Customer Account</td></tr>
67: </table><br />
68:
69: <table class="txtSt" cellspacing="5"><tr>
70:  <td><input type="submit" value="Submit" class="butSt" /></td>
71:  <td><input type="reset" value="Reset" class="butSt" /></td></tr>
72: </table>
73: Payment Will Be Collected By Delivery Personnel
74: </form>
75: </body>
76: </html>

This page contains three parts. The first one is a table layout (lines 2128) to collect the customer's name, telephone number, and address so that the delivery is possible. The second part defined in lines 3051 contains the food or products that you want to offer. In this case, you have listed six special offerings from today's menu. They are listed as checkboxes so that users can select them very easily. The third part of the page defined in lines 5367 is to collect information on the payment method. In this case, we have arranged six payment methods for customers.

Once the Submit button is pressed in line 70, the entire form contents are sent to the CGI application ex14-09.pl for processing. This Perl script outputs the "Data & Time" string as well as the online ordering. The details of this script will be discussed in section 14.4.1 since they are related to CGI techniques on passing data (we will come back to this example later in this chapter as an e-commerce example). Some screen shots of this example are shown in Figs 14.12 and 14.13.