Lyn's Resource Center Header Logo
Menu

Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
What's New
Contact Me
Feedback Form

Forms are a great way to get feedback from a webpage visitor. They can also be used as a link button. There's also many other uses for forms. This page will discuss survey forms and link buttons.

For forms, you must start with a <FORM> tag and end with a </FORM> tag. All of the elements of you form must be between these two tags. The opening <FORM> tag specifies what your form will do.

Most of this lesson is going to be about survey type forms, and elements. Now, if you make a fill out form survey on your page, you'll want to see the results. A great program to help format the form and e-mail the results to you is Matt Wright's FormMail. Follow the link, and download the program, and upload it to your hosting service. (Please note that your hosting package must allow for CGI scripts. If it does not, you will not be able to use this.) Before doing this, check with your provider...FormMail might already be installed for your hosting package. Or, there might be another form handler.

The opening <FORM> tag is as follows: (Note: This tag is specific to FormMail!)

<FORM METHOD="post" ACTION="http://www.yourhost.com/cgi-bin/FormMail.cgi">

Replace with your own site's address. The above assumes you have placed the program in your cgi-bin folder. (If not, change the above to the acutal folder you used.) By putting this as your opening form tag, it indicates that the form should be handled by the FormMail Program.

You will also need to tell the form where to e-mail the form to. Specify this with the following tag:

<input type=hidden name="recipient" value="email@yourhost.com">

(Please note that with FormMail, the part after the "@" should be the same as the host of the page. In other words, if your page is on whatever.com, your email should be a yourname@whatever.com email, as well. If your email is located elsewhere, the form can not send. Truly, this is meant for those who have a domain hosted, or at least use a free email with their hosting plan. If this is not where you want it to go, consider forwarding your host's email to the one you'd really like it to go to.)

If you aren't using FormMail, you might want to find out what the specific <FORM> tag for your hosting package would be. Note: While the basic elements can be used for any form, such as text fields, textareas, pull down lists, etc., keep in mind that most of the customizations, such as hidden fields and such on this page are FormMail specific.

If you do not have any pre-set CGI form access with your web page provider, try using this simple mailto form opener instead:

<FORM METHOD="post" ACTION="mailto:yourname@emailserver.com" ENCTYPE="text/plain">

Next, let's go on to the other elements of a form.

This section will discuss text boxes and <TEXTAREA>. A text box can be used by the visitor to fill in an answer to a survey. You might see a textarea used for a comment field in a survey. The difference between the two is this. Text boxes are only one line. Textareas are usually more than one line with a scroll bar.

Here is a text box:

Name:

To put it in your page, type in the following (make sure the tag is within the <FORM> tags):

<INPUT TYPE="text">

That's the basic code. Of course, you'll have to manually enter the text, or question going before the text box. There are some attributes to be added to this tag. When you recieve the results of a form in your email, it is sometimes hard to determine what answer is what. For this reason you should name your text box. You'd add NAME="name_for_text_box". This name should be descriptive of what the field is. If your question before the text box is "What is your favorite song?", then you might want to name it "song". Make sure there are no spaces in the name. (Tip: If you are using text boxes for "Name" and "E-mail Addresses", you should name the text boxes "realname" and "email". This is only for these two types of text boxes however. The reason for this is when the results are sent to you, whatever the user types in the "realname" and "email" fields are what show up in the email heading itself. This works for the FormMail handled forms only!)

Next, we want to state the size of the text box. You'd add SIZE=n to the text box input tag. You'd would make n the width of the text box. Next, you'd add in MAX=n. In this case, n would equal how many characters the character is allowed to type in. If you don't want a maximum amount, leave out this attribute. To make text appear in the text box, add VALUE="whatever" (change "whatever" to the actal text you want in the text box) to the text box input tag.

So, let's say that you want to use my name field example above. Here's how the finished tag would look (with all the attributes, and the text written before it):

Name: <INPUT TYPE="text" NAME="realname" size=25 max=50>


Now let's look at a <TEXTAREA> box:
Comments:

Now here's the basic tag for a textarea field (again, it must be put between the <FORM>: tags):

<TEXTAREA></TEXTAREA>

Now for the attributes. Again, you should name this field. You can do it the same way you did for the text box field. (NAME="name_for_textarea") Next, you want to determine the size of your textarea box. This is done different from the text box. To specify how wide the textarea is, you'd add COLS=n to the textarea tag. To specify how high the textarea is, you'd add ROWS=n to the textarea tag. (The textarea box shown above was set to COLS=25 and ROWS=4)

An attribute you might also want to add to the textarea tag, is WRAP=PHYSICAL. This makes it so the visitor writing in the textarea box won't have to scroll across, only down. The text automatically goes to the next line when it hits the end of the line before. By writing text in between the <TEXTAREA> and </TEXTAREA> tags is how you get text to appear in the textarea box.

So, now let's say you want to use my example above (a comment textarea field). The one I used had 4 rows and 25 columns. Here's how the finished tag would look:

Comments:<BR>
<TEXTAREA NAME="comments" ROWS=4 COLS=25 WRAP="physical">Write your comments here.</TEXTAREA>

Check boxes and radio buttons are a great way for a visitor to choose between answers for a multiple choice question. The difference between the two is not only appearance. Radio buttons only allow you to choose one selection. Check boxes on the other hand allow a visitor to make multiple choices.

Here's an example of radio buttons:

Do you like candy?
Yes
No
To put it in your page, type in the following (make sure the tag is within the <FORM> tags):

<INPUT TYPE="radio">

This tag has to be placed in your code for each radio button selection. For the example about candy, you'd have two of these tags. There are of course attributes for the radio button tag. The NAME tag you already know how to use from the other examples. With radio buttons, however, the name would be the same thing for all answer choices for a particular question. The VALUE is the next attribute. This is what would make the tags different from each other. For the candy example, you might name them both, for instance, "candy". Then the value for one would be VALUE="yes" and the other would be VALUE="no". By setting the name the same on both, it only allows the user to select only one of the choices.

Now, let's say we want to use the candy example on your page. Here's the finished tags you would use, complete with the text:

Do you like candy?<BR>
<INPUT TYPE="radio" NAME="candy" VALUE="yes">Yes<BR>
<INPUT TYPE="radio" NAME="candy" VALUE="no">No


Now, we'll look at checkboxes. These are used when you want the user to choose more than one selection. Here is an example:

What kinds of candy do you like?
Reeses Peanut Butter Cups
Kit Kat Bars
Hershey Bars
Gummi Bears
Bubble Gum
As you can see, you can select more than one of the above. The tag for a checkbox is:

<INPUT TYPE="checkbox">

Again, there are attributes. For this one, you can use the NAME attribute. Unlike the radio button tag, you'd name each selection differently.

So, let's say you want to use my above checkbox example on your page. These would be the finished tags along with the text:

What kinds of candy do you like?<BR>
<INPUT TYPE="checkbox" NAME="reeses">Reeses Peanut Butter Cups<BR>
<INPUT TYPE="checkbox" NAME="kitkat">Kit Kat Bars<BR>
<INPUT TYPE="checkbox" NAME="hershey">Hershey Bars<BR>
<INPUT TYPE="checkbox" NAME="gummibears">Gummi Bears<BR>
<INPUT TYPE="checkbox" NAME="bubblegum">Bubble Gum<BR>

Pull down list are a great way for a page visitor to make a selection. Here's an example of a pull down list:

What kind of candy do you like?
As you can see, you can only choose one selection. The basic code is as follows:

<SELECT>
<OPTION>SELECTION TEXT(repeat this for each selection)
</SELECT>

Now for the attributes. The SIZE=n attribute can be put in the <SELECT> tag. Without this attribute, the pull down list will be as wide as the biggest selection. Another attribute that is put in the <SELECT> tag is NAME.

Each selection is signified by the <OPTION> tag. Since the NAME attribute was used in the <SELECT> tag, the VALUE attribute is used to tell the difference between each selection.

Now, let's say you want to use my pull down list example. Here's what the finished code would look like:

What kind of candy do you like?<BR>
<SELECT NAME="candy">
<OPTION VALUE="reeses">Reeses Peanut Butter Cups
<OPTION VALUE="kitkat">Kit Kat Bars
<OPTION VALUE="hershey">Hershey Bars
<OPTION VALUE="gummibears">Gummi Bears
<OPTION VALUE="bubblegum">Bubble Gum
</SELECT>

As I already said, this kind of pull down list only lets the visitor choose one selection. If you wanted to let a user choose more than one, you'd add MULTIPLE to the <SELECT> tag. Let's see it in action:

What kinds of candy do you like?
All the user has to do is hold down the control key while making selections, and it allows them to choose, one, some or all of them. Here's the code:

What kinds of candy do you like?<BR>
<SELECT MULTIPLE NAME="candy">
<OPTION VALUE="reeses">Reeses Peanut Butter Cups
<OPTION VALUE="kitkat">Kit Kat Bars
<OPTION VALUE="hershey">Hershey Bars
<OPTION VALUE="gummibears">Gummi Bears
<OPTION VALUE="bubblegum">Bubble Gum
</SELECT>

Submit and reset buttons are easy to put on your page. While a lot of the fields I discussed are optional (you use only the ones you want on your page) these are required if you want the user to be able to send the form to you. The submit button does exactly what it sounds like: submits it to you. The reset button clears the form so the user can start over again.

Here is a submit button:

The tag would look like this:

<INPUT TYPE="submit">

The text you see on the button is there by default. You can change the text on the button by using the VALUE attribute. Set the VALUE equal to whatever you want written on the button. So, if you want yours to say "Send it Away!", then you'd add VALUE="Send it Away!" to the tag. If this is what you want it to say, then your finished tag would look like this:

<INPUT TYPE="submit" VALUE="Send it Away">


The reset button works much the same way. Here's an example of a default reset button:

The tag for this would be:

<INPUT TYPE="reset">

Once again, you can change the button text by using the VALUE attribute the same way you did with the submit button. Let's say you want the reset button to say "Clear the form". Here's how your finished tag would look:

<INPUT TYPE="reset" VALUE="Clear the form">

This section will discuss the hidden tags in the form. These are usually for the sole purpose of directions for the form. They don't make anything show up on the page. These work for the FormMail handled forms only!

We already discussed, in the forms intro section, the following "hidden" tag, to specify where the e-mail will send to. (Remember the host of the email and the host for your site must be the same!)

<input type=hidden name="recipient" value="email@yourhost.com">

The next tag I will go over will let you set what will show up in the subject line when the results are mailed to you. Let's say you want the subject line to say "Survey Results". You would use the following tag:

<INPUT TYPE="hidden" NAME="subject" VALUE="Survey Results">

Just change the VALUE attribute to whatever you want the subject to be on your form.


The other type of hidden tag I will discuss directs the visitor to a page you specify when they hit the submit button. This might be a "thank you for filling out the form" page, or it might go back to your main page. In either case it is important to use the entire URL of the page you want to come up after clicking the submit button. Here's the code:

<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.yourhost.com/filename.html">

For this tag, just change the part that is in green. Replace the sample URL with the address of the page you want the user redirected to after filling out the form.

Now that you know the tags, lets put them together in an example. We'll use at least one of each input type for this example. You can use the example and customize it for your own use. The parts in red are what you'll change to fit your own page. I will not make the title tags and body tags red, because I assume you all know you'll have to change those to fit your page. *s*

Click here to see the form example in action. (Click your back button on your browser after viewing the page to return here.)

And here's the source code:

<HTML>
<HEAD>
<TITLE>Forms Example</TITLE>
</HEAD>
<BODY TEXT="#000000" LINK="#008080" VLINK="#4876ff">
<CENTER>
<H1>SAMPLE FILL OUT FORM</H1>
</CENTER>
<FORM METHOD="post" ACTION="http://tlkpride.org/cgi-sys/FormMail.cgi">
<INPUT TYPE="hidden" NAME="recipient" VALUE="lynsresources@tlkpride.org">
<INPUT TYPE="hidden" NAME="subject" VALUE="Form Example">
Name: <INPUT TYPE="text" NAME="realname" SIZE=25 MAX=50><BR>
Email Address: <INPUT TYPE="text" NAME="email" SIZE=25 MAX=50><BR>
Web Page Address: <INPUT TYPE="text" NAME="page" VALUE="http://" SIZE=25 MAX=50&glt;<BR>
Do you like this site?<BR>
<INPUT TYPE="radio" NAME="likepage" VALUE="yes">Yes<BR>
<INPUT TYPE="radio" NAME="likepage" VALUE="no">No<BR>
What did you like about it?<BR>
<INPUT TYPE="checkbox" NAME="like_design">The Design<BR>
<INPUT TYPE="checkbox" NAME="like_content">The Content<BR>
<INPUT TYPE="checkbox" NAME="like_graphics">Graphics<BR>
Where did you hear about this site?<BR>
<SELECT NAME="where_hear">
<OPTION VALUE="tlk">tlkpride.org
<OPTION VALUE="word">Word of Mouth
<OPTION VALUE="surfed">Just Surfed In
<OPTION VALUE="banner">Banner Ad
</SELECT>
<BR>
Any comments?<BR>
<TEXTAREA NAME="comments" ROWS=4 COLS=25 WRAP=PHYSICAL>Write your comments here.</TEXTAREA><BR><BR>
<INPUT TYPE="submit" VALUE="Send it away!">
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.tlkpride.org/lynsresources/formthanks.html">
<INPUT TYPE="reset" VALUE="Clear the form!">
</FORM>
</BODY>
</HTML>

(Don't forget to change the areas in red to the location of your form handler, your e-mail address, and your "thank you" page.)

This is a handy button to have on a web page. If the visitor clicks on it, it takes them to a specified page. Let's see it in action:

Here's the code for the above button:

<FORM ACTION="http://www.tlkpride.org" METHOD="link">
<INPUT TYPE="submit" VALUE="tlkpride.org">
</FORM>

The parts in green are the ones you have to change. Where you see http://www.tlkpride.org you have to put the actual web address (or URL) of the page you want the button to link to. Make sure you type in the entire URL and not just the local file name from your directory! Where it says tlkpride.org, you have to replace with what you want written on the button.
Page and graphics design and content © Copyright 1998-2009 Lyn Knarr.
Please email me at lionkingfanatic@netscape.net if you need help with your page/site.
Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission.