Form Tutor- Lesson 1

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 on a floppy disk (Win3.x users save it as form1.htm). 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>

</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 now.

You can send the data to a cgi script for processing,
You can have the data emailed to you.

TCF389 Students:

We will indeed be using the first method and so an explanation of CGI (Common Gateway Interface) scripting is necessary before we get into forms.

A CGI script is a (usually) small piece of software that sits on a Web server computer--patiently waiting to be contacted.
Once contacted, it performs some action.
E.g., the hit counters you see on the Web are done via CGI scripts. One on the TCF389 homepage looks a bit like this:
How does this work?
The HTML behind this counter is:
<IMG src="http://www.tcf.ua.edu/cgi-bin/counter.exe?width=6&link=203index&style=a">
- Long, isn't it? Let's break it down.
- When you access that page, it
  1. Contacts the Web server at www.tcf.ua.edu
  2. Looks in a directory called /cgi-bin/ (short for CGI scripts and binary, executable files) for
  3. A CGI script named counter.exe, which it then runs.
  4. counter.exe checks to see how many hits this particular page has had and then assembles GIFs of numbers into the counter image itself.
  5. Each of the items after the question mark and separated by ampersands (&) is an attribute of the counter:
    - width=6 means the counter will be six digits wide
    - link=389sample identifies which page is being counted
    - style=a selects the style of the numbers
- Want a counter on your page?
  - Then just add the above line to your page, but be sure to change the link= section!
  - If you don't, then your number won't be correct as it won't be counting the hits on your particular page.
  - Students in this class must start their link= with "389" and then use their last names:
    - For example: link=389Sorenson
Another way a CGI script can be activated is by someone typing information into an HTML form and then submitting that form.
- This is what you did when you filled in the survey at the start of the semester and then submitted to me.
When a form is submitted...
1. The data typed into it (and not the entire form) travels across the Internet to a Web server computer.
2. The CGI script receives the data and processes it in some manner. E.g.:
  - Feeding it into a database
  - Using it in some manner of game (like, You Don't Know Jack)
  - E-mailing the data to someone (as we did with the survey)
3. Often the script then sends something back to the user's browser, but this is not necessary.
Forms and CGI scripts are the principal way that activity is solicited from Web users.
The CGI script we'll use in this class is called Wsendmail (for Windows NT).
- It takes data entered into a form and parses it.
  - Parsing is a computer term for the processing of some sort of information. To parse some information is to sort it and rearrange it and somehow present it in a different form.
  - In the case of the Wsendmail script, it takes form data that has been collected in a manner that is convenient for a computer and rearranges it so that it makes sense to us humans.
- In order to use Wsendmail, you must start your form with more than just <FORM>. Instead, you use (normally on a single line):
  - <FORM METHOD="POST" ACTION="http://www2.tcf.ua.edu/cgi-bin/wsendmail.exe">
  - 'Course, it must be typed precisely correct.
  - This line will allow you to activate a CGI script on a computer at the University of Alabama.
- There are other components to Wsendmail, but this is enough for now. We'll refer back to this as the tutorial continues.
You may now skip ahead to Lesson 2.
Or you may continue reading here to learn about the mailto form--which is sort of like a primitive version of Wsendmail

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>

</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