Forms
Forms allow people who visit your page submit their feedback, surveys, quizzes and other information you wish to have sent directly to you via e-mail.

There are a few tags you need to know and understand before you can make a form, they are all listed below, along with an explanation of what they do.

TagExplanation
<FORM> </FORM >Informs the browser that the following information is a form and how it should be dealt with.
<INPUT>Creates a text box, check box or radio button depending on the TYPE attribute you give it.
<TEXTAREA>A larger area for visitors to type in, often does not have a limit on the length of the users input.
<SELECT> </SELECT>Creates a pull-down list box for users to select one of the options you set.
Examples

You will learn how to make a form, everything from the FORM tag and to the submit and reset buttons.

The FORM tag is used to tell the browser that a form is to follow and what it should do with the information. The below code will require a CGI script that will format and send the information to you via e-mail. This is what it looks like:

<FORM METHOD=POST ACTION="cgi-bin/????.cgi">

Above is the most common way to send a form, if you can not use cgi scripts, you can goto cgi-free.com or use the code below. it will still work, but it will not be formatted as nicely as it would be if you use CGI.

<FORM METHOD=GET ACTION="mailto:user@server.com">

There are three types of fields for forms that require the <INPUT> tag, text boxes, check boxes and radio buttons. Explanations on how to make each of these follow.

The first, and possibly the most common, of these are text boxes. Text boxes are one-line tall and a set amount of pixels wide. They are used for information like e-mail and web page addresses. They often have a set amount of characters allowed, and will limit the user to that many letters, spaces and special characters. The following code shows you how to make these.

<INPUT NAME="NameYouSelect" TYPE="TEXT" VALUE="Type your name" SIZE=30 MAXLENGTH="50">

That code would produce the following:

You can, of course, change the name, value and all of the numbers to what you would like them to be in your form.

Text areas are the next type of field we will teach you how to use. They work much like text boxes but do not contain a maximum amount of characters, and you control the height and width of them. They are used when you want a more complex or longer answer from the user. This is what the code looks like to make them, once again, you can change the name and all the numbers to your liking.

<TEXTAREA NAME="Comments" ROWS="6" COLS="50">

That code does this:

Now on to the other INPUT fields. Check boxes allow you to ask Yes and No questions because they have only two options, checked or unchecked. Default is unchecked, if you want the box to be checked automatically, just add CHECKED to the code.. This is how you make a check box:

<INPUT NAME="Rating" TYPE="CHECKBOX" VALUE="yes" SIZE=30 CHECKED>

That would make this:

Radio buttons are the third and final field you can make with the INPUT tag. They are simialr to radio buttons, but the allow the user to select only one when you have them in groups, where they are most useful. For instance, you could ask them to chooose their favorite type of music and list Heavy Metal, Country, Classical and Indie If you used radio buttons for this, they would be allowed to select only one.

Here is the code to produce the set of radio buttons discussed:

<B>What is your favorite type of music?</B>
<INPUT NAME="music" TYPE="RADIO" VALUE="HeavyMetal">Heavy Metal<BR>
<INPUT NAME="music" TYPE="RADIO" VALUE="Country">Country<BR>
<INPUT NAME="music" TYPE="RADIO" VALUE="Classical">Classical<BR>
<INPUT NAME="music" TYPE="RADIO" VALUE="Indie">Indie<BR>

Which, of course, produces, this:

What is your favorite type of music?
Heavy Metal

Country

Classical

Indie

The last option for input fields in a form are drop-down lists. They allow users to select one option of your choice from a pull-down menu. They are useful in situations like those of radio buttons, but they take up less space. here is how to make one of these:

<SELECT NAME="TypeOfMusic">
<OPTION VALUE="HeavyMetal">Heavy Metal
<OPTION VALUE="Country">Country
<OPTION VALUE="Classical">Classical
<OPTION VALUE="Indie">Indie
</SELECT> The above code makes this:


Finally, we will show you how to make the Submit and Reset buttons. Submit sends the information and Reset clears all information the user put in the form. This is how to make those oh so important features of a form.

<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">

You can, of course, change the values to anything you want, just make sure they make sense. This is what they look like in action:


Thats it, now you can make forms. Just put the code you want for your form between the <FORM> tags, and you are set. If you need a CGI script, check out our CGI page to get one.