Learning HTML 4.01 - Chapter 15: Forms

Web Hosting by Netfirms | Free Domain Names by Netfirms

Learning HTML: Forms

Forms are a bit more complicated 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 guest books and mailto forms. 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 of using mailto:.

<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. Put in your own e-mail address where it says your@email.

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

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 button:

<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 supports it's own scripts, take the code snippet they give you and put it into the FORM tag in the ACTION attribute. This is how you'd do one on Tripod:

<FORM METHOD="POST" action="/bin/script_library/form_handler_mail">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 <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!"> <INPUT TYPE="reset" VALUE="Dang! Let me start over!"><BR> </FORM>