Lesson 5 -- Printer Friendly Version

INSTRUCTIONS:

To print this lesson exactly as it appears on your screen, wait a minute or two for the entire page to load. The download should not be considered complete until you see the copyright notice at the bottom of the page. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save a text-only version of this lesson, click your browser's File menu and choose Save As. Select a disk drive and folder to receive the file, and change the name of the file to less5.htm To view the file while you are offline, just go to the drive and folder you selected when you saved the file and double-click the file named less5.htm. Your browser will start and you will have access to the file.
If you use the Microsoft Internet Explorer browser and the Microsoft Outlook mail program, you can e-mail a text-only version of this file to yourself. To do so, click the File menu, choose Send, and then select Page by e-mail.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

HTML's forms capability allows you to create interactive pages containing prompts designed to collect visitor responses.
Visitors to your web site who access your form will be able to type in text boxes, select items from a list of choices, or click on checkboxes. All of the information they have entered on the form can then be sent to your e-mail box.
You can create your form entirely in HTML. However, a computer program (usually written in a language called CGI and known as a "forms-processing program") will be required to organize the information your visitors enter. The program will then forward this information to you via e- mail. Don't know CGI? Don't worry...the company that agrees to host your web site will usually provide you with the forms-processing program you'll need.
The <form> tag
Every form must begin and end with <form> and </form> tags.
The <form> tag that appears at the beginning of your form will look something like this:
   <FORM METHOD="POST"
   ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
The <form> tag can have two parameters, "method" and "action."
The "method" parameter dictates how information will be sent to the computer program that will process your form. You have two choices, "method=get" or "method=post."
Of the two, "method=get" is faster than "method=post". The data your visitor enters on your form is simply tacked onto the end of the URL specified in your "action" parameter. Your server's form processing program receives this information almost the instant your visitor submits their completed form.
Because of its reputation for high speed, most search engines use "method=get" for form submissions. To see this, go to www.infoseek.com and type a couple of words in their search form. Click the 'Seek' button, and check the URL at the top of your browser. Notice how Infoseek tacks your search terms (and a few other codes) onto the end of the URL.
If you use "method=post," the data entered on your form is converted to a data packet which is then delivered across the Internet to the URL specified in your "action" parameter. Your server must download this file in order for the forms processing program to process its contents, so the "post" method will take a fraction of a second longer than the "get" method.
Unfortunately, "method=get" only works if the information a visitor enters into your form is less than 256 characters. Because it is difficult to control how many characters a visitor might enter on your form, you should usually go with "method=post," which allows for the transfer of an unlimited number of characters between your form and your server.
The "action" parameter is used to identify the URL of the computer program that will process the information entered on your form. This parameter must include the full URL of the forms-processing program, including the name of the forms-processing program.
If you don't have access to a forms-processing program, you are welcome to use a program run by the National Center for Supercomputing Applications (NCSA) to process form data. The NCSA provides this program as a service to the Internet community.
Unfortunately, NCSA's form-processing program exists solely for HTML programmers to try out their forms. That's it. It cannot send you an e-mail containing the values a visitor to your site entered on your form. If you want a more useful forms-processing program, you will need to ask the company that hosts your web site for the URL to THEIR forms processing program.
The URL for NCSA's forms-processing program is
http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
Therefore, the <form> tag at the top of your form should look like this:
   <FORM METHOD="POST"
   ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
You should select method="post" because a visitor to your site might type more than 256 characters on the form you create. For now, you should also set the "action" parameter to action="http://hoohoo.ncsa.uiuc.edu/cgi- bin/post-query" so that you can test your form by sending your form data to the NCSA forms-processing program.
When you move your web site to a web hosting service, you will want to use a REAL forms-processing program. This program will have a different URL. The kind folks at your web hosting will give you the URL for their forms processing program if you ask. When you find out, just change the URL you typed after the equal sign ( = ) in the "action" parameter above.
One more point to remember: the form should end with a tag that looks like this:
   </FORM> 
You don't have to type it now, because our form isn't done. I just don't want you to forget that the <FORM> tag has a partner!

Chapter 2

Now, all you need to do is create some places on your form so that visitors to your site will have an opportunity to input information. You can accomplish this task by using one or more <input> tags.
An <input> tag usually looks something like this:
   <input name="streetaddress" type="text" size="25">
The 'size' parameter
Many <input> tags have a 'size' parameter. This parameter specifies the width of the input device, in characters. The statement 'size="25"' means that we want our input device to be 25 characters wide.
The "size" parameter does not limit the number of characters that your visitor can type in the input device. If you set the size to 25, the input device will be 25 characters wide. But a person can type 26 characters or 30 or 50 or more. The text will just scroll. Here's an example of a text box with the 'size' parameter set to 25. Go ahead and click in the box. Then, type away:

And here's a text box with the 'size' parameter set to 15:

The 'maxlength' parameter
If you want to limit the number of characters a person can enter in the input device, simply add a "maxlength" parameter, like this:
   <input name="streetaddress" 
   type="text" size="25" maxlength="15">
The tag above will restrict all entries in this text box to no more than 15 characters (even though the box will appear wide enough to accomodate 25 characters). To avoid confusing your visitors, you'll want to be sure and set the 'size' parameter of the box equal to the 'maxlength' parameter. Here's an example: the box below has a size of 10 and a maxlength of 10. Click in the box and try to type more than 10 characters.

The 'name' parameter
All <input> tags will have a 'name' parameter. This parameter, which MUST be UNIQUE for each input tag (this is important--two input tags can NOT have the same name!), is used to identify each input device to the forms-processing program. The name can consist of letters, numbers, underscores, or dashes, but must not contain any spaces.
The 'type' parameter
All <input> tags also have a 'type' parameter. This is used to indicate what type of input device you want your visitor's browser to build. There are six types of input devices:
type="text" to create a one-line text box

type="checkbox" for check boxes

Check this box
type="radio" for a set of radio buttons (also known as option buttons)

1 2 3
type="submit" to create a button that, when clicked, will submit form data to the form-processing program.

type="reset" to create a button that, when clicked, will clear the form.

type="hidden" for identifying information you'd like to quietly send to the form-processing program without the user's knowledge, such as your e-mail address, user name, account number, web URL, or other information.
There are two additional input devices (discussed in the next lesson) that do not use the <input> tag: drop-down lists and comment boxes.
Today, we're going to learn how to create text boxes, reset buttons, and submit buttons. In the next two lessons, we'll learn about some of the more exotic input devices, such as checkboxes, radio buttons, drop-down lists, comment boxes and more.
Text Input
If you want a visitor to your site to be able to type text on your form, just add the "type=text" parameter to an <input> tag.
For example, suppose you want to get your visitor to be able to type his or her e-mail address on your form. All you need to do is add the following tag to your form:
   <input type="text" name="email" size="40">
This text input box will be 40 characters long, ample room for an e-mail address.
Now, if you type this tag exactly as I did above, all your visitor will see is an empty text box wide enough to accomodate 40 characters. It might not be a bad idea to put a little bit of paragraph text in front of the <input> tag so that the user is made aware of what they should type in the input text box:
   <P>
   What is your e-mail address?
   <input type="text" name="email" size="40">
   </P>
Notice how the </P> comes AFTER the <input> tag. This helps ensure that the input box will (hopefully) be on the same line as the "what is your e-mail address" prompt.
If you'd rather see the text box appear below your instructions, simply throw a <BR> (line break) tag between the instructions and the input tag, like this:
   <P>
   What is your e-mail address?<BR>
   <input type="text" name="email" size="40">
   </P>
If you're going to place two or more text boxes on a page, it would be a good idea to use a table so the text boxes line up nicely. It is almost impossible to get the text boxes to look decent with <P> tags.
Start a text editor, and try recreating this form. It has three text boxes arranged neatly in a two-column table. Notice how the form must begin with a <form> tag and end with a </form> tag.
   <HTML>
   <HEAD>
   <TITLE>Our first form</TITLE>
   </HEAD>
   <BODY BGCOLOR="#FFFFFF">
   <H3 align="center">Complaint Form</H3>
   <FORM METHOD="POST"
   ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
   <CENTER>  
   <TABLE WIDTH="500">  
   <TR>  
   <TD WIDTH="250">
   What is your e-mail address?  
   </TD>  
   <TD WIDTH="250">  
   <input type="text" name="email" size="40">
   </TD>  
   </TR>  
   <TR>  
   <TD> 
   What is your full name?
   </TD>  
   <TD>  
   <input type="text" name="fullname" size="40">
   </TD>  
   </TR>  
   <TR>  
   <TD> 
   What is your complaint?  
   </TD>  
   <TD>  
   <input type="text"  name="complaint" size="40">
   </TD>  
   </TR>  
   </TABLE>  
   </CENTER>  
   </FORM>  
   </BODY>  
   </HTML> 
Unfortunately, the form won't work just yet. We need two more input devices (to be discussed in the next chapter).

Chapter 3

When your visitors finish filling out your form, they will need to click on a "submit" button so that they can send all of their input to your form-processing program. To create the "submit" button, all you need to do is add the following <input> tag to your form:
   <input TYPE="submit" VALUE="Submit Form">
Notice that the submit button is special in that it does not need to have a 'name' attribute. Instead it has a 'type' attribute and a 'value' attribute.
Although the 'type' attribute MUST say type="submit", the text you enter for the 'value' attribute is entirely up to you. The words you type in the 'value' attribute will be printed on the back of the button your visitor must click to submit the form to your forms-processing program.
By changing the VALUE parameter, you could have the button say just about anything:
   <input TYPE="submit" VALUE="Click Here"> 
   <input TYPE="submit" VALUE="Order"> 
   <input TYPE="submit" VALUE="Make Reservation"> 
   <input TYPE="submit" VALUE="Continue">

Chapter 4

A 'reset' button tells the browser to clear the form if the visitor clicks on the button. As with the 'submit' button, the text you enter in the 'value' attribute will appear on the button.
   <input TYPE="reset" VALUE="Clear Form">
Again, you can modify the VALUE parameter to change the message displayed on your button:
   <input TYPE="reset" VALUE="Start Over"> 
   <input TYPE="reset" VALUE="Erase Everything"> 
   <input TYPE="reset" VALUE="Cancel">
Although you are required to insert a 'submit' button on your every form, the 'reset' button is optional. Because I don't want to give folks the opportunity to accidentally erase their form data before submitting it to me, I personally avoid placing 'reset' buttons on all my forms.
Positioning the Buttons
If you do decide to use both 'Submit' and 'Reset' buttons on your form, please be aware of the following conventions regarding button placement:
When the two buttons are arranged horizontally, the 'Submit' button should always placed to the left of the 'Reset' button.

When the two buttons are arranged vertically, the 'Submit' button should always be positioned above the 'Reset' button.

-Example-
Let's add these two buttons to our form, just below the table, but still inside the <FORM> and </FORM> tags:
   <HTML>  
   <HEAD>  
   <TITLE>Our first form</TITLE>  
   </HEAD>  
   <BODY BGCOLOR="#FFFFFF">  
   <H3 align="center">Complaint Form</H3> 
   <FORM METHOD="POST"  
   ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">  
   <CENTER>  
   <TABLE WIDTH="500">  
   <TR>  
   <TD WIDTH="250"> 
   What is your e-mail address?  
   </TD>  
   <TD WIDTH="250">  
   <input type="text" name="email" size="40">  
   </TD>  
   </TR>  
   <TR>  
   <TD> 
   What is your full name?  
   </TD>  
   <TD>  
   <input type="text" name="fullname" size="40">  
   </TD>  
   </TR>  
   <TR>  
   <TD> 
   What is your complaint?  
   </TD>  
   <TD>  
   <input type="text" name="complaint" size="40">  
   </TD>  
   </TR>  
   </TABLE>  
   <BR><BR>  
   <input TYPE="submit" VALUE="Submit Form">  
   <input TYPE="reset" VALUE="Clear Form">  
   </CENTER>  
   </FORM>  
   </BODY>  
   </HTML>

Chapter 5

-Quiz 5-
When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 5' selected. Good luck!

-Assignment D-

Click here to preview the page that we'll be creating in this assignment. Click on the 'Assignments' link at the top of this page. When the 'Assignments' page appears, click fill out the form with your name, e-mail address, and password, and click on Assignment D. Then, click on the 'Submit' button. A form will appear with numbered text boxes. Fill in each line of code exactly as specified below. When you're typing a tag that contains multiple parameters, please include the parameters in the order specified in the directions below. When you're done, click on the 'Validate' button and your assignment will be validated for accuracy.

Line 1 - Type a tag that will open your HTML document.

Line 2 - Type a tag that will open the BODY portion of your page. Specify that the background color should be "#FFFFCC."

Line 3 - Type a tag that will create a level three heading. Specify that the heading should be center aligned.

Line 4 - Type the following text:

Sign up for our mailing list!

Line 5 - Type a tag that will close the level three heading.

Line 6 - Type a tag that will create a form. Specify that you'd like to use the POST method, and that the form data should be sent to the following URL:

http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query

Line 7 - Type a tag that will center an upcoming table.

Line 8 - Type a tag that will create a table. Specify that the table should be 500 pixels wide.

Line 9 - Type a tag that will create a table row.

Line 10 - Type a tag that will create a 200 pixel wide table cell.

Line 11 - Type the following text:

What is your e-mail address?

Line 12 - Type a tag that will close the table cell.

Line 13 - Type a tag that will create a 200 pixel wide table cell.

Line 14 - Type a tag that will create a text input. The name of the text input should be "email" and the input should be 35 characters in size.

Line 15 - Type a tag that will close the table cell.

Line 16 - Type a tag that will close the table row.

Line 17 - Type a tag that will create a new table row.

Line 18 - Type a tag that will create a new table cell.

Line 19 - Type the following text:

What is your full name?

Line 20 - Type a tag that will close the table cell.

Line 21 - Type a tag that will create a new table cell.

Line 22 - Type a tag that will create a text input. The name of the text input should be "fullname" and the input should have a size of 40 characters.

Line 23 - Type a tag that will close the table cell.

Line 24 - Type a tag that will close the table row.

Line 25 - Type a tag that will close the table.

Line 26 - Close the tag that was previously used to center the table.

Line 27 - Type a tag that will create a center aligned paragraph.

Line 28 - Type a tag that will insert another line break into your HTML document.

Line 29 - Type a tag that will create a submit button that reads 'Submit Form' (without the quote marks).

Line 30 - Type a tag that will insert a line break into your HTML document.

Line 31 - Type a tag that will insert another line break into your HTML document.

Line 32 - Type a tag that will create a reset buttons that reads 'Clear Form' (without the quote marks).

Line 33 - Type a tag that will close the paragraph.

Line 34 - Type a tag that will close your form.

Line 35 - Type a tag that will close the BODY portion of your page.

Line 36 - Type a tag that will close your HTML document.

-Bonus Assignment-

Please create the form within the lesson, save it, and view it with your browser. No need to send me anything.

You don't have to create an exact replica of the form above. If you'd like, you can customize the form to meet your needs.

In our next lesson, you'll learn how to add checkboxes, hidden fields, and radio buttons to your form.

Note: Although the 'Reset' button should work for you, the 'Submit' button won't work unless you're logged onto the net. Because many people use the NCSA forms processing program to test their forms, the NCSA server is very busy. You may have to wait a good minute or two after clicking your 'Submit' button for the server to respond.

If you make any changes to your form after you've already viewed it in your browser, page caching may interfere with your ability to see the changes. If your browser refuses to display changes you've made to your form, make sure you've saved those changes. Then, return to the browser, hold down the SHIFT key, and click the browser's 'Reload' or 'Refresh' button.

There's an example of our first form within the 'Supplementary Materials' page for this lesson.

Please post a message in the Discussion Area if you have any difficulty creating the form!

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.