Forms are a bit more complicated and strict than what we've been doing up till now. You've probably signed a guestbook at least once, right? That's a form. The most common you'll find on personal pages are guestbooks and mailto forms. Guestbooks you don't need to worry about, there are plenty of people willing to do that for you. Mailto forms send the information from the e-mail address of the person filling out the form to your e-mail address. Some website providers will let you submit a form through their server instead, and if you get a provider that does that, I'd recommend it. But we'll get back to that later.

The first part and last part of a form look like this:

<FORM METHOD="post" ACTION="mailto:your@email">...</FORM>

What it means:

• <FORM>... </FORM>
  This encloses the form's content tags.
  
• METHOD="post"
  Tells the form how to submit the information in the form. (If you wanted to keep the info in a file on your site it would be "file" instead of "post".)
  
• ACTION="mailto:your@email"
  Tells the server where to send the information in the form. Of course, you want to put in your own e-mail address where it says your@email, but I'm sure you're way ahead of me on that one.

There are several different ways to collect information with a form. Here's the simplest:

Text box

What's your name? <BR>
<INPUT TYPE="text" NAME="mynameis">

Here's what it means:

• INPUT
  This specifies a form input tag.
  
• TYPE="text"
  Specifies that this is a text box.
  
• NAME="mynameis"
  This helps you figure out what question is being answered. It's important to assign a different and specific name to each input command you use.

Here's what it looks like:

You can make a box for messages.

Text area

Have you got anything to tell me? <BR>
<TEXTAREA NAME="comments" ROWS="13" COLS="50">
</TEXTAREA>

Here's what it means:

• <TEXTAREA>...</TEXTAREA>
  These specify the beginning and end of this tag.
  
• ROWS="13"
  This command specifies the height of the text area, in this case 13 rows.
  
• COLS="50"
  This command specifies the width of the text area, 50 characters.

Here's what it looks like:

You can insert your own text into the box if you feel like it:

Do you want to offer a bunch of options? Then you probably want this:

Drop-down list

What's your favorite color?
<SELECT NAME="favcolor">
<OPTION SELECTED>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>blue
<OPTION>purple
<OPTION>brown
<OPTION>black
<OPTION>white
<OPTION>gray
<OPTION>plaid</OPTION>
</SELECT><BR>

Here's what it means:

• <SELECT>...</SELECT>
  Indicates that this is a drop-down box.
  
• <OPTION>
  One of the selectable items on the list. (close the last with </OPTION>.)
  
• SELECTED
  Indicates that option will be selected by default.

Here's what it looks like:

As you can see, clicking on the arrow will bring up the entire list, which can then be chosen from.

If it's just a yes-or-no question, or you want to allow visitors to select more than one option use:

Checkboxes

I enjoy (check all that apply):<BR>
<INPUT TYPE="checkbox" NAME="sports"> sports
<INPUT TYPE="checkbox" NAME="movies"> horror movies
<INPUT TYPE="checkbox" NAME="tv"> television, baby!
<INPUT TYPE="checkbox" NAME="books"> reading
<INPUT TYPE="checkbox" NAME="weird"> talking to myself<BR>

Here's what it looks like:

If you want about the same kind of look, but you don't want more than one answer, then try:

Radio buttons

How many toes do you have?<BR>
<INPUT TYPE="radio" NAME="toes" VALUE="less"> less than eight
<INPUT TYPE="radio" NAME="toes" VALUE="8"> 8
<INPUT TYPE="radio" NAME="toes" VALUE="9"> 9
<INPUT TYPE="radio" NAME="toes" VALUE="10" CHECKED> 10
<INPUT TYPE="radio" NAME="toes" VALUE="11"> 11
<INPUT TYPE="radio" NAME="toes" VALUE="12"> 12
<INPUT TYPE="radio" NAME="toes" VALUE="more"> more

Here's what it means:

• VALUE
  Because NAME applies to every button, you need a VALUE tag to show which was selected.  So the results of this in an e-mail form would look like this: toes_less.
  
• CHECKED
The default value.

Here's what it looks like:

Submit button:

<INPUT TYPE="submit">
This is the button that will send the contents of the form on their way.
It looks like this:

Reset buttom:
<INPUT TYPE="reset">
This button clears the entire form. It's not really necessary.
It looks like this:

You can change what these buttons say with the VALUE command:
<INPUT TYPE="submit" VALUE="Done!"> <INPUT TYPE="reset" VALUE="Oops!">
Becomes:

The problem is that mailto forms are no longer supported on most browsers. Here are some alternatives.

If the place hosting your site that it supports forms, take the address they give you and put it into the FORM tag in place of your e-mail address. This is how you'd do one on Geocities:

<FORM METHOD="POST" action="/cgi-bin/homestead/mail.pl?member_name">
(Where member_name is the name you use to sign on to Geocities.)
What's your name? <BR>
<INPUT TYPE="text" NAME="name"> <BR>
Your e-mail address? <BR>
<INPUT TYPE="text" NAME="email"> <BR>
Do you have a page? <BR>
<INPUT TYPE="checkbox" NAME="yes"> yes <BR>
<INPUT TYPE="checkbox" NAME="no"> no <BR>
If yes, what's it called? <BR>
<INPUT TYPE="text" NAME="page"> <BR>
If no, what are you planning for the one you're learning to build? <BR>
<INPUT TYPE="text" NAME="plan"> <BR>
Any questions? <BR>
<TEXTAREA NAME="comments" ROWS="9" COLS="45"></TEXTAREA> <BR>
</FORM>
<INPUT TYPE="submit" VALUE="Go for it!"> <BR>
<INPUT TYPE="reset" VALUE="Dang! Let me start over!"> <BR>
</FORM>

And here's how it looks:

This form will actually work.. you can send your answers right to me!

If your host doesn't support forms, here are some places that will let you use their servers for the same purpose:
Bravenet
Response-O-Matic
CGI For Me
But always check your host first.
 

Previous Lesson Tutorial Index Next Lesson

Jump to top of page