Home >> Production >> HTML and JavaScript >> Forms and CGI scripts

Forms and CGI Scripts

Continued from Part I

So, there are two ingredients needed to run a form on your Web site.

1. A backend script that will process the form results
2. an HTML page with Form Objects

See a working form example and be sure to view the source to see the HTML code

 

Step One:

You will use Dreamweaver to visually design the look of your form, but you must go into the HTML to tweak the code.

First you must tell your HTML page that the following information is a form.

HTML Dreamweaver

Dreamweaver will automatically insert the following HTML code in your page:

<form method="post" action="">
</form>

It is assumed that you will go back later and add the action (the link to the cgi script) that will process the form results.

Insert--> Form

In Dreamweaver, once you add a Form, a red box will appear on your page. All of your form elements must appear inside this box.

Step Two

Inside the form tags, you can add form objects, such as check boxes, radio buttons, text fields, pull down menus, etc.

In Dreamweaver, you can add these form objects by going to Insert--> Form Objects
(Note: you must insert Form Objects after inserting a Form!!)

In Dreamweaver, you can click on the Form Object and you will notice that the Property Inspector will change to give more options for that particular object. This is where you can name your field, add values, etc.

For example:

 

 

Elements of a form and the HTML code:


Check Boxes
(check all that apply)


Anchovies
Olives
Mushrooms
Sausage
Pineapple
Extra Cheese


HTML Code:

All choices in a group must have the same name. In this example, the above choices are all named "Toppings." The value of each text box is unique.

<input type="checkbox" name="Toppings" value="anchovies">
Anchovies<br>
<input type="checkbox" name="Toppings" value="olives">
Olives<br>
<input type="checkbox" name="Toppings" value="mushrooms">
Mushrooms<br>
<input type="checkbox" name="Toppings" value="sausage">
Sausage<br>
<input type="checkbox" name="Toppings" value="pineapple">
Pineapple<br>
<input type="checkbox" name="Toppings" value="extra cheese">
Extra Cheese


List/Menu
(pull down menu)


Pull down selection... See an illustration

 



Multiple Selection: Here you can select more than one option by holding down the CTRL key.

 


HTML Code

The select name is the name of this field group. Each should have a different value. The value is the way the user's selection will be recorded in the recipient's email. For example, if the user selected Johns Hopkins, the email results will read:

Select College jhu

For the pull down selection:

<select name="Select College" size="1">
<option selected>-Select College-</option>
<option value="loyola">Loyola College</option>
<option value="jhu">Johns Hopkins</option>
<option value="ub">Univ of Baltimore</option>
<option value="nd">Notre Dame</option>
<option value="gc">Goucher College</option>
<option value="towson">Towson State</option>
</select>

For the multiple selection:

<select name="Select Major" size="7" multiple>
<option>--Select Your Major--</option>
<option>. . . . . . .</option>
<option value="writ">Writing</option>
<option value="comm">Communications</option>
<option value="history">History</option>
<option value="eng">English</option>
<option value="phil">Philosophy</option>
</select>


text field

 

Name:
Email:
Address:

When creating your form, you will want to put your fields in tables so they line up better. Here is the code for the above text field table:

 


HTML Code

Don't forget to give each text field it's own name to distinguish them from each other.

<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="15%">Name:</td>
<td width="85%">
<input type="text" name="Name">
</td>
</tr>
<tr>
<td width="15%">Email:</td>
<td width="85%">
<input type="text" name="Email">
</td>
</tr>
<tr>
<td width="15%">Address:</td>
<td width="85%">
<input type="text" name="Address1" size="40">
<br>
<input type="text" name="Address2" size="40">
</td>
</tr>
</table>


Text fields can be used to input name, email, address, or anything really. They can be a single line like this one, or multiple lines, like the example below. The text field can also be as short or as long as you want


<input type="text" name="zipcode" size="5">

 

<input type="text" name="address" size="60">

multi-line text field


In Dreamweaver, you can select a multi area text field but first inserting a text field, and then in the property inspector, select "multi-line" instead of "single line"


HTML Code

<textarea name="Comments" cols="50" rows="7"></textarea>

radio buttons
(select one)


Yes
No
Maybe
Probably
Not sure

Radio buttons offer ONLY ONE choice to users.


HTML Code

All choices in a group must have the same name, in this case it is Will You Marry Me? The value for each one is different, and users can only select one answer.

<input type="radio" name="Will You Marry Me?" value="Yes">
Yes<br>
<input type="radio" name="Will You Marry Me?" value="No">
No<br>
<input type="radio" name="Will You Marry Me?" value="Maybe">
Maybe<br>
<input type="radio" name="Will You Marry Me?" value="Probably">
Probably<br>
<input type="radio" name="Will You Marry Me?" value="Not Sure">
Not sure


buttons

There has to be a way to send off the information you have filled out. Form buttons allow you to submit and reset the form fields.

The type is whether the form will reset or submit info on clicking.

Each form field must have it's own name.

The value is whatever you want the button to say


...or...

The HTML code for adding a button:

<input type="submit" name="Submit" value="submit your order">
<input type="reset" name="Reset" value="clear and reset">


You can also add an image instead of the typical form button to submit your form. Using an image, the form will automatically be a Submit type. See below for adding a reset image.


The HTML code for adding an image button:

<input type="image" border="0" name="Send" src="images/go.gif" width="18" height="20">


Reset button
Some of you might want to use an image for the reset button too. Remember an image button always submits a form. So this is only possible with a trick. You will have to create a hyperlinked image, with a javascript action in the HREF attribute. This action will then trigger the reset of the form. You need to name the form too with a NAME attribute. Try entering some text and then press the button.

<FORM NAME="theform">
<INPUT>
<A HREF="javascript:document.theform.reset()">
<IMG SRC="button.gif" ALT="Reset"></A>
</FORM>
Reset

 

 

 

After you have designed the look of your form, you must go into the code to add hidden form fields which:

  1. Link to the cgi script which will process the form
  2. Add the email address of the intended recipient
  3. Add a "Subject" line so when you receive an email from your form, you will recognize it.
  4. Point to a result URL, usually a page that says "Thank you your form has been submitted" so that users know that the form is working.

See the following code:

First: Link to the script

<form method= "POST" ACTION="http://www.loyola.edu/cgi-bin/mailto.exe"
ENCTYPE="x-www-form-urlencoded">

Add this to the Form tag, we will be using Loyola's email script for our forms. Note that this works only with loyola.edu email addresses and URL's.

 

Second: Add the following hidden fields

<input type="hidden" name="sendto" value="youremail@loyola.edu">
<input type="hidden" name="server" value="gwweb.loyola.edu">
<input type="hidden" name="subject" value="Form from the Web Page">
<input type="hidden" name="resulturl" value="http://nmc.loyola.edu/advanced/studentwork/spring03/lastname/thanks.htm">

Some examples of Forms:

Bridal Babe Feedback form

Astro.com


Further Resources:

Forms and CGI: illustration of how server and CGI function

CGI Made Really Easy: from processing scripts to creating Web forms

A Tour of HTML Forms and CGI Scripts

Good Forms How to make a form work

Is the form complete? JavaScript code that checks to make sure that there are no blank fields left when people submit data.

Is Email valid? JavaScript code that checks email syntax to determine if it's a legitimate email address.

Not at Loyola?
Visit Matt's Script Archive for his CGI Formmail script to add form functionality to your site.