Handout 27

Sending Information Using HTML Forms

The Problem

When we need to get information from an HTML form sent to someone we can use the action="mailto:..." option of the form tag. This will generate an e-mail message and forward the information to the specified user. The HTML file shown below uses this option at line 16.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  2. <HTML>
  3. <HEAD>
  4. <META NAME="GENERATOR" Content="Visual Page 1.0 for Windows">
  5. <META HTTP-EQUIV="Content-Type"
  6. CONTENT="text/html;CHARSET=iso-8859-1">
  7. <TITLE>sample c cgi-bin</TITLE>
  8. </HEAD>
  9. <BODY TEXT="#FFFF00" BGCOLOR="#AA0000">
  10. <H3 ALIGN="CENTER">This is a sample cgi-bin program using a c
  11. program.</H3>
  12. <P>
  13. <HR ALIGN="CENTER">
  14. </P>
  15. Enter input for the C sample and click <BR>
  16. <form method="POST" action="mailto:pheattch@mathcssun.emporia.edu">
  17. <br>
  18. <INPUT NAME="textentry" VALUE="Text Entry Field " SIZE = 20>
  19. <br>
  20. <INPUT TYPE="checkbox" NAME="checkbox" VALUE="Check box" CHECKED>
  21. <br>
  22. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 1" CHECKED>
  23. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 2">
  24. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 3">
  25. <br>
  26. <INPUT TYPE="password" NAME="entry1" VALUE="Password" SIZE = 20>
  27. <br>
  28. <SELECT NAME="optionmenus">
  29. <option>Option Menus
  30. <option>Another Option
  31. </SELECT>
  32. <br>
  33. <SELECT NAME="scrolldown" SIZE = 3>
  34. <option>Scroll Down Menus
  35. </SELECT>
  36. <br>
  37. <TEXTAREA NAME="multiline" ROWS=3 COLS=30>Multi-Line Text Entry Field</TEXTAREA>
  38. <br>
  39. <INPUT TYPE="hidden" NAME="mail_to_address" VALUE="pheattch@emporia.edu">
  40. <br>
  41. <input type="SUBMIT" value="ENTER">
  42. <p>Values of environment variables will be displayed to the screen
  43. </form>
  44. <P>
  45. <HR ALIGN="CENTER">
  47. <FORM METHOD="GET" ACTION="mailto:pheattch@mathcssun.emporia.edu">
  48. <INPUT TYPE="text" NAME="q" SIZE=45>
  49. <INPUT TYPE="submit" VALUE="send it"><BR>
  50. <INPUT TYPE="hidden" NAME="mail_to_address" VALUE="pheattch@emporia.edu">
  51. <INPUT type=radio name=fs value =web checked>The Web<BR>
  52. <INPUT type=radio name=fs value = use>Usenet<BR>
  53. <INPUT type=radio name=fs value = ftp>Ftp<BR>
  54. <INPUT type=radio name=fs value = nws>Newswires<BR>
  55. <INPUT type=radio name=fs value = wth>BizNews<BR>
  56. <INPUT type=radio name=fs value = qte>stuff<BR>
  57. </FORM>
  58. <HR>
  59. </BODY>
  60. </HTML>

The webpage displayed by the HTML file given above is shown below:



When the user presses the enter button, the information is e-mailed. The information received in the e-mail
message look like the following:


textentry=Text+Entry+Field+&checkbox=Check+box&radio=Radio+Button+1&entry1=Passw
ord&optionmenus=Option+Menus&multiline=Multi-Line+Text+Entry+Field&mail_to_addre
ss=pheattch%40emporia.edu       


Not easy to follow what was actually transmitted.


A Solution


A cgi-bin program has been developed that transfers information via e-mail in a more understandable format.
To use this program two things need to be changed in the HTML file:



    
	
  1. The mailto command is replaced by a call to the cgi-bin program. In the above program (line 16): 
    
	<form method="POST" action="mailto:pheattch@mathcssun.emporia.edu"> 
    
	is changed to
    
	<form method="POST" action="http://mathcssun.emporia.edu/mailto/mailto.cgi">
	
  2. A hidden form field is added which specifies the e-mail address of the person to receive the mail. The form
	of the item is: <INPUT TYPE="hidden" NAME="mail_to_address" VALUE="pheattch@mathcssun.emporia.edu">




The cgi-bin script works with both POST and GET methods of forwarding information
and the example below shows both.



The HTML file shown below implements both changes (lines 17 and 40 for the POST method, also
49 and 52 for the GET method):





    
	
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
	
  2. <HTML>
	
  3. <HEAD>
	
  4. <META NAME="GENERATOR" Content="Visual Page 1.0 for Windows">
	
  5. <META HTTP-EQUIV="Content-Type"
	
  6. CONTENT="text/html;CHARSET=iso-8859-1">
	
  7. <TITLE>sample c cgi-bin</TITLE>
	
  8. </HEAD>
	
  9. <BODY TEXT="#FFFF00" BGCOLOR="#AA0000">
	
  10. 
	
  11. <H3 ALIGN="CENTER">This is a sample cgi-bin program using a c
	
  12. program.</H3>
	
  13. <P>
	
  14. <HR ALIGN="CENTER">
	
  15. </P>
	
  16. Enter input for the C sample and click <BR>
	
  17. <form method="POST" action="http://mathcssun.emporia.edu/mailto/mailto.cgi">
	
  18. <br>
	
  19. <INPUT NAME="textentry" VALUE="Text Entry Field " SIZE = 20>
	
  20. <br>
	
  21. <INPUT TYPE="checkbox" NAME="checkbox" VALUE="Check box" CHECKED>
	
  22. <br>
	
  23. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 1" CHECKED>
	
  24. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 2">
	
  25. <INPUT TYPE="radio" NAME="radio" VALUE="Radio Button 3">
	
  26. <br>
	
  27. <INPUT TYPE="password" NAME="entry1" VALUE="Password" SIZE = 20>
	
  28. <br>
	
  29. <SELECT NAME="optionmenus">
	
  30. <option>Option Menus
	
  31. <option>Another Option
	
  32. </SELECT>
	
  33. <br>
	
  34. <SELECT NAME="scrolldown" SIZE = 3>
	
  35. <option>Scroll Down Menus
	
  36. </SELECT>
	
  37. <br>
	
  38. <TEXTAREA NAME="multiline" ROWS=3 COLS=30>Multi-Line Text Entry Field</TEXTAREA>
	
  39. <br>
	
  40. <INPUT TYPE="hidden" NAME="mail_to_address" VALUE="pheattch@mathcssun.emporia.edu">
	
  41. <br>
	
  42. <input type="SUBMIT" value="ENTER">
	
  43. <p>Values of environment variables will be displayed to the screen
	
  44. </form>
	
  45. <P>
	
  46. <HR ALIGN="CENTER">
	
  47. 
	
  48. <FORM METHOD="GET"
	
  49. ACTION="http://mathcssun.emporia.edu/mailto/mailto.cgi">
	
  50. <INPUT TYPE="text" NAME="q" SIZE=45>
	
  51. <INPUT TYPE="submit" VALUE="send it"><BR>
	
  52. <INPUT TYPE="hidden" NAME="mail_to_address" VALUE="pheattch@mathcssun.emporia.edu">
	
  53. <INPUT type=radio name=fs value =web checked>The Web<BR>
	
  54. <INPUT type=radio name=fs value = use>Usenet<BR>
	
  55. <INPUT type=radio name=fs value = ftp>Ftp<BR>
	
  56. <INPUT type=radio name=fs value = nws>Newswires<BR>
	
  57. <INPUT type=radio name=fs value = wth>BizNews<BR>
	
  58. <INPUT type=radio name=fs value = qte>stuff<BR>
	
  59. </FORM>
	
  60. <HR>
	
  61. </BODY>
	
  62. </HTML>






The cgi-bin program forwards an e-mail message of the following form:


Date: Fri, 7 May 1999 19:19:05 -0500
From: nobody (Nobody)

This information originated from server = http://mathcssun.emporia.edu
The request was made from remote host = 198.248.183.29
This message was generated by the script /mailto/mailto.cgi
The information contained in the message was generated
on Fri May  7 19:19:04 1999

textentry = Text Entry Field
checkbox = Check box
radio = Radio Button 1
entry1 = Password
optionmenus = Option Menus
multiline = Multi-Line Text Entry Field
End of transmitted data.  


And the cgi-bin program displays the following screen to the user forwarding the information.




Source


The HTML source for the above example is available here.