Forms
Forms are a bit more complicated and strict than what we've been doing up til 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>
Tells the browser that a form is there. If you don't shut off the form command, the form won't
appear.
- METHOD="post"
Tells the form how to submit the information in the form.
- 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 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 command.
- ROWS
This command specifies the height of the text area.
- COLS
This command specifies the width of the text area.
Here's what it looks like:
You can insert your own text into the box if you feel like it:
Have you got anything to tell me? <BR>
<TEXTAREA NAME="comments" ROWS="13" COLS="50">
No, not really..
</TEXTAREA>
Becomes:
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>red
<OPTION>orange
<OPTION>yellow
<OPTION>green
<OPTION>blue
<OPTION>purple
<OPTION>brown
<OPTION>black
<OPTION>white
<OPTION>gray
<OPTION>plaid
</SELECT> <BR>
What it means:
- <SELECT> </SELECT>
Indicates that this is a drop-down box.
- <OPTION>
One of the selectable items on the list.
Here's what it looks like:
As you can see, clicking on the arrow 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,
this is the answer:
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>
Becomes:
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"> 10
<INPUT TYPE="radio" NAME="toes" VALUE="11"> 11
<INPUT TYPE="radio" NAME="toes" VALUE="12"> 12
<INPUT TYPE="radio" NAME="toes" VALUE="13"> 13
<INPUT TYPE="radio" NAME="toes" VALUE="14"> 14
<INPUT TYPE="radio" NAME="toes" VALUE="15"> 15
<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.
Here's how it looks:
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>
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.
Back to the tutorial menu