October 22, 2006 11:48 PM

CHAPTER SEVEN:

Forms

INDEX: 01) What Is A Form?; 02) Getting Started Creating Forms; 03) The Submit Button Makes It Happen; 04) The Reset Button: Starting Over; 05) Using Simple Text Boxes; 06) Using Text Boxes For Multiple Lines; 07) Toggling Check Boxes; 08) Radio Buttons; 09) Selection Lists; 10) CGI What?

01) WHAT IS A FORM?

A form is simply a Web page that can obtain information from the user via text boxes, drop-down lists, and command buttons. A good example (and probably one of the most popular) is that of a "guest book" that allows people to "sign" it when they visit a Web page.

Forms are used for many things, including: Gathering user information and getting a person's user name and/or password for verification.

02) GETTING STARTED CREATING FORMS

It's very easy to set up a form. The problem usually occurs when you try to obtain access to the information that the user has input into your form. Why? Because the information is stored and requires some programming, such as CGI. But, I'm jumping ahead of myself. CGI discussion comes a little in this chapter.

The tags for a form are <FORM> and </FORM>. These can go anywhere inside of the body of the Web page. All of the other form-related tags (which I'll discuss further down) go between the <FORM> and </FORM> tags.

Here's the generic format for forms:

In the above format, the ACTION attribute tells the browser where to go to send the form's data. This will almost always be a program (also called a script) that processes the data and then does the action. The URL, of course, is the address of the Web page that holds the program that holds the form's data. Sounds confusing, doesn't it?

Please do not get discouraged at this point in the HTML Tutorial if you are beginning to find it difficult to understand concepts. Just as in any educational environment, the further one goes, the more difficult the information can become as one advances. And odds are, you will never even need to create a form!

The METHOD attribute tells the browser *how* to send the form's data to the address (URL) specified with the ACTION. There are two (2) choices for the METHOD: POST and GET. The POST method is the most reliable, as the GET METHOD sometimes causes errors in large forms.

Here's a sample of the form code:

03) THE SUBMIT BUTTON MAKES IT HAPPEN

Once a user has input all of his/her information, then s/he's ready for it to be sent to the program specified by the <FORM> tag's ACTION attribute. A submit button is like an "OK" button. It says, "Ok, I'm finished inputting information into this form. It's ready to go to you."

So, what's the format for the submit button?

All of this must go in between the <FORM> and </FORM> tags. Also, each form can just have one submit button. The submit button will show up on the Web page in a variety of ways, depending on which browser you're using. It may say 'Submit', 'Send', or something similar.

What if you don't want it to say 'Submit' or 'Send' or whatever the browser is using? What if you have your own special "label" that you'd like to call it? Then, simply add another attribute to the <INPUT> tag called VALUE and set VALUE to equal whatever word or phrase you want it to say.

Now, let's see the basic HTML code for a very simple form... using the examples above.

<HTML>
<HEAD>
<TITLE>A Form Using a Submit Button</TITLE>
</HEAD>
<BODY>
This is an example of a customized submit button!<P>
<FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="I'm done! Take my information!">
</FORM>
</BODY>
</HTML>

It's one thing to see the code; it's another to see the actual Web page that code will generate.

04) THE RESET BUTTON: STARTING OVER

What is the reset button for? It's for all the users who will make a mistake somewhere when he/she is typing the information into the form. It's for the person that gets all the way to the end and glances back up and notices a typo at the top of the form! It's a way to start over.

So, what does a reset button actually do? It clears all the data from the form and allows you to start over.

Here's the reset button tag:

This tag creates a button called 'RESET'. Again, if you wish, you can customize your button to say whatever you want it to say by adding a VALUE attribute. How about something like this?

Ok, time for a short review before we continue. It should be understood by now that the tags for a Web page form are <FORM> and </FORM>. We've learned that there are two (2) attributes for the <FORM> tag: ACTION (which is the URL of the program that will handle the data input into your form) and METHOD (of which there are two (2) choices, POST and GET, with POST being the most reliable). You've also learned that the button to select when all of the data is input into the form is called by an <INPUT> tag, with there being two (2) types of buttons you can choose from: Submit and Reset. And lastly, you should have learned that if you wish to customize your own Submit or Reset button, you can do so by adding a VALUE attribute to the <INPUT> tag. That brings us up to date. Phew!

05) USING SIMPLE TEXT BOXES

Sometimes, all the information you want from a user is something simple. Like his/her name. When that's the case (where you only need a single line of text input), you should use a simple text box.

In the above code, you might want the user to enter his/her last name, in which you would simply put something like "Last Name" for the NAME tag.

Since users can't read your mind and *know* that you want their last name in that box, you should put something in front of it to indicate what type of information you're wanting entered into the text box. The code for specifying the type of information you want would appear similar to:

Last Name: <INPUT TYPE=TEXT NAME="Last Name">

Below is some HTML code for using text boxes to gather some data from the user.

<HTML>
<HEAD>
<TITLE>Text Box Samples</TITLE>
</HEAD>
<BODY> Please supply some basic information about yourself?<P> <FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
First Name: <INPUT TYPE=TEXT NAME="First">
<P>
Last Name: <INPUT TYPE=TEXT NAME="Last">
<P>
Birthdate: <INPUT TYPE=TEXT NAME="mo/dd/yr">
<P>
<INPUT TYPE=SUBMIT VALUE="I'm done!">
<INPUT TYPE=RESET VALUE="Uh oh! Start over!">
<FORM>
</BODY>
</HTML>

Now, I bet you'd like to see the above form in action.

If you reset the form, it will clear and you can start over. However, if you hit the submit button, "I'm done!", it will error because there is no programming script attached to the code on that Web page. So, don't panic! Simply click on the "Back" button at the top of your Web browser until you return to this page.

You know, it'd be too easy if that's all a text box did. There are three (3) perks to using text boxes that you should know about.

SETTING A DEFAULT VALUE: Suppose you know that users are going to be typing in the same information no matter who they are and you'd like to put that into an input box as a default? You may be needing an example of this type of situation? Well, if you ask for users to input the URL of their Web page, then each user would start out with 'http://', right? So, you could add 'http://' as the default of a text box. To add that as the default of a text box, use code similar to this:

<INPUT TYPE=TEXT NAME="URL" VALUE="http://">

SETTING THE BOX SIZE: The SIZE attribute determines the length of the text box. It's important to notice that the SIZE attribute only determines the length of the text box shown to users. It *doesn't* limit the length of the data input into the text box by the user (that's the last perk listed next). The SIZE attribute is set to characters. If you wanted the text box limited to 25 characters in length, then use this code:

<INPUT TYPE=TEXT NAME="Last Name" SIZE=25>

LIMITING THE TEXT LENGTH: In a generic text box, a user can type as long as he/she wants to. If you'd like to limit the length of the entry, use the MAXLENGTH attribute. This will restrict the user to a certain number of characters, which you specify.

<INPUT TYPE=TEXT NAME="Zip Code" MAXLENGTH=30>

06) USING TEXT BOXES FOR MULTIPLE LINES

Sometimes, one line of text just isn't enough; for instance, an address. You would probably want at least two (2) lines for the address. Or maybe you just want to provide users a place to comment. In both of these instances, you're better off using a TEXT AREA, rather than a text box. A TEXT AREA is a rectangle that allows users to input text, but it isn't limited to just a single line.

In the above format, FIELD NAME is the name of whatever input you're gathering, TotalRowsYouWant is the total number of lines you wish to have displayed, TotalColumnsYouWant is the total number of columns you wish to have displayed, and WRAP tells the user's browser to wrap the text around to the next line if it reaches the end of a row (this might not be supported by all browsers).

Below is the code for showing how to use a text area tag.

<HTML>
<HEAD>
<TITLE>Text Area Sample</TITLE>
<BODY>
<H2><B>WHAT DO YOU THINK?</B></H2>
<HR>
<FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
Last Name: <INPUT TYPE=TEXT NAME="Last">
<P>
First Name: <INPUT TYPE=TEXT NAME="First">
<P>
<B>WHAT DO YOU THINK about the USA converting to the metric system?</B>
<P>
Please answer the above question in the area provided below:<P>
<P>
<TEXTAREA NAME="Answer" ROWS=5 COLS=75 WRAP>
</TEXTAREA>
<P>
<INPUT TYPE=SUBMIT VALUE="I'm Finished">
<INPUT TYPE=RESET VALUE="Start Over!">
</FORM>
</BODY>
</HTML>

Phew. Did you understand all of that? Would it help if you could see what that looks like in action? I thought so. ;)

When you view the Web page form directly above, try clicking on View, Source to see the exact code used when that page was created! Remember this from a previous chapter?

07) TOGGLING CHECK BOXES

Check boxes are nifty little form boxes that you can use when you want to simply have users select true/false, yes/no, or whatever. Check boxes are used when there are only two (2) answers possible. Here's the format for check boxes:

Again, FIELD NAME is the name of whatever it is that you're asking input on at this time.

What if you want to show a list of items, and have them all already checked by default? Add the attribute of CHECKED to your <INPUT> tag.

Did you notice that I named the above input checkbox Hobbies? What would be the code for this?

<HTML>
<HEAD>
<TITLE>Check Boxes!</TITLE
</HEAD>
<BODY>
<H2><B>What's Your Hobby!</B></H2>
<HR>
<FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
Please check all of the hobbies below that apply to you!<BR>
<P>
<INPUT TYPE=CHECKBOX NAME="BB">Basketball<BR>
<INPUT TYPE=CHECKBOX NAME="bb">Baseball<BR>
<INPUT TYPE=CHECKBOX NAME="FB">Football<BR>
<INPUT TYPE=CHECKBOX NAME="HO">Hockey<BR>
<INPUT TYPE=CHECKBOX NAME="TN">Tennis<BR>
<INPUT TYPE=CHECKBOX NAME="FSH">Fishing<BR>
<INPUT TYPE=CHECKBOX NAME="HT">Hunting<BR>
<INPUT TYPE=CHECKBOX NAME="RDG">Reading<BR>
<INPUT TYPE=CHECKBOX NAME="TV">Traveling<BR>
<INPUT TYPE=CHECKBOX NAME="MV">Watching Movies<BR>
<INPUT TYPE=CHECKBOX NAME="MU">Listening to Music<BR>
<INPUT TYPE=CHECKBOX NAME="COL">Collecting<BR>
<INPUT TYPE=CHECKBOX NAME="RC">Racing<BR>
<INPUT TYPE=CHECKBOX NAME="GB">Gambling<BR>
<P>
<INPUT TYPE=SUBMIT VALUE="That's All!">
<INPUT TYPE=RESET VALUE="Oops!">
</FORM>
</BODY>
</HTML>

Wow, that sure looked like a lot of typing. It wasn't, though. I just love the cut and paste options. Oh, I bet you'd love to see what the check box Web page looks like, too.

08) RADIO BUTTONS

The difference between check boxes and radio buttons is this: Check boxes allow for one (1) of two (2) options and radio buttons allow for more than two (2) options, but just one (1) answer. For instance. A true/false question on a test would best be displayed with a check box, but a multiple choice question with four (4) possible answers would best be done with radio buttons.

Even though the multiple choice question had four (4) possible answers, it would only have one (1) correct answer.

Here's the format for using radio buttons:

You should know by now that the Field Name is the specific name you've given to this particular input box.

All of the radio buttons to a given topic or question will have the same field name.

VALUE is a unique string of text that specifies the value of the option when it's selected. You can also add CHECKED in the tag to one of the buttons in a group to have the browser select that one by default.

Ready for some more code?

<HTML>
<HEAD>
<TITLE>Radio Buttons!</TITLE
</HEAD>
<BODY>
<H2><B>General Info About Yourself</B></H2>
<HR>
<FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
<B>Please check the best answer that describes yourself:</B><BR>
<P>
What is your current age?
<UL>
<INPUT TYPE=RADIO NAME="Age" VALUE="Age1">12-18 years <BR>
<INPUT TYPE=RADIO NAME="Age" VALUE="Age2" CHECKED>19-25 years<BR>
<INPUT TYPE=RADIO NAME="Age" VALUE="Age3">26-35 years<BR>
<INPUT TYPE=RADIO NAME="Age" VALUE="Age4">36-49 years<BR>
<INPUT TYPE=RADIO NAME="Age" VALUE="Age5">50 years or older<BR>
</UL>
What is your current level of education?
<UL>
<INPUT TYPE=RADIO NAME="Edu" VALUE="Edu1">Junior High<BR>
<INPUT TYPE=RADIO NAME="Edu" VALUE="Edu2">High School<BR>
<INPUT TYPE=RADIO NAME="Edu" VALUE="Edu3" CHECKED>College<BR>
<INPUT TYPE=RADIO NAME="Edu" VALUE="Edu4">College Graduate<BR>
<INPUT TYPE=RADIO NAME="Edu" VALUE="Edu5">Post Graduate<BR>
</UL>
<P>
<INPUT TYPE=SUBMIT VALUE="All Done!">
<INPUT TYPE=RESET VALUE="Duh!">
</FORM>
</BODY>
</HTML>

When you view the Web page from the above code, be sure to notice that I have an answer already checked by default.

09) SELECTION LISTS

First, what are selection lists? I'm sure you've probably seen them, if you've been surfing the Web very long. They're sometimes drop-down boxes and they can look like this.

There are a couple of tags involved in a selection list. First, are the <SELECT> and </SELECT> tags. This is the tag that allows you to have a larger selection box. There are two (2) attributes in a <SELECT> tag. First is the all-too-familiar Field Name and second is a SIZE attribute. The SIZE attribute sets the selection list to a specific number of items to be displayed. If you omit the SIZE attribute, like I did in the above sample Web page, it becomes a drop-down box. If you include a SIZE attribute, it's simply a large selection box. For what it's worth, I prefer the drop-down look.

Here's the format for the <SELECT> tag:

Here's the source code for the first selection list you viewed above.

<HTML>
<HEAD>
<TITLE>Selection Lists</TITLE>
</HEAD>
<BODY>
<H2><B>Cars!</B></H2>
<HR>
<FORM ACTION="http://www.rivermoo.com/tidbits/html/form" METHOD=POST>
<B>Please select the best answer from the list:</B><BR>
<P>
What is your favorite brand of car?<BR>
<SELECT NAME="Brand">
<OPTION>Chevy</OPTION>
<OPTION>Ford</OPTION>
<OPTION>Dodge</OPTION>
<OPTION>Pontiac</OPTION>
<OPTION>Other</OPTION>
</SELECT>
<P>
<INPUT TYPE=SUBMIT VALUE="Submit">
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
</BODY>
</HTML>

The <OPTION> and </OPTION> tags are used to give your choices.

Isn't this getting easier to understand? :)

10) CGI WHAT?

What is CGI? First, CGI is an acronym for Common Gateway Interface. CGI is a method of transferring form data in a manner that makes it fairly easy to incorporate into a program and then allow you to use it in all the ways that you need to.

All of the form tags in this chapter allow you to create the forms, but you must have a way to get the information back from the computer it was stored on. That's the job of CGI; a program or script that allows you to get that information back.

So, how do you find CGI programs? You have several options available to you.

Your Internet Provider. Many times, Internet providers will have CGI scripts available for their paying customers. The most commonly asked for CGI scripts are usually guest book programs. Check with your provider.

Hire Someone. There are zillions of scripting nerds wandering all over the Internet. Hire one to do whatever job you need done. There are also businesses that do this as one of their services. Please, please, please, make sure the person you hire is reputable. Ask for references and/or ask to see samples of some of his/her work.

Check Out Free Web CGI Resources. There are sites online that offer ready-made CGI programs to do many things. An excellent source of free CGI scripts is Matt's Script Archive.

Enjoy creating your own forms in the future! Good luck!

HTML TUTORIAL

Tutorial Introduction	Introduction
Getting Started	How to Get Started
Table of Contents	Table of Contents
Chapter One	WHAT IS HTML?
Chapter Two	FORMATTING IN HTML
Chapter Three	LISTS
Chapter Four	LINKS
Chapter Five	IMAGES
Chapter Six	TABLES
Chapter Seven	FORMS
Chapter Eight	EXTENSIONS
Chapter Nine	TIPS ON CREATING GREAT WEB PAGES