CGI and Forms
This section discusses CGI (Common Gateway Interface) and Forms.
© Copyright Brian Brown, 1997-2000. All rights reserved.
| What is CGI | Forms | Validating Forms |
| Forms and ActiveX | JavaScript and Forms | References |

What is CGI
CGI stands for Common Gateway Interface. It is a specification that allows a client to send data to a Host and for that Host to return data back to the client.

In normal HTTP operation, the client computer sends an HTML request for a page to the WWW server. The server finds the page, and sends the HTML back to the client and the client browser interprets the HTML code and displays it.

In CGI, HTML coded elements on the page cause data to be sent to the WWW server along with the HTML request. This request is passed onto a program that runs on the WWW server, which retrieves the data, analyses it, acts upon it, then replies to the client. We can think of this as the client invoking a separate program on the Server to handle their request.

Obviously, this raises security and performance issues. CGI programs running on the server add an extra overhead in terms of memory and CPU time that can impact on the servers ability to service requests from clients. In addition, an incorrectly written CGI program could cause the server to fail or corrupt other vital data.

CGI programs can be written in PERL, C or Visual Basic (uses an interface WINCGI that not all servers support).

In summary then, an HTML page loaded by the client contains form elements that specify data to be sent to the server for processing. This data is sent when the form is submitted, and passed by the server to a CGI program for processing. This CGI program returns the results to the client as an HTML document.

Typical applications for CGI involve online testing, questionnaires, survey forms, comment forms, linking to external data in database systems, on-line shopping and much more.

Forms
A form is an HTML document that allows the client to send data back to the WWW server for processing. Typical applications for forms are questionaires, feedback, shopping orders, inventory systems, testing and queries.

Forms are like the client side of CGI, in that they are elements on an HTML page that hold data which is sent to the CGI application associated with that form.

Later in this document we will use VBscript to interact with and process form elements without using a Server based CGI application to process the form data. For now, let us begin with a basic discussion about how to construct a form and use simple form elements.

The Basic Form
A basic form consists of a <FORM> statement and action. In addition, several special HTML statements are used to implement FORM elements, namely

• Submit
• Reset
• Single Line Entry Boxes
• Radio Buttons and Check Boxes
• Pull down lists

A minimal <FORM> statement looks like

<FORM NAME="Sample" METHOD="POST" ACTION="http://www.cit.ac.nz/cgibin/register/echoout.exe">
</FORM>

Any FORM elements like text boxes or radio buttons would be placed between the <FORM> and </FORM> statements. In the above statement, the form is associated with a CGI application called echoout.exe on the server www.cit.ac.nz. This CGI application simply echo's any form data directly back to the client as an HTML document, so is a handy mechanism of checking that your form is sending data correctly to a CGI application.

Simple Form Elements
Associated with every form are a number of elements written in HTML

•  
• Submit
  This form element presents a button, which when clicked, sends the data contained in the form elements to the CGI application for processing. A typical Submit button has the following syntax

  <INPUT TYPE=SUBMIT VALUE="Send">

  and looks like

• Reset
  This form element presents a button, which when clicked, resets the form elements to their default state. A typical Reset button has the following syntax

  <INPUT TYPE=RESET VALUE="Clear">

  and looks like

• Single Line Entry Boxes
  This form element presents a text entry box, which allows the user to enter text data. A typical single line text entry box has the following syntax

  <INPUT TYPE=TEXT NAME="Address" VALUE="Enter Address Here" SIZE=20>Address
  

  and looks like

  Address
  

  The name field specifies a unique name you give to the data field whose name and contents will be sent to the CGI application. The size parameter specifies the width in characters of the text entry box. Note that you can click the cursor into the text entry box and enter data into it.

• Radio Buttons
  This form element presents a radio button, which can be enabled or disabled . A typical radio button has the following syntax

  <INPUT TYPE=RADIO NAME="button1" VALUE="1" CHECKED>Orange
  <INPUT TYPE=RADIO NAME="button1" VALUE="2" >Lemon
  <INPUT TYPE=RADIO NAME="button1" VALUE="3" >Apple
  

  and looks like

  Orange
  Lemon
  Apple
  

  Radio buttons are mutually exclusive. In the above example, because all the radio buttons have the same name button1, only one of the buttons can be checked at any time. The CHECKED option specifies that the specified radio button is the default enabled radio button.

• Check Boxes
  This form element presents a checkbox, which can be enabled or disabled . A typical checkbox has the following syntax

  <INPUT TYPE=CHECKBOX NAME="Oranges" VALUE="1" CHECKED>Oranges
  <INPUT TYPE=CHECKBOX NAME="Lemons" VALUE="2">Lemons
  <INPUT TYPE=CHECKBOX NAME="Apples" VALUE="3">Apples
  

  and looks like

  Oranges
  Lemons
  Apples
  

  In the above example, each check box has a different name. If the user selects the checkbox Apples and enables it, this will have a value of 3 when submitted to the CGI appplication. The first checkbox uses the option CHECKED to enable the checkbox.

• Pull Down Lists
  This form element presents a list of options, in a pull down menu, and the user selects one choice from the list. A typical pull down list has the following syntax

  <SELECT NAME="Mylist">
  <OPTION VALUE="Tea">Tea
  <OPTION VALUE="Coffee">Coffee
  <OPTION VALUE="Hot Chocolate">Hot Chocolate
  <OPTION VALUE="Water">Water
  </SELECT>
  

  and looks like

  Tea Coffee Hot Chocolate Water

  In the above example, the name of the menu is MyList. If the user selection the option Coffee, then the value associated with that option will be associated with the menu and be submitted to the CGI application.

Program to test and echo form data
We have supplied a program that will take the data submitted by a form and echo this information back to the client as an HTML document. It is a CGI application written in C and compiled using Borland C++ v5.0

Echoout.exe
C Source Code

Here is a sample use of echoout. Click on the Send button to see how the CGI program works and what it sends back to the client browser. The name assigned to the pull down menu form element is Q1.

Validating Forms
So far, we have looked at static type forms. In this we mean that the data is sent to the CGI application, and the application processes this data accordingly. This could involve the validation of information, such as verifying whether the data was correct.

Form elements, when combined with VBScript or JavaScript, can perform client side validation of data. In this way, the data within the form can be validated by the client before being submitted to the server for processing. This simplifies the processing required on the server side.

Consider the following example. This is an entry box which requests a users email address. A simple check is to search the field for the @ symbol, because every email address must have one. Before the data is sent to the CGI application for processing, the onSubmit clause is added to the FORM statement which causes the Javascript function validate to be invoked. This function checks the text entry for the @ symbol, and if it finds one, returns TRUE, which allows the data to be passed to the CGI application.

The code looks like

<script language="JavaScript">
<!-- Hide
function validate( form ) {
if ( form.email.value == "" || form.email.value.indexOf('@',0) == -1)
{ alert("Invalid e-mail address!");
return false;
}
else return true;
}
--></script>
<FORM NAME="MyForm3" METHOD="POST" ACTION="http://www.cit.ac.nz/cgibin/register/echoout.exe"
onSubmit="return validate(MyForm3)">
Email Address :
<input type="text" name="email">
<input type="submit" value="Send">

The form looks like