Vol. 1, No. 12
Making Forms

So you've had a lot of visitors at your site. That's great, but why should it be a one-way street? You're giving them pictures of your new kitten and other fun stuff, but are you getting anything in return? Do you know who's looking at your pages or where they live? Do you know anything at all about them? Well, it's time to find out all about your visitors and turn the tables — or at least the forms.

This quick tutorial will teach you how to make Web forms, allowing you to ask questions of your page's visitors and have their answers automatically sent to you.

If you need to brush up on a little HTML before we start in on forms, check out past "Handcrafted" newsletters in the Handcrafted archives.

HTML forms are made up of form elements. These elements come in a variety of types: Text-entry boxes, menus, checkboxes, and so-called "radio buttons." If you're wondering what radio buttons are, picture a car radio, circa 1975. They featured a row of protruding buttons for one-touch access to pre-set stations. Only one button could be pressed in at a time — when one was selected, the other buttons would pop back out. The same holds true for these radio buttons — you can select only one. Checkboxes, on the other hand, allow you to select as many as you want. The Submit button and the button that clears all of the selected entries are also form elements. Whipping up these form elements is a piece of cake.

Every form begins with a FORM tag. Specifically, your forms on Tripod should begin with this line: <FORM ACTION="/bin/mailto" METHOD="POST"> and end with a simple closing FORM tag, </FORM>.

Radio buttons are invoked in the INPUT tag. Here's an example. Let's find out if the people we're dealing with are male or female. Since, for our purposes, each person can be only one gender, and not both, we'll use radio buttons to force them to submit a single answer:

<FORM ACTION="/bin/mailto" METHOD="POST">

Sex: <INPUT TYPE="RADIO" NAME="sex" VALUE="male"> Male
<INPUT TYPE="RADIO" NAME="sex" VALUE="female"> Female

<P><INPUT TYPE="SUBMIT" NAME="send" VALUE="Send">
<INPUT TYPE="RESET" NAME="clear" VALUE="Clear">

</FORM>

The INPUT tags on the second and third lines create the radio buttons. Each INPUT tag has three attributes. TYPE calls up your desired form element. NAME identifies the variable; all of the possible answers to any single question are part of the same variable, so each one must have the same name. VALUE gives a meaning (often the answer to your query) to each particular button. The fourth line produces a Submit button that, when clicked, sends all of the variables within the form to your e-mail account (the one you specified when you registered with Tripod), and then takes your visitor to a confirmation page. The VALUE attribute determines what words appear on the button: "Submit" and "Send" are popular. The fifth line's syntax is similar, but it instead creates a Reset button; when clicked, this command clears all of the form entries on that page.

Once your visitors submit the form, they are taken to a default Tripod page. If you want them to go to a page of your own creation, you can include the following line of HTML anywhere between the <FORM> and </FORM> tags. (You must use "thankyou" as the variable in the NAME section of the code in order for it to work.)

<INPUT TYPE="HIDDEN" NAME="thankyou"
VALUE="http://members.tripod.com/your_membername/confirmation-page.html">

Now let's look at an example with several different types of form elements.

<FORM ACTION="/bin/mailto" METHOD="POST">

Sex: <INPUT TYPE="RADIO" NAME="sex" VALUE="male"> Male
<INPUT TYPE="RADIO" NAME="sex" VALUE="female"> Female

Age (in years): <INPUT TYPE="TEXT" NAME="age" SIZE="3" MAXLENGTH="3">

<P>Elements in body (check all that apply):
<BR><INPUT TYPE="CHECKBOX" NAME="elements" VALUE="C"> Carbon
<INPUT TYPE="CHECKBOX" NAME="elements" VALUE="H"> Hydrogen
<BR><INPUT TYPE="CHECKBOX" NAME="elements" VALUE="O"> Oxygen
<INPUT TYPE="CHECKBOX" NAME="elements" VALUE="Rf"> Rutherfordium


<P>Milk preference: <SELECT NAME="milk">
<OPTION VALUE="whole">Whole</OPTION>
<OPTION VALUE="skim">Skim</OPTION>
<OPTION VALUE="soy">Soy</OPTION>
</SELECT>

<P>Do you like my form? Can you tell it's my first<BR>
<TEXTAREA NAME="I_like_it" ROWS="4" COLS="50"></TEXTAREA>

<P><INPUT TYPE="SUBMIT" NAME="send" VALUE="Send">
<INPUT TYPE="RESET" NAME="clear" VALUE="Clear">


</FORM>

Whew! That covers all of what forms are about! Now, let's see what's what. You already know about radio buttons. The TEXT attribute gives you a one-line text box. SIZE determines how big (in characters) the box appears on the screen, and MAXLENGTH limits the number of characters a visitor can enter. If MAXLENGTH is greater than SIZE, or is unspecified, the text will scroll off to the left as the box fills up. For the "Age" box above, the MAXLENGTH is three. If you're expecting visitors with four-digit ages, feel free to change it.

Checkboxes are pretty straightforward once you've got radio buttons under your belt.

The SELECT tag creates a menu whose options are enumerated within the OPTION tags. It functions similarly to a set of radio buttons, but it takes up less space and some people think it looks snazzier. If you add the attribute MULTIPLE, like so,

<SELECT NAME="milk" MULTIPLE>

users can select multiple options from the menu, just like checkboxes, by holding down the Ctrl or apple key while clicking.

The TEXTAREA tag makes a ... text area, which is like a TEXT line, only taller. This element is appropriate for more lengthy text input. Like a table, the ROWS and COLS attributes specify its size. If you want to have words appear in the box before your visitors start typing, put your text between the <TEXTAREA> and </TEXTAREA> tags; it will show up in the text box. Your visitor can decide whether to submit or erase your words.

Again, the NAME attribute for all of these elements identifies the variables. The NAME attribute will help you clearly recognize the responses. A completed response to the above form could look like this:

sex: male
age: 969
elements: C,O
milk: skim
i_like_it: No comment.

That's it! You're now fully form-armed. Go forth and play with your newfound knowledge. Pay attention to the spacing of your elements — it's too easy to create a form that doesn't clearly define what each box represents. Here's hoping everyone answers truthfully!

HINTS, POINTERS, and TIPS o' the TRADE

If you so desire, you can make your Submit button an image. Just change the tag to something like this:

<INPUT TYPE="IMAGE" SRC="http://members.tripod.com/yourname/images/mybutton.gif" ALT="Send">

SRC defines the location of the image, and ALT provides alternate text for image-disabled browsers. (You always supply alt text for your images, right?)

Remember to choose variable names that mean something to you, so that you're not deluged with baffling results like Box1: no, Form4: 11.

If you include the attribute CHECKED in the INPUT tag of a radio button or checkbox, that element will appear preselected on the form.

For tea or coffee stains, try pouring boiling water onto the fabric from a height of one foot.

RESOURCES:

The Basics

Good Forms

Forms as Design Elements

Handcrafted Archive