Mailing Form Data

line.gif

It should be remembered that any HTML formatting commands can be used in a form - along with the form input fields. Many commercial forms contain name and address fields in them. Some mail data to a mailbox for later processing. An example of a form that does this is shown below.

<html>
<head>
<title>Test Form For Name and Address</title>
</head>

<body>
<div align=center>
<hr>
<h1 align=center>Form With Name and Address</h1>
<hr>
<br>
<form method=post action="mailto:yourmailbox@yourserver.com">
<input type="hidden" name="Test Mail Form">
<table border=1 cellpadding=5 cellspacing=5>
<tr><td>Full Name      <td><input name = "Name" size = 60>
<tr><td>Company        <td><input name = "Company" size = 60>
<tr><td>Address        <td><input name = "Address" size=60>
<tr><td>Country        <td><input name = "Country" size = 60>
<tr><td>Email Address  <td><input name = "Email" size = 60>
<tr><td>Phone Number   <td><input name = "Phone" size = 60>
<tr><td>Fax  Number    <td><input name = "Fax" size = 60>
</table>
<br><br>
<br>
<p><input type=submit value=Submit>
</form>
<br><hr>
</div>

</body>
</html>

Prior to submitting the above form, you will need to update the mailto address to point to your mail box on the internet. If you fail to do this, the data won't go anywhere.

As before, immediately after the body begins, a division is defined using the tag <div>; thus, the entire form is contained within this division and form's content is centered.

The form contains nine input fields, eight of which are visible and one of which is hidden. The first input field:

<input type="hidden" name="Test Mail Form">

is used to identify the form that mailed the data when the data arrives at the specified mailbox. This is a commonly used device - especially when multiple forms may be directing mail to a single mail box.

The next seven input fields are placed in a table for alignment purposes. The table has two columns, the first of which provides a description of the input field and the second of which contains the field itself. The final field is an input field used to submit the form for mailing, hence its type is submit. Take this link to test a form like the one above. Note that the form provided differs from the form above in that the mailto has been replaced with the NCSA test address.

Exercise 24

Update and test the form shown above. It may be found in the htmlsamp directory under the name forTst.htm. You will need to put a valid email address in the form's action field, fill in the required data and submit the form.

Solution

Once the form data has been submitted, you will need to receive the email from your server and open it as email. The result should look something like that shown below (except all the data will be on a single line - it has been broken into three lines for convenience).

From:          Fred Nurk 
Organization:  Nurk Enterprises
To:            yourmailbox@yourserver.com
Subject:       Form posted from Mozilla

Test+Mail+Form=++&Name=Fred+Nurk&Company=Nurk+Enterprises
&Address=1+Frederick+Street%2C+Nurkville%2C+2000&Country=Nurkvania
&Email=fred@nurk.com&Phone=1234+567+890&Fax=1234+567+891

Take this link to see the result of above form and data being submitted to the NCSA test system.

As may be easily observed, the form data has been URL encrypted. Spaces have been replaced with plusses and the name/value pairs have been separated by ampersands. Also, commas have been replaced with %2C. If these substitutions are kept in mind, the end result is easily deciphered.

The next section next.gif presents further form controls.