Lyn's Resource Center: Advanced HTML: Forms

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

Introduction to Forms

Text Based Entry Boxes

Check Boxes and Radio Buttons

Pull Down Lists

Submit and Reset Buttons

Hidden Tags

Examples

Link Button

Introduction to Forms

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. The <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. GeoCities has an opening form tag for you to use that will have the results sent directly to the email address in your GeoCities profile. The opening <FORM> tag is as follows: (Note: This tag is Yahoo! GeoCities specific!)

<FORM METHOD="post" ACTION="/cgi-bin/homestead/mail.pl?membername">

You must replace where I typed membername with your Yahoo! GeoCities membername. By putting this as your opening form tag, it indicates that the results of the form should be sent to your Yahoo! GeoCities member account email address.

If you don't have a page in Yahoo! GeoCities, you might want to find out what the specific <FORM> tag for your site 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 Yahoo! GeoCities 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.

Back to index

Text Based Entry Boxes

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:

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 "email", you should name the text boxes "from-name" and "from-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 "from-name" and "from-email" fields are what show up in the email heading itself. This works for the Yahoo! GeoCities 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="from-name" size=25 max=50>

Now let's look at a <TEXTAREA> box:
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>

Back to index

Check Boxes and Radio Buttons

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:

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:

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>

Back to index

Pull Down Lists

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

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:

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>

Back to index

Submit and Reset Buttons

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">

Back to index

Hidden tags

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 Yahoo! GeoCities handled forms only!

The first 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="next-url" VALUE="/membername/filename.html">

For this tag, just change the part that is in green. Replace membername with your GeoCities membername, and replace "filename" with the name of the file which you want the user redirected to after filling out the form.

Back to index

Examples

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="/cgi-bin/homestead/mail.pl?lynsresources">

<INPUT TYPE="hidden" NAME="subject" VALUE="Form Example">

Name: <INPUT TYPE="text" NAME="from-name" SIZE=25 MAX=50><BR>

Email Address: <INPUT TYPE="text" NAME="from-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="geo">GeoCities

<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="next-url" VALUE="http://geocities.datacellar.net/SiliconValley/Grid/6568/formthanks.html">

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

</FORM>

</BODY>

</HTML>

Back to index

Link Button

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://geocities.yahoo.com/" METHOD="link">

<INPUT TYPE="submit" VALUE="Yahoo! GeoCities">

</FORM>

The parts in green are the ones you have to change. Where you see http://geocities.yahoo.com/ 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 Yahoo! GeoCities, you have to replace with what you want written on the button.

Back to index

Page and graphics design and content © Copyright 1998-2000 Lyn Knarr. Sections of these help pages are also available at Hollywood's Community Center.

Webmaster is a Yahoo! GeoCities Community Leader in the neighborhood of Hollywood. Please email me at knarrly@yahoo.com if you need help with your homepage, or Yahoo! GeoCities in general. Community Leaders are always glad to help! Please visit Hollywood's pages made by your CLs: Hollywood's Community Center and Hollywood's Committees and Special Events Center.

Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission. If you are looking for a logo or header for your own website, use the request form at Graphics Source.

The webmaster is not responsible for any banners that may appear on the GeoGuides or LinkExchange banners on these pages. I am not endorsing any ads that come up in the banner rotations, and my apologies in advance if anything comes up in them that is unsuitable for younger audiences. Thank you.