Forms

Forms are a great way of geting input from your users. If you want to take a survey, want to know how your viewers found your web site or just about anything else, forms are the way to do it.

There are two parts of implementing forms. The first is the HTML interface. The HTML implementation of forms is really easy. That is what we are going to go over in this section. The second part is getting the user's response sent from their computer to you. Getting the form responses mailed to you in a readable fahion, must be implemented in either Javascript or CGI, so we will deal with this part later. But if you have a web page that is hosted by another company like AOL or geocities, they may have a program that you can use that will organize your results for you. If not, at least you will know how to implement the HTML part of forms, so when you do eventually learn the CGI aspect you will be ready to write some forms.

The opening tag looks like the following:

<FORM METHOD="POST" ACTION="the url of your program">

You almost always want to use POST as the METHOD, expecially if you are asking for a password or other private information.

The ACTION attribute should be set to the URL of the program that takes care of your results. You should leave this out for now. If you have an account on a server and they have a program you can use they should be able to give you the URL.

The closing tag is </FORM>.

The following is everything else that goes in between:

The most common tag is the <INPUT> tag. It creates a form element. Depending upon the values of its attribute, the <INPUT> tag can create a number of elements. One of the most popular is the:

<INPUT TYPE="text" NAME="somename">

The TYPE is set to text and tells the browser to display an area in which the user can type some text like the following:

The name element can be set to whatever you want and is sent as a variable name to the program that sorts your results. You should always use it.
You can also add the SIZE="" attribute to change the size of the INPUT field:

<INPUT TYPE="text" NAME="example" SIZE="20">

The value of size is in characters, so the above INPUT field can hold 20 characters. The following are some examples of various sizes:
You can add the VALUE="" attribute to have your text field contain some text before the user inputs any text like the above examples of size.
There are a number of different values for the TYPE attribute of INPUT that changes how the INPUT field is displayed. The following are some of the many different options:
One of the most important values is the submit value. It creates the button that the user clicks to send the data to your program.

<INPUT TYPE="button" NAME="submit" VALUE="submit">

It appears in the web browser like the following:

The VALUE attribute is what is displayed on the button in the browser.
Many forms also include the reset button also:

<INPUT TYPE="button" NAME="reset" VALUE="reset">

It appears in the browser as the following:
There is also a TYPE, similar to text that allows users to type in text but instead of displaying the text that they type astericks are displayed instead. This type is the password type:

<INPUT TYPE="password" NAME="example">

The TYPE hidden does the same thing.

This would appear in the browser as the following (try typing in the box to see what it does):
There are also check boxes and radio buttons that you can add to your form:

<INPUT TYPE="radio" NAME="example">

<INPUT TYPE="checkbox" NAME="example>

If you add multiple of each they would look like the following in a web browser:

Example 1
Example 2
Example 3
Example 4

Example 1
Example 2
Example 3
Example 4

Notice that the difference between check boxes and radio buttons is that any number of check boxes can be checked at one time while only one radio button can be checked at a time.
The other important tag to know for forms is <TEXTAREA>. It takes ROWS="" and COLS="" attributes and also a has a closing tag, </TEXTAREA>. It looks like the following in the web browser:

You now have enough information to start implementing forms in HTML. Try out a few, mixing and matching the above form elements.

Go on to Main Page...