After this lesson you will be able to:
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:email@example.com">
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 <firstname.lastname@example.org> Subject: Form posted from Mozilla To: email@example.com 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:
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:firstname.lastname@example.org" 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 <email@example.com> Subject: Form posted from Mozilla To: firstname.lastname@example.org MIME-version: 1.0 X-Accept-Language: English, en name=Alan Levine email@example.com 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 more 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.
... are used to send form data from the HTML code without it appearing in the layout of the web page.
<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 language called Perl (Practical 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.
<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> <!-- change the value to have the report sent to a real address --> <input type="hidden" name="instructor" value="firstname.lastname@example.org"> </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.
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.
<a href="proj_calc.html"> <font size=+2 face="arial,helvetica">C</font>ALCULATION...</a><br> tool for estimating volcanic flow velocities <p>
<!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)
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 topics for this lesson:
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?
Writing HTML: Lesson 28b: Forming Forms
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.