Xoom Forms Tutorial

Form Tutor- Introduction Form Tutor from Xoom

The following tutorial will show you how to add interactivity to your web documents by way of the <FORM> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.
zatrabeoj
The basic construction of a html form is this...

  <FORM>    begin a form
  <INPUT>   ask for information in one of several different ways...
  <INPUT>   ...there can be as many input areas as you wish
  </FORM>   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.

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>

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

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

Form Tutor- Lesson 2

Now, just to keep things a little cleaner I am going to start writing only what is within the <FORM> 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 <INPUT> is TEXT.

<INPUT TYPE=TEXT>

Every input needs a NAME.

<INPUT TYPE=TEXT NAME="ADDRESS">

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.

<INPUT TYPE=TEXT NAME="ADDRESS" 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.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>

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".

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>

If we want, we can specify how many characters a user can input.
Just go ahead and try to input more than 10 characters!

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

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.

<INPUT TYPE=PASSWORD>

Remember that each <INPUT> must have a NAME.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

SIZE, VALUE, and MAXLENGTH attributes work here also. By the way, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> 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.

<INPUT TYPE=RADIO NAME="BEST FRIEND">

Now add 2 more.

<INPUT TYPE=RADIO NAME="BEST FRIEND"> <INPUT TYPE=RADIO NAME="BEST FRIEND"> <INPUT TYPE=RADIO NAME="BEST FRIEND">

Hmmm... I suppose we should put a line break after each one.

<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND"><P>

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.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>

Now label each button.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

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?<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

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.

<INPUT TYPE=CHECKBOX NAME="Ed">

Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)

<INPUT TYPE=CHECKBOX NAME="ED"><BR> <INPUT TYPE=CHECKBOX NAME="Rick"><BR> <INPUT TYPE=CHECKBOX NAME="Tom"><BR> <INPUT TYPE=CHECKBOX NAME="BM"><P>

Each Check Box gets the same VALUE.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>

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.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

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?<BR> <INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

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.

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 <TABLE> 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 <TABLE> tags, then stumble on over to Table Tutor.

<CENTER> <TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM" VALUE="YES"> Burgermeister<P>
</TD>

</TR></TABLE>
</CENTER>

Let's suppose the user checked the following boxes...

...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!

Form Tutor- 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*
RepDem	RepDem	RepDem	RepDem	RepDem	RepDem
RepDem	RepDem	RepDem	RepDem	RepDem	RepDem

The html for this form

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.

<TABLE><FORM></TABLE></FORM> Overlapping tags.... bad
<TABLE><FORM></FORM></TABLE> Nested tags.... good

The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag. Let's make one.

<SELECT> </SELECT>

Don't forget to give it a name.

<SELECT NAME="BEST FRIEND"> </SELECT>

Next add a few options.

<SELECT NAME="BEST FRIEND"> <OPTION>Ed <OPTION>Rick <OPTION>Tom <OPTION>Guido </SELECT>

And give each <OPTION> a VALUE.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom">Tom <OPTION VALUE="Guido">Guido </SELECT>

The default option is the one that is listed first.

We can specify a default other than the first option in the list.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom" SELECTED>Tom <OPTION VALUE="Guido">Guido </SELECT>

A Scrolling List is very similar in construction to a Pull Down List . Let's add a few more names first though.

<SELECT NAME="BEST FRIEND"> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom">Tom <OPTION VALUE="Guido">Guido <OPTION VALUE="Horace">Horace <OPTION VALUE="Reggie">Reggie <OPTION VALUE="Myron">Myron </SELECT>

All we gotta do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.

<SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom">Tom <OPTION VALUE="Guido">Guido <OPTION VALUE="Horace">Horace <OPTION VALUE="Reggie">Reggie <OPTION VALUE="Myron">Myron </SELECT>

The SIZE is simply how many options show in the window. This stuff is CAKE!

Again, the default value is the first <OPTION>, and again we can change that by selecting one.

<SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Ed">Ed <OPTION VALUE="Rick">Rick <OPTION VALUE="Tom" SELECTED>Tom <OPTION VALUE="Guido">Guido <OPTION VALUE="Horace">Horace <OPTION VALUE="Reggie">Reggie <OPTION VALUE="Myron">Myron </SELECT>

I have no idea why you would use the selection feature for a Scrolling List but it's there and I just felt the need to tell you about it.

A very useful type of input is <TEXTAREA>.

<TEXTAREA NAME="COMMENTS"> </TEXTAREA>

You control the size of the box like so...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA>

ROWS is the height, COLS is the width.

Html code for this textarea here.

A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it.

Go ahead and type in the boxes...

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL> </TEXTAREA>

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA>

WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF> </TEXTAREA>

This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).

Form Tutor- Lesson 4

Yet another type of input is HIDDEN input.

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1">

A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. The hidden input above is needed for use with Mailto Formatter. It is how MTF recognizes the forms it's supposed to parse.

Let's suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information... name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what's coming from where. What to do?

You could add a HIDDEN input to your forms like so...

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...for the first version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...for the second version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...for the third version
And so on and so forth yada yada yada.

By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). I have just been using "FORMNAME" because it saved me some typing. This would be a perfectly legitimate HIDDEN input...

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...You would get back E=Mc^2

HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.

Last on the list are the SUBMIT and RESET buttons.

They really are very simple...

<INPUT TYPE=SUBMIT>

SUBMIT of course, sends the data...

...and RESET, clears the form.

<INPUT TYPE=RESET>

We can easily change what the buttons say.

<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR> <INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>

If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.

One more little tidbit and we're going to wrap this up. When you put a mailto form on your page and someone sends you information, you'll notice that it is sent with a default Subject. If you're visitor was using Netscape you'd get the default Subject "Form posted from Mozilla". Other browsers might send "Form Response", etc.

You can change this by editing what's in the <FORM> tag as follows...

<FORM METHOD=POST ACTION="mailto:michael@corleone.com?subject=Our friends in Las Vegas" ENCTYPE="application/x-www-form-urlencoded">

Pretty cool huh?

Form Tutor- Lesson 5
(last one!)

Well folks, that's it!

For this tutorial that is. You have learned all the major FORM tags. There is a little more here and there, but nearly all of what you'll need to do can be done with these tags.

Back to Making A Web Page