Creating User Fill-In Forms
[HOME][PAGE UP][PREV PAGE][NEXT PAGE] Now it's time for a little interaction with the outside world! Get your viewers involved in your site and ask for some feedback, have them sign a guest book or even get them to order stuff from you. The possibilities are endless.

Just how endless depends a little on the services you can access from your web hosting system. If you have access to a cgi-bin directory and are allowed to set up scripts and build databases then you can really have a blast. Otherwise, you'll have to settle for forms that end up e-mailing data to you which you have to process manually. Either way, the forms are still the same.

Defining a Form

It's simply a matter of enclosing some field definitions - input, select and textarea - between the <form></form> tags. Ah, if it were only that simple. Let's start out by looking at the code for my guest book form (I'll leave out all the extraneous stuff and just show you the actual FORM definition):

       <form method="POST" enctype="text/plain" action="mailto:mrusk@radix.net">
        Your name please:<br>
        <input type=text name=name size=50 maxlength=50><br>
        How did you find me?:<br>
        <select name=howfound>
          <option selected value="Best Friend">Best Friend </option>
          <option value="Close Friend">Close Friend </option>
          <option value="Friend">Friend </option>
          <option value="Larry King">Larry King </option>
          <option value="Grease Man">Grease Man </option>
          <option value="Told Not to Come">I was told not to visit </option>
        </select><br>
        Comments?:<br>
        <textarea name=comment wrap=virtual rows=5 cols=55>I love this site because...</textarea>
        <br>
        <input type=submit value=Submit>
        <input type=reset value=Clear>
        </form>

There are a number of things to point out. The first, I've left this form defined as a "mailto" action, even though Microsoft Internet Explorer doesn't deal with it very well. In actual practice, my ISP has provided a basic script that allows me to duplicate this action without invoking "mailto". I've converted the form to use that script by changing the action attribute to point to the URL they gave me.

The second, if you look closely at the code, you'll notice that I put in a bit of text as a label for a field, followed by a <br> then the actual field. Being a little anal retentive, I tend to like things lined up on a margin. This makes the left side of my form be straight. I can't stand to see forms that have fields all over the place. Simply drives me nuts!

Lastly, you'll notice the enctype attribute set to "text/plain". When I first built the form I was copying someone else's example (view source is one of the best teachers). I was getting my data back in one long line with all kinds of % stuff in between the fields. I had even gone to the trouble of downloading a program that would take the string and format it for me. Then I stumbled across the "text/plain" definition when I was looking at headers on e-mail messages and gave it a shot. Sure enough, it worked great! One field per line with the name in front of it. Couldn't ask for more!

Text, Text Areas, Check Boxes, Radio Buttons and Drop Down Menus

You have your choice of three basic field types: input for single line or button entry; select for getting one or more values from a list of choices; and textarea for gathering a block of text.

For your amusement, I've included some examples for you to play with so you can see what the different values do to the viewer.

 

TEXT FIELD EXAMPLES

Field with type="text" size="20" maxlength="20" (field won't scroll when you enter more than 20 characters)


Field with type="text" size="20" (field scrolls when you enter more than 20 characters)


Field with type="text" size="20" and value="Your name"


Field with type="text" size="50" (field scrolls and accepts more than 50 characters)


TEXTAREA EXAMPLES

Text area with rows="3" and columns="30" (when displayed it actually shows 4 lines and the characters wrap at word boundaries)

CHECK BOX EXAMPLES

This group of check boxes all have the same name but different values so the user can select more than one. This would be good for saying things like

"Which of the following cereals do you eat?"
Rice Krispies Cocoa Puffs Fruit Loops

I could have pre-selected one like so:

Rice Krispies Cocoa Puffs Fruit Loops

The first one was done with the following HTML code:

<input type="checkbox" name="C1" value="ON1">Rice Krispies
<input type="checkbox" name="C1" value="ON2">Cocoa Puffs
<input type="checkbox" name="C1" value="ON3">Fruit Loops

The second one was done using the following code:

<input type="checkbox" name="C1" value="ON1">Rice Krispies
<input type="checkbox" name="C1" value="ON2" checked>Cocoa Puffs
<input type="checkbox" name="C1" value="ON3">Fruit Loops

It's important to note that the text following the <input...> stuff is irrelevant to the web. It isn't passed back to you and has no bearing on the checkbox. It's there to provide a label for the viewer. Whatever information you need to get back has to be specified in the name and value attributes of the tag.

RADIO BUTTON EXAMPLES

This type of button lets the viewer select only one of the choices you present:

Male Female Undecided

This was done with the following code:

<input type="radio" value="V1" checked name="R1">Male
<input type="radio" value="V2" name="R1">Female
<input type="radio" value="V3" name="R1">Undecided

If I was doing this for real then I might have changed the code to look like:

<input type="radio" value="Male" checked name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Undecided" name="Gender">Undecided

then my return value from the form would look like:

Gender = Female

instead of:

R1 = V2

Better, huh?

DROP DOWN MENUS

This type of field lets the viewer select one item from list of choices that display when they click on the arrow at the side of the box:

How did you find this page?

This is the result of the following HTML code:

<select name="D1" size="1">
    <option selected value="Yahoo">Yahoo</option>
    <option value="Alta Vista">Alta Vista</option>
    <option value="Line Around The World">Line Around The World</option>
    <option value="Accidentally">Accidentally</option>
    <option value="Sleep">Needed Sleep</option>
</select>

The stuff between <option...> and </option> is what's displayed on the list. The text you put in the value attribute is what is passed back to you as the selection item. They don't have to be the same.

You could allow multiple selections from a pull-down list like so:

What magazines do you read while waiting at the grocery check out?

This list results from the following code:

<select name="D2" size="1" multiple>
    <option value="Cosmopolitan">Cosmopolitan</option>
    <option value="People">People</option>
    <option value="National Enquirer">National Enquirer</option>
    <option value="Horoscopes">Horoscopes</option>
    <option value="Redbook">Redbook</option>
    <option value="Star">Star</option>
    <option value="Good Housekeeping">Good Housekeeping</option>
</select>

 

I hope you've experimented around with the different field types. All the details are included with my descriptions of input, select and textarea. You can check them out in detail when you're ready to build your own forms.

Now let's scoot along and see how to do an image map!
[HOME][PAGE UP][PREV PAGE][NEXT PAGE]

The Rusk Family . . . "the Legend Continues"

Michael T. Rusk
Comments to author: mrusk@radix.net

All contents copyright © 1996-1997, Michael T. Rusk
All rights reserved.

Revised: December 03, 1997 10:38 -0500
URL: ./htmlgd/doforms.html