| Jean LeLoup & Bob Ponterio SUNY Cortland © 2005, 2011 |
This is a very simple MAILTO form that sends the text typed into the Name field and the Answer textbox.
How do we do this?
<form method="post" action="mailto:myaddress@notreal.edu">
<p>Name: <input type="text" size="20" maxlength="40" name="name"> </p>
<p><textarea name="answer" cols="72" rows="5" id="answer"></textarea>
</p>
<p><input type="submit" value="Send"></p>
</form>
The key to sending from a Web page to an email address is using the post method and mailto action.
method="post" action="mailto:myaddress@cortland.edu"
in the <form> tag.
Formatting can be a problem in this simple email submit form. Spaces and accent marks, for instance, will be replaced by special codes. A more sophisticated approach might automatically convert these codes. Another problem with this email solution is that it expects to use the default email identity for the computer, something that is not going to work on a public computer in a lab.
There are many server-side CGI FORMMAIL scripts available (perhaps there is already one on your server) that will do the conversion for you. But we will not go into that here.
Another option might be to use ASP programming manage the data. This application uses ASP to collect user input in a database that can later be accessed by the teacher:
http://web.cortland.edu/flteach/lessons/
The ASP to database solution is complicated to set up and should only be tried if you really know what you are doing.
Or one could use JavaScript to reformat answers so that students can easily print them out or copy and paste them into an email to the teacher. A JavaScript example might go something like this....
function PreparePrint(form, Questions, NoOfQuestions) { if (NoOfQuestions < 1) // NoOfQuestions should normally be 0 for automatic calculation for (i=0; i < NoOfQuestions; i++) { msgWindow.document.write("</BODY>"); } // end of JavaScript Function PreparePrint |
This will print the contents of a form to a new page which the student can use to print the answers or copy and paste. A second JavaScript function will create an array that will contain the questions. This allows the first function to print out both the questions and the student responses.
| function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } // end of JavaScript Function InitArray |
To make this work, follow these steps VERY carefully.
1. First download the prepareprint.js file and the initarray.js file containing the JavaScript code for the two required functions, and place them in the folder with your web page. Next, add the script tags to the header of your web page HTML code so you page knows where to find the two JavaScript functions.
<script src="prepareprint.js">
</script>
<script src="initarray.js">
</script>
2. To set up the questions, we first need to create the array and fill it with the text of the questions. The following JavaScript goes in the body of your web page, preferably inside the form containing the questions. The form name will be printed at the top of the answer sheet, so you can use the form name as a title. For example, the form used below is named "Europe questions".
<form name="Europe questions">
Increase or decrease the number of questions as appropriate, and change them to match the questions in your activity. Be careful to end the last question with ");" rather than a comma.
<script>
<!-- Hide
// **********************************************************************************
// ** Put Questions into Array Questions using HTML character entities. **
// ** Be sure to use escape characters for any quotes : /' and /". **
// ** These will not appear in the editing page but will show up in the viewed page.**
// **********************************************************************************
var Questions= new initArray(
"1. Question number 1?",
"2. Question number 2?",
"3. Question number 3?",
"4. Question number 4?",
"5. Question number 5?",
"6. Question number 6?",
"7. Question number 7?",
"8. Question number 8?",
"9. Question number 9?");
// -->
</script>
3. Now set up the questions that the student sees inside of your activity's form. You'll need one form element, textbox or textarea, for each question. It doesn't matter what these are called because the JavaScript will not look for them by name.
4. In addition to the form elements for student input, you will add two additional form elements. A textbox for the student's name (called : "StudentName")
<input name="StudentName" type="text" size="60" maxlength="60">
and a button to submit the form and launch the prepareprint function.
<input name="PrintButton" type="button" onClick="PreparePrint(this.form, Questions, 0)" value="Print answers ">
You can copy the sample above and modify it to fit your needs. Be sure to copy the ENTIRE FORM! Also be sure to follow all directions very carefully.
Here is another example:
http://web.cortland.edu/flteach/civ/europe/europe.htm
Convert mailto data to a readable format: http://www.freedownloadscenter.com/find/convert-mailto-data-to-readable/readable.html
W3 Forms: http://www.w3.org/TR/REC-html40/interact/forms.html
So, You Want A Form, Huh? http://www.htmlgoodies.com/tutorials/forms/article.php/3479121