Form Tutor v2.01 ================ This is the self-contained version of Form Tutor. DESCRIPTION: Form Tutor is an easy to use guide for adding fill out forms to your web pages. Presented in HTML format, it will take you step by step through all the major form tags. Unzip into a new folder and start with index.htm. Have fun & good luck! Joe Barta jbarta@apk.net Professional Web Design http://junior.apk.net/~jbarta/ *This tutorial is freeware. It is not copyrighted. You may use and/or distribute it to your hearts content. ------------------------------------------------------ Version history v2.01 Added link to Web Resources. Minor typo corrections. Minor additions. v2.0 Changed all html file extensions to htm. Numerous alterations, addtions, corrections. v1.0 Original release. ---------- Form Tutor by Joe Barta PROFESSIONAL WEB DESIGN Also available: Table Tutor, Frames Tutor and for the novice- So, you want to make a Web Page! Hello. My name is Joe and I'm going to show you how to add interactivity to your web documents by way of the
tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever. The basic construction of a html form is this... begin a form ask for information in one of several different ways... ...there can be as many input areas as you wish
end a form That's html forms in a nutshell. You are now ready to make some forms! Now's a good time to stress that if you want to learn how to make quality html documents, then you would be well served to take the time to teach yourself the tags. If you rely on the so-called "form wizards" in the "easy as pie html editors" out there, you will have greatly limited flexibilty, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are CMed, HTMLpad and HTML Notepad. These editors will make your html coding easier. They don't attempt to do it for you. Although this tutorial is not "optimised" for any particular browser, I wrote it using Netscape Navigator. If you are using MS Internet Explorer, some elements may not be supported or may be rendered a little differently. NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Index 1 2 3 4 5 PROFESSIONAL WEB DESIGN ---------- 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: Joe's the handsomest guy I know 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. Joe's the handsomest guy I know
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
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. Joe's the handsomest guy I know
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 Lesson Lesson Lesson Lesson Index 1 2 3 4 5 PROFESSIONAL WEB DESIGN ---------- Lesson 2 Now, just to keep things a little cleaner I am going to start writing only what is within the
tags. I will leave out the head, body, title and form tags from now on. Needless to say, leave them in your document. The most common TYPE of form is TEXT. Every input needs a NAME. When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane. We can if we want, type in a VALUE. <44 Cherry St> This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note- be sure to use quotes where I've specified. We can specify the size of the text input box. <44 Cherry St> <44 Cherry St> <44 Cherry St> As you can see, the default value is 20. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise. Go ahead and remove VALUE="44 Cherry St". <___> If we want, we can specify how many characters a user can input. Just go ahead and try to input more than 10 characters! <___> I suppose this feature might come in handy now and again, but unless you think someone's going to send the whole King James Bible down the pike at you, I wouldn't worry about it. Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it. Remember that each must have a NAME. SIZE, VALUE, and MAXLENGTH attributes work here also. By the way, a tells the browser to do something. An ATTRIBUTE goes inside the and tells the browser how to do it. Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of the options. First let's build some Radio Buttons. (_) Now add 2 more. (_) (_) (_) Hmmm... I suppose we should put a line break after each one.

(_) (_) (_) Note that each input has the same name. The reason will become apparent very shortly. Each of the Radio Buttons must be assigned a VALUE.

(_) (_) (_) Now label each button. Ed Holleran
Rick Weinberg
Tom Studd

(_) Ed Holleran (_) Rick Weinberg (_) Tom Studd You can also modify these labels with other html tags if you wish. Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional). Who is your best friend?
Ed Holleran
Rick Weinberg
Tom Studd

Who is your best friend? (_) Ed Holleran (_) Rick Weinberg (_) Tom Studd The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair BEST FRIEND=Ed (or whoever they pick). Building Check Boxes is pretty much the same thing. Start with this. [_] Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)


[_] [_] [_] [_] Each Check Box gets the same VALUE.


[_] [_] [_] [_] Note- For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused. That's why I lean heavily on html reference documents. (You thought I had all this in my head?? HA!) OK, let's label each box. Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

[_] Ed Holleran [_] Rick Weinberg [_] Tom Studd [_] Burgermeister Meisterburger And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults. Only if you want to, of course. Which of these guys are your friends?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

Which of these guys are your friends? [_] Ed Holleran [_] Rick Weinberg [_] Tom Studd [_] Burgermeister Meisterburger The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs... Ed=YES Tom=YES (or what ever they choose... if they choose nothing, nothing will be returned to you) Now a question might come to mind... What if I want to ask 3 different questions about the same group of guys?? How, Mr Smartypants am I going to do that! Well, just settle down and I'll show you. Which of these Which of these Which of these guys are your guys would you guys would you friends? lend money to? trust with your [_] Ed Holleran [_] Ed Holleran sister? [_] Rick Weinberg [_] Rick Weinberg [_] Ed Holleran [_] Tom Studd [_] Tom Studd [_] Rick Weinberg [_] Burgermeister [_] Burgermeister [_] Tom Studd [_] Burgermeister It's true that in each form there should never be duplicate NAMEs. So, maybe we could use a different name for each question. When I say never, I don't mean that your computer will blow up... at most it might confuse the browser, or the parser (Mailto Formatter is a parser), or the cgi script. At the least it will confuse the poor sap that has to make sense of the form data. What follows is the html for these 3 questions. The tags are in green. They are for appearance only, they don't affect how the form works. If you need to brush up on your
tags, then stumble on over to Table Tutor.
Which of these guys are your friends?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

 Which of these guys would you lend money to?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

 Which of these guys would you trust with your sister?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister
Let's suppose the user checked the following boxes... Which of these Which of these Which of these guys are your guys would you guys would you friends? lend money to? trust with your [_] Ed Holleran [_] Ed Holleran sister? [_] Rick Weinberg [_] Rick Weinberg [_] Ed Holleran [_] Tom Studd [_] Tom Studd [_] Rick Weinberg [_] Burgermeister [_] Burgermeister [_] Tom Studd [_] Burgermeister ...doing that would send you the following name/value pairs. Friend?..Ed=YES Friend?..Rick=YES Friend?..Tom=YES Lend money?...Tom=YES Lend money?...BM=YES Date sister?...Ed=YES Date sister?...Tom=YES Date sister?...BM=YES Isn't that cool! <--BACK NEXT--> Introduction Lesson Lesson Lesson Lesson Lesson Index 1 2 3 4 5 PROFESSIONAL WEB DESIGN ---------- Lesson 3 Before we go on, there is one more thing I want to mention. You can also use images in a form. As a matter of fact, you can use just about anything in a form or a form in anything. Just watch your html syntax and avoid overlapping tags. A Presidential Quiz (_) (_) (_) (_) (_) (_) Rep(_) Rep(_) Rep(_) Rep(_) Rep(_) Rep(_) Dem Dem Dem Dem Dem Dem (_) (_) (_) (_) (_) (_) Rep(_) Rep(_) Rep(_) Rep(_) Rep(_) Rep(_) Dem Dem Dem Dem Dem Dem The html for this form is here if you are interested. ...and the answers are here... if you need them. Overlapping tags, for those that are wondering are tags that... um... overlap. Let me illustrate.

Overlapping tags.... bad
Nested tags.... good The next type of input is a Pull Down List. With this type you use and it has a closing tag. Let's make one. Don't forget to give it a name. Next add a few options. (_)Ed (_)Rick (_)Tom (_)Guido And give each