===========================================================================
Today on The World           Vol. 4 #163           Wednesday, June 24, 1998
===========================================================================

Continuing the HTML lessons...

Remember that you can find the other chapters on

http://world.std.com/help/web/tutorial

for now.

(kibo)

---------------------------------------------------------------------------


HTML TUTORIAL -- CHAPTER 12 -- FORMS



12.1  Forms & CGIs


For a Web page to get some input from its readers and then act upon this
input requires two things:  a <FORM>...</FORM> section of HTML, and
a CGI (Common Gateway Interface) program running on the Web server.
CGIs are programs that get data from the reader's Web browser (usually
when they submit a form) and do something with this data, sometimes
generating a "custom" page based on the input data, other times simply
logging the data or mailing it.  You can do arbitrary things with CGIs
(providing you can write your own CGI programs) but for purposes of this
chapter I'm only going to talk about one on The World which turns an
HTML form into an E-mail message.  (This lesson will not necessarily
apply to building Web pages hosted on other Internet Service Providers
because they may provide a different CGI for turning forms into E-mail.)

Let's get started with your first form.  Add this to the body of one
of your practice Web pages:


    <FORM>
        <P>
            What is your favorite flavor of Pez?
            <INPUT NAME="FLAVOR" TYPE="TEXT">
        </P>
        <P>
            What is your favorite color of Pez?
            <INPUT NAME="COLOR" TYPE="TEXT">
        </P>
    </FORM>


View that in your browser and see what happens.  We've made a non-working
form (there's no way to submit the data, and it hasn't been told where to
send it anyway) but you should have two blanks that you can use to type text.

Notice the structure of our minimalist form: <FORM>...</FORM> contains
the entire form, including some "regular" text that gives the reader
instructions.  The data is entered into fields created by <INPUT> tags
(one or more of them).  There is no </INPUT>, meaning <INPUT> is one of
those few HTML tags that doesn't need a closing tag (<IMG>, <HR>, <BR>, etc.)

To make this form actually work we need to add two things.  First,
we need to add a "Submit" button.  (We can also add a "Reset" button
that lets users clear the form, but these are usually unnecessary --
"Submit" is required, "Reset" aka "Clear" is optional.)
Add this at the end of the form, right before </FORM>:


        <INPUT TYPE="SUBMIT">
        <INPUT TYPE="RESET">


Now when you view the page you should have two buttons at the bottom,
labelled with "Submit" and "Reset".  (They won't do anything yet.)
Let's change their text by embellishing those two tags:


        <INPUT TYPE="SUBMIT" VALUE="Submit this form">
        <INPUT TYPE="RESET" VALUE="Clear this form">


Bravo!  Big buttons!  You've probably noticed that these buttons
are <INPUT> tags, just like the text fields.  So TYPE="TEXT" makes
a text-entry slot, and TYPE="SUBMIT" and TYPE="RESET" make buttons.
You'll see some other types of <INPUT> later.  For now, let's
finish making this form functional.  <FORM> requires parameters
that tell the Web browser how to deliver the data, and to where.
Change <FORM> to:


    <FORM METHOD="POST" ACTION="http://world.std.com/cgi-bin/mailto.pl">


What's that?  Well, METHOD="POST" is one of the two ways of getting
data to a CGI program.  (The other, METHOD="GET", is usually used
by search engines such as Altavista because it packs all the submitted
data onto the URL so that people can bookmark it.  METHOD="POST" sends
the data without displaying a funny URL.)  ACTION="..." specifies the
URL of a CGI program that will be given this data, in this case a
Perl script (.pl file) which will read the data from the form and
E-mail it to you.  But it still won't work yet -- mailto.pl needs to
be told where to mail the data!  Add this right after the <FORM> line,
and be sure to put your own E-mail address in place of the sample one:


    <INPUT NAME="to"      TYPE="HIDDEN" VALUE="yourname@world.std.com">
    <INPUT NAME="from"    TYPE="HIDDEN" VALUE="yourname@world.std.com">
    <INPUT NAME="sub"     TYPE="HIDDEN" VALUE="Testing a Web form.">
    <INPUT NAME="body"    TYPE="HIDDEN" VALUE="Here are my Pez favorites.">
    <INPUT NAME="nexturl" TYPE="HIDDEN" VALUE="http://world.std.com">


All those fields are required for mailto.pl to work (if any of them
is missing, it can't make a valid E-mail message, and you'll see some
error such as "The request cannot be fulfilled.")  Note also that
mailto.pl is case-sensitive about the names "to", "body", etc.
TYPE="HIDDEN" means these input fields are not visible by the reader,
and we fill them in ourselves with VALUE="...".  In general, every
<INPUT> field can have a NAME="..." option to specify the name of the
field and VALUE="..." for the pre-set value of the field.

The "nexturl" field is a mailto.pl feature where you specify what
page should be displayed after the form has been submitted.  This is
to make sure that people know that the form has been sent successfully
so that they don't keep clicking the "Submit" button.  For this
example I've set it to go to The World's home page -- you could plug
in anything else you like.

Try filling out the form we've created, then click the "Submit" button,
and check your E-mail.  (It may take a minute or two for the mail to get
to you, but usually it happens within seconds.)  You should receive a
message similar to this:


	From:    yourname@world.std.com
	To:      yourname@world.std.com
	Date:    Wed, 24 Jun 1998 17:33:54 -0400
	Subject: Testing a Web form.
	X-Mail-Gateway: Doug's WWW Mail Gateway 2.2
	X-Real-Host-From: ppp-666.std.com

	Here are my Pez favorites.

	FLAVOR -> raspberry
	COLOR -> orange


The message lists all the pairs of names and values from your <INPUT>
fields (with the hidden "from", "to", etc. being used to make the
headers of the message, and the "body" field creates additional
text above the list of values.)  What you do with these messages when
you get them is up to you.  You could read them and act on them
yourself, or you could forward them to a program you wrote to
automatically process them.  (I like to do surveys by saving a hundred
of these to the same file, then sorting the lines alphabetically,
then counting the number of repeated lines.)

But what if we want to have the form actually say what the E-mail address
of the sender is, instead of the "from" value we typed in?  Sadly, that's
not something we can do automatically -- mainly because the Web server
usually can't figure out people's addresses on its own (which is good
in that it keeps people from "harvesting" your address when you visit
their Web page, i.e. if they could get your address automatically they
would send you junk mail.)  We can at least allow people to type in
an address if they want you to know who they are.  Please take out
the <INPUT NAME="from"> line and add this paragraph:


        <P>
            What is your favorite flavor of Pez?
            <INPUT NAME="from" TYPE="TEXT" VALUE="nobody@nowhere.com">
        </P>


This <INPUT> tag has a name for the field ("from"), it's a text field,
and it has a pre-defined value (but it can be changed because it's
TYPE="TEXT" and not TYPE="HIDDEN".)  We specified the default value here
because some people are too lazy to fill out forms completely, and
mailto.pl will fail if they were to submit a form with a blank "from" field.

Now we have a complete form, albeit one which only uses plain text inputs.



12.2  Fancy Form Fields


For added fun, let's change the formatting of the form a little.
We can make the blanks (for people to type into) wider or narrower.
Change the two Pez <INPUT> tags to read:


            <INPUT NAME="FLAVOR" TYPE="TEXT" SIZE="5">

and

            <INPUT NAME="COLOR" TYPE="TEXT" SIZE="40">


What happens when you use the form now?  You should see two blanks of
different lengths.  What happens if you type more than five letters
into the short one?

SIZE, for <INPUT TYPE="TEXT">,  specifies how wide the field looks
on the screen, now how many characters it can hold.  To limit people
to five-color flavors, we would use:

  
            <INPUT NAME="FLAVOR" TYPE="TEXT" SIZE="5" MAXLENGTH="5">


Now it's physically impossible to enter long words for the flavor.
What if we wanted people to be able to enter lots of text, such as
a whole paragraph or page?  Add the following paragraph before the
"Submit" button:


        <P>
            Please type your suggestions for new flavors.<BR>
            <TEXTAREA NAME="SUGGESTIONS" COLS="50" ROWS="8"></TEXTAREA>
        </P>


Check that out with your browser.  There should now be a big rectangle
50 characters wide, 8 lines tall.  Note that it scrolls when you
type more than 8 lines into it (at least in normal browsers);  there's
no way to limit how much data can be entered in a <TEXTAREA>, so people
could paste in a whole page of Hamlet here if they felt like it.
(By the way, you can put default text into the <TEXTAREA> by just putting
it between <TEXTAREA> and </TEXTAREA>.)  Note that <TEXTAREA> is one of
the few varieties of input field which is not made with <INPUT>.

Now we'll add another kind of item to our form:  checkboxes.  Paste this in:


        <P>
            Check here if you want free Pez.
            <INPUT NAME="GIMME" TYPE="CHECKBOX">
        </P>
        <P>
            Check here if we can bill your credit card for $9.95.
            <INPUT NAME="BILL-ME" TYPE="CHECKBOX" CHECKED>
        </P>


View the form in your browser and note the different between the two
checkboxes.  One is already checked, and one isn't.  You should be able
to find the <INPUT> option that makes a pre-checked box in this example.

Checkboxes will show up with values "on" or "off" when you have the
results E-mailed to you.

A more infrequently used type of <INPUT> is TYPE="PASSWORD", which is
a variant of TYPE="TEXT" which displays dots instead of letters when
you type into it (although some browsers don't hide the password).  Try:


        <P>
            What is your secret Pez Club password?
            <INPUT NAME="SECRETWORD" TYPE="PASSWORD">
        </P>


If your browser doesn't display that correctly, don't worry, you
probably will never need it.  (To actually password-protect your Web
site, usually you would use a different method which wouldn't require
developing a CGI to read your form.)



12.3  Multiple Choice Form Fields


Suppose you wanted people to choose from a list of predefined options.
There are two ways to do this, and they correspond to items in the
Windows or Mac OS user interface:  "radio buttons" (a set of buttons
like a car radio, where when you push one in, the others pop out)
and pop-up menus.


        <P>
            Which do you prefer, Pez or Mentos?
            <INPUT NAME="PREFER" TYPE="RADIO" VALUE="Pez" CHECKED>Pez
            <INPUT NAME="PREFER" TYPE="RADIO" VALUE="Mentos">Mentos
            <INPUT NAME="PREFER" TYPE="RADIO" VALUE="Clueless">Not Sure
        </P>


Try clicking on those three little buttons.  Note that they all have the
same NAME -- this way when one is clicked the others of the same name
are cleared.  Some Web browsers default to selecting the first button
when the form is first displayed, but others default to selecting none
of the buttons, so I suggest always including a CHECKED option on one
(and only one) of your radio buttons to ensure consistent behavior
among different browsers.

For radio buttons, the button is a featureless little spot;  the text
displayed next to them is just that, text.  In other words, the buttons
don't display any labels unless you type some text after then as in
that example.

It would save space to do the same thing as a pop-up menu.  They use
something other that <INPUT>:


        <P>
            Which do you hate the most, Pez or Mentos?
            <SELECT NAME="HATE">
            <OPTION SELECTED>Pez
            <OPTION>Mentos
            <OPTION>Both
            </SELECT>
        </P>


Try that and see what it does.  Again, I suggest always having one
item in the list with the SELECTED parameter.  Because people often
click the "Submit" button before filling out (or reading) the entire
form, I like to pre-select a dummy option:


        <P>
            Which do you hate the most, Pez or Mentos?
            <SELECT NAME="HATE">
            <OPTION SELECTED>(choose one)
            <OPTION>Pez
            <OPTION>Mentos
            <OPTION>Both
            </SELECT>
        </P>


To make a pop-up menu, <SELECT>...</SELECT> contains a list of <OPTION>s.
You could also change it into a scrolling list with SIZE:


        <P>
            You've won a free bottle of Orbitz!  Pick a flavor:
            <SELECT NAME="ORBITZ" SIZE="3">
            <OPTION SELECTED>(choose one)
            <OPTION>Cherry-Beef
            <OPTION>Banana-Squid
            <OPTION>Cherry-Squid
            <OPTION>Cheez-Whiz
            <OPTION>Pineapple-Pinecone
            <OPTION>Sauerkraut Ripple
            <OPTION>Mystery Flavor
            <OPTION>Cardboard
            </SELECT>
        </P>


Here the SIZE attribute specifies how many rows of the scrolling list
are visible at one time.

One last trick:  A "Submit" button made from a clickable image.


    <INPUT TYPE="image" SRC="http://world.std.com/i/button_sq_blue_search.gif"
        NAME="SUBMIT" VALUE="SUBMIT" HEIGHT="36" WIDTH="36" BORDER="1">


I got the image from The World's icon library.  Note that
<INPUT TYPE="IMAGE"> submits the X and Y position that was clicked
on within the image, for purposes of image maps.  These are different
from the more useful "client-side" image maps we'll learn about in
a future installment.

There are a couple of other types of form elements -- for instance,
selecting multiple items from the scrolling list with <SELECT MULTIPLE>
and attaching files (such as pictures) with <INPUT TYPE="FILE">, but
those aren't supported by mailto.pl.  If you're a customer of
The World Kiosk and are installing your own CGIs, be sure they support
any exotic input types you're using.

Want to learn more about forms and mailto.pl?  Help and examples are
available from these URLs:


The World's notes on using mailto.pl:

http://world.std.com/~wexample/mail.sample.html

http://world.std.com/~wexample/mailto.html


Official mailto.pl documentation:

http://www-bprc.mps.ohio-state.edu/mailto/mailto_info.html


Other tutorials on HTML forms in general:

http://robot0.ge.uiuc.edu/~carlosp/cs317/cft.html

http://www.webcom.com/~webcom/html/tutor/forms/

http://iip.ucsd.edu/courses/s96/interactive/forms/index.html
(that one will disappear sometime in July 1998)

http://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtml
(that one's rather technical)


Form Test (find out what your browser supports):

http://www.research.digital.com/nsl/formtest/


The World's icon library:

http://world.std.com/help/web/icons/index.shtml


(kibo)

==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
   We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
   call 617-739-0202.  
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
   announcements' to majordomo@world.std.com.
   Subscriptions to this mailing list are open to World customers only.
[] Yes, I've tried all five flavors of Orbitz (even the gross coconut one.)
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
   Its contents may freely be redistributed as long as credit is given.