Forms are not only a great way to add interactive capabilities to your site, but also is a great tool for communication. Heres some basics!

 ACTION Attribute:

How a form will be handled is rendered by the ACTION tag and is usually set to a URL on the server that will handle the form data. The first thing that you want to find out before you start your form is this URL. Either the server will provide this information in a pamphlet or in a case like Geocities or AOL you can find these addresses by using there help programs or searching under CGI. Here's an example of a CGI based form address. Remember each server will have it's own URL.

<FORM ACTION="/cgi-bin/email/joe/"METHOD="POST">

This is a much easier style of posting using the mailto attribute though I recommend using the CGI method since most browsers will not support this type of form.

<FORM ACTION="mailto:joe@geocities.com"METHOD="POST" ENCTYPE="text/plain">

Notice the use of the ENCTYPE="text/plain" this is used so the return email does not get cluttered by the server. This attribute should only be used with mailto based forms. Remember, I recommend not using mailto forms.

GET Method:

The get method is another method of acquiring information. I will not discuss this method because it is not a good way to acquire information. It is not very secure,limited with text it can contain,does not work well with foreign languages. Under the HTML 4.0 guidelines this method has been greatly depreciated thus I will not waste your time with it.

POST Method:

This is the most widely used way of sending information and is what I suggest always using. The POST method transmits all form information immediately after the requested URL. The server continues to listen until it has gathered all of the information from the form. You can see how it is used below.

<FORM ACTION="mailto:joe@geocities.com"METHOD="POST">

Name Attribute:

In a form this a very important piece of information. In most cases the name attribute is what will be sent back in your email with the desired information following. I suggest separating words in the name attribute with underscores,the server will not get confused by these. Look at the sample below how the name tag is used.

<name="How_they_heard_about_us">

The email would come back to you with the appropriate form data filled out and looking like the example below. In some cases the name attribute will be used in conjuntion with the SELECT attribute.

How_the_heard_about_us= Link  

Text Controls:

Text controls are form fields that are generally one line long and would contain someones name,email address or other information.

<INPUT TYPE="text"> This tag controls the text entry. You will see use of this in the demonstration below in conjunction with the TYPE attribute. Note: you could also set the TYPE attribute to "PASSWORD". Doing so would replace the letters with asterisks.

Sample text example.

<FORM action="mailto:joe@geocities.com" METHOD="POST">

<INPUT type="text" name="email_address">

</FORM>

Here's another text example. This one uses the TEXTAREA tag. It enables you to specify how many rows or columns you want the reply space to be. This works well when you want someone to type in text in reply to a question you have posed.

<FORM action="mailto:joe@geocities.com" METHOD="POST">

<TEXTAREA name="messages" rows=4>

</TEXTAREA></FORM>

Pull-Down Menus:

Pull down menus let the user choose an item from a long list. All choices do not have to be seen at the same time which keeps the page clean. You will be using the SELECT,OPTION and OPTION SELECTED attributes here.

<SELECT NAME="enter name here"> This simply names the form.

<OPTION> Simply describes each option in the field.

<OPTION SELECTED> This describes which option will be showing (already selected)

Here's a sample pull-down menu

<FORM action="mailto:joe@geocities.com" METHOD="POST">

<SELECT name="How_they_heard_about_us">

<OPTION SELECTED>Link

<OPTION>Webring

<OPTION>Newsgroup

<OPTION>Other

</SELECT>

</FORM>

Check Boxes:

Check boxes are generally used if you have a large group of  items for someone to choose from. The benefit here is that you can check off more than one item. You will be using the INPUT attribute along with a new one called VALUE.

<VALUE> Simply names the checkbox or button.

Sample Checkbox form:

<FORM action="mailto:joe@geocities.com" METHOD="POST">

<INPUT TYPE="checkbox" name="Other_choices" VALUE="pepperoni">

<INPUT TYPE="checkbox" name="Other_choices" VALUE="pizza"

</FORM>

Submit and clear.

To place these forms into action you must add the submit button. The code is simple.

<INPUT TYPE="submit" VALUE="name the button NAME="Submit Button">

To clear all fields you would add this.

<INPUT TYPE="RESET" VALUE='name this button" name="Reset Button">

New Submit Style!

Now you can use any image for your submit button. There are two steps, first in the opening form tag you must name the form like so.

<FORM NAME="name here" ACTION="your form action here" METHOD="POST">

Provide your form information as usual.

This is what the new submit line should look like:

<INPUT TYPE=IMAGE  SRC="your image here" NAME="form name here" ALT="alternate text for image">

Note:The image name and form name must be the same.

Form Leapto
You may have seen this around, you click on the drop down form and it sends you to the page of your choice. Here's the code (all the links are for my page but can be changed).
<HTML>
<HEAD>
<TITLE>Form leapto example</TITLE>
</HEAD>
<BODY>
<P>
<FORM>
<SELECT NAME="list">
<OPTION SELECTED VALUE="http://your page here">Name link here (This will be the link selected).
<OPTION VALUE="http://your link here">Name link here.
<OPTION VALUE=http://your link here">Name link here.
</SELECT>
<P>
<P>
<INPUT TYPE=BUTTON VALUE="GO THERE!" onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
</BODY></HTML>

Here's the result: