Form Tutor- Lesson 1

Just like "follow the bouncing ball", I want you to open up Notepad (Yes Notepad!) and follow me. Copy and paste off this page the following to get you started:

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Save it as form1.html in some folder somewhere (Win3.x users save it as form1.htm). Go ahead and give it its own folder. Start up your browser [plug Netscape].Use it to open form1.html and run Notepad and the browser side by side. This way you can create your pages and almost instantaneously see the results of your handiwork. If hitting the reload button is not quite resetting everything, hit the reload button while holding down the [Shift] key.

Type in your form tags.

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

<FORM>
</FORM>

</BODY>
</HTML>

Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do. 1) you can send the data to a cgi script for processing, or 2) you can have the data emailed to you. As for the first, whoever wrote the script can tell you how the data should be sent.
The second, or mailto form should have the following attributes in the <FORM> tag.

Note- Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try to submit the information, the new mail message window pops up. Explorer does however support forms sent to a CGI script.

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
</FORM>

</BODY>
</HTML>

This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.

Unfortunately the data will be sent to you in this 'only useful to a computer' format...

FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA

What you'll need is a program to turn it into 'useful to a human' format...

FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA

Mailto Formatter is an excellent little freeware utility that does this job quite nicely.

The example above illustrates that a form is nothing more than input names (NAME, ADDRESS, etc) paired with input values (R.U. Havinfun, 1313 Mockingbird Lane, etc).The only real variable is how we go about getting the values.

Some mail programs are capable of converting the data without resorting to a separate program. You may want to try this method first. Just remove the instruction ENCTYPE="application/x-www-form-urlencoded" and in its place use ENCTYPE="text/plain".

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Index
PROFESSIONAL WEB DESIGN