Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

28b. Form Action by email and CGI

Objectives

After this lesson you will be able to:

Make a web page form work by sending content via e-mail
Describe the content of a web form data submission
Make a web page form that sends data via email in a readable format
Make a web page form work by sending it to a CGI script
Write the HTML for a hidden form element

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

In our previous lesson we created the HTML code to put form elements into our web page. Now we will make it do something.

Web forms were designed for viewers to send content from a web page to a special program on a web server, that would do something with it and return a message back to the person who sent it. This whole transaction takes place in a matter of seconds or even quicker! if you want to provide this type of interaction in a web page, it must communicate with these special programs, typically called CGI for Common Gateway Interface. For more information, see NSCA's overview of CGI.

To have this functionality, you must write them in a complex programming language. Or, you may have access to a web server that provides these programs. Later in this lesson we will show you how to make forms work with such programs, but first we will show you an alternative way to get information from web page forms... by old fashioned e-mail.

You can add code to a web page form so that it emails the data that the form would normally send across the internet to a CGI program. To do this. modify the FORM tag you created in the last lesson to read:

  <form method="post" action="mailto:me@myemail.bigu.edu">

We have here assigned the "action" of a form to take all of its data and send to whatever email address is provided.

But what does it look like? It's not very pretty! If we added this to the Report form we created in the last lesson, we would get an email message that contains something that looks like:


Date: Mon, 21 Dec 1998 15:44:18 -0700
From: alan levine <alan.levine@domail.maricopa.edu>
Subject: Form posted from Mozilla
To: me@myemail.bigu.edu
MIME-version: 1.0
X-Accept-Language: English, en

name=Alan+Levine&email=levine%40maricopa.edu&pass=ilovehtml&vname=Big+Volcano
&vlat=142+N&vlong=28+S&vtype=Phreato-Plinian&active=active&vdate=April+1%2C+1999
¬e1=danger+risk¬e3=observed&info=Big+Volcano+is+located+on+the+edge+of+a+
huge+mountain+range.+It+is+the+part+of+the+local+legends+of+the+original+inhabitants
+of+this+region.&ref1=http%3A%2F%2Fwww.abc.com&ref2=http%3A%2F%2F&ref3=http%3A%2F%2F

This example may give you an idea what a web form does with all of the text you write in and buttons you click on it-- it attaches it all in a long, single string of text. If you look closely, you can see that the format is:

element1_name=element1_value&element2_name=element2_value... &elementN_name=elementN_value

so that each form element (fields, radio buttons, text area) sends its name connected by equal signs to its value, and they are strung together connected by "&" symbols. Furthermore, all of the blanks in the input are translated to "+" signs ("Alan Levine" entered in a text field becomes "Alan+Levine"), and other symbols such as ":", "/", are converted to things like "%3A" and "%2F".

This is done because it is a useful format for a CGI computer program to extract the content, evaluate it, and then do something in response.

While you could use this technique on your own web forms, the results are not very useful to work with. There is another option you can use, however, to improve the format in which form data is sent via email, by again modifying the FORM tag to read:

  <form method="post" action="mailto:me@myemail.bigu.edu"  enctype="text/plain" >

The tag enctype= for encoding type instructs the web browser to send the form data not as form data like the example above, but to send it as a simple text listing. For example, adding this to our report form for the Volcano Web site, the email message we receive now looks like:

Date: Mon, 21 Dec 1998 15:44:18 -0700 From: alan levine <alan.levine@domail.maricopa.edu> Subject: Form posted from Mozilla To: me@myemail.bigu.edu MIME-version: 1.0 X-Accept-Language: English, en name=Alan Levine email=alan.levine@domail.maricopa.edu pass=ilovehtml vname=Big Volcano vlat=142 N vlong=28 S vtype=Phreato-Plinian active=active vdate=April 1, 1999 note1=danger risk note2=historic eruptions note3=observed info=Big Volcano is dangerous! It has killed many people. ref1=http://www.bigu.edu/volcanoes ref2=http://www.usgs.gov/ ref3=http://www.volcano.nodak.edu/

which is now in a much more readable form.

NOTE: Although you can develop web forms that work by routing the information via e-mail, this approach is not very reliable for many people. It requires that the web browser is configured to send email through someone's account, so it may not work on say a web browser configured to be accessed in a public place. For more details, see the April 2000 newsletter from NetMechanic.

There are a number of free sites that will host mroe reliable CGI mailing scripts for you, such as FormMail.To, FormMailer, Response-O-Matic, and others listed at The Free Site.

Sending form data by email can be useful if you do not have access to CGI scripts or a web server, but it provides only limited interaction; the form data can be emailed to you, but the person that sends it gets no feedback from sending the form.

We will now modify the report form so that it is processed by a CGI script. Because not everyone has the capability to run these scripts, we have written it for you and you can run it from our web server.

This script will perform two functions for our Volcano Web Report Form. It gives the person using the form an option to have their report sent to their instructor by e-mail as well as an option to display the report as a web page (which could then be printed).

The form will have a new feature that allows us to embed in the HTML code another web form element (that is not displayed on the page) where we could also send the email address for the instructor, allowing different email addresses to be used on different web pages.

Hidden Input Elements (`type="hidden"`)

... are used to send form data from the HTML code without it appearing in the layout of the web page.

Open the proj_report.html file in your text editor.
Modify the <form> tag near the top of the document to read:
```
<form method="post" action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/report.pl">
```
The action tag contains the URL for a CGI script on the MCLI web server that will do the tasks we have programmed into it.

This script is programmed in a langauge called Perl (Practial Extraction and Report Language), described by its creator Larry Wall as "an interpreted language optimized for scanning arbitrary text files, extracting information from those text files, and printing reports based on that information. It's also a good language for many system management tasks. The language is intended to be practical (easy to use, efficient, complete) rather than beautiful (tiny, elegant, minimal)." Perl is one of the leading tools, but by no means the only way to program interaction from web forms.

For the purpose of this tutorial, and often for many web development tools, you do not even have to understand how it works to use it! If you are interested we do provide the perl source code, but you do not need it to do this lesson.
Next we will modify the bottom part of the web form to provide the options for emailing or printing the report. Below the table row that contains the label for send report and above the table row that contains the form Submit and Reset buttons, add this new table row:
```
<tr>
<td valign=top align=right><tt><b>format</b></td>
<td valign=top>
<input type="checkbox" name="rep_email" value="y">
send to my instructor via email<br>
<input type="checkbox" name="rep_web" value="y" checked>
generate a web page for preview/printing<br>
<font size=2 color=#000099>
select options for processing your report</font>


<input type="hidden" name="instructor" value="lava@pele.bigu.edu">
</td>
</tr>
```
We have added two new checkboxes; the first one tells the script to send the report by email and the second one (checked by default) will display the report as a web page. The last form tag is a hidden form element named "instructor". The value of this tag is the email address that the report will be sent to. If you want to see how this works, you should insert your own e-mail address into this tag.
Save and Load the proj.html page in your web browser. Try the form now and see what happens when you check the different options. (What happens if none are checked?)

More with Forms and CGI

While useful, the report form we created is a very basic example of what we can do with CGI scripts. We could have added features so that the submitted reports were written as files to the web server so that other people could see them, it could have checked the different input against a database of known information for volcanos, or many more tasks.

Writing CGI scripts is not overly complex but complex enough to be beyond the scope of this tutorial. Generally these scripts can be customized to do almost anything you can think of! But you need to have some knowledge of a scripting/programming language. You can find more resources from our reference page.

But for now, we will create one more page that uses a CGI script to perform a calculation. Again adding to our Volcano Web Project page, we will create a web page that has a tool for estimating the velocity of different volcanic flows.

First we have to modify the left frame of our Projects page to provide a new link. Open the proj_menu.html file in your text editor.

Above the link information created for the Report Form, add this HTML:

<A HREF="proj_calc.html">
<font size=+2 face="arial,helvetica">C</font>ALCULATION...</A><br>
tool for estimating volcanic flow velocities
<p>

Save this document

For our new page, we will need a graphic image that shows a diagram to present the concept for this calculation page. You can get the image from the Lesson 28b Image Studio and it should be saved inside the pictures folder/directory with your other image files.
Create a new HTML file in your text editor and save it as proj_calc.html

Write this HTML in this new document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head></head>
<BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
<h2 align=center>Simple Calculations</h2>
<h3>Equation Kinetic and Potential Energies</h3>
To better understand the many kinds of volcanoes, we can use some
math and the laws of physics. In an eruption, you can track a
"block" of volcanic material from some point where all of its
energy is potential energy and equate it at some other point
where it is at a maximum of kinetic energy:
<p>
<center>
<img src="../pictures/hb_graph.gif" alt="energy diagram" width="342" height="199">
</center>
<p>
where <font color="red"><b>m</b></font> is the mass of the
"block", <font color="red"><b>g</b></font>  is the gravity
acceleration constant, <font color="red"><b>h</b></font> is the
height where all energy is potential energy, and <font
color="red"><b>v</b></font> is the velocity when the kinetic
energy is at a maximum.
<p>
Assuming conservation of energy, with some algebra we can write 
this relationship as:
<P>
<center>
<font size=+3><tt> 2 g h = v<sup>2</sup></tt></font>
</center>
<p>
This means that if we know a height at which a volcanic flow
surmounted an obstacle, we can estimate its maximum velocity at
some point before or after the obstacle. This technique was used
to estimate the maximum flow velocity of a landslide in Iran that
climbed a 600 meter hill as well as a volcanic eruption in Japan
that climbed 500 meters over a mountain pass. The estimates are
supported by observations of these events.

<h3>Equation Kinetic and Potential Energies</h3>
Use the form below to calculate estimated maximum velocities for
volcanic eruptions where you can document how far they have
climbed (for large <a href="term.html" target="_top">Plinian</a>
eruptions, some researchers use the maximum height of the
eruption cloud).
<p>
<center>
<form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl">
<table border=0 cellpadding=6 cellspacing=2>
<tr>
<td valign=top align=right><tt><b>maximum height</b></td>
<td valign=top><input type="text" name="height" size="10"> 
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>units</b></td>
<td valign=top>
<input type="radio" name="units" value="meters" checked> meters
<input type="radio" name="units" value="feet"> feet
</td>
</tr>

<tr>
<td colspan=2 align=center><input type="submit" value="calculate velocity">
</td>
</table>

</form>
</center>
Note that this is a very generalized way to look at volcanic
eruptions; i.e. it does not account for losses of energy due to
friction nor the different mechanics for fluid flow. However, it
has proven to be useful to compare different volcanoes.
</body>
</html>

NOTE: Most of this document is HTML you should be familiar with from previous lessons, used to describe the calculation form at the bottom of the page. The <form> tag references another perl script we have written for you. The form's input is a text field for the number representing the height (H) and radio button options for its units of length.

The CGI script checks the input (making sure it is a positive number) and returns an answer in the appropriate unit. (view CGI source code)

Save and Load the proj.html page in your web browser. Try the new calculation form.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

How can you make a form send its data to you by e-mail?
What does form data look like?
How can you make the form data mailed to you in a format that is easy to read?
How do you write a form tag to send the data to a CGI script?
What is the HTML form code for a hidden form element? How might you use this?

Independent Practice

See if you can write a web form that has the same elements as our form but is designed in a different page layout-- can you get the form to work?

Coming Next....

Web page / form interaction fueled by JavaScript.

GO TO.... | Lesson Index | previous: "Forms: Intro" | next: "Form Action with JavaScript" |

Writing HTML: Lesson 28b: Forming Forms
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut28b.html