Lesson 6 -- 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 less6.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 less6.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

Today, we're going to learn how to embellish our form with two more types of input devices: checkboxes and radio buttons.
First, you'll need to start a text editor, such as Notepad or Simple Text. Then, you'll want to open the form we created in lesson 5.

Checkboxes

Checkboxes allow the visitor to click on a box and toggle a value to either "yes" or "no." All you have to do to create a checkbox is:

1. create an <input> tag with the 'type' attribute set to 'checkbox,'
2. in the <input> tag, give the checkbox a name, and
3. in the <input> tag, give the checkbox a value.

Here's an example of an <input> tag that would create a checkbox:
<input TYPE="checkbox" NAME="mlist" VALUE="Yes"> 
Here's the input device that would be produced by the tag above:

Notice that we have entered a "value" attribute of "Yes" here. That means if a visitor checks the box, the form-processing program will interpret that act as if the user had typed the word "Yes."

In other words, if this box is checked, the forms-processing program will send you confirmation that says, among other things:

mlist=Yes

If the box is left unchecked, the forms-processing program wouldn't even bother mentioning this particular input device at all.

If you would like the box to be checked automatically every time a visitor encounters it (forcing the visitor to click on the box to deselect it), just add a space and the word "checked" to the end of the <input> tag, like this:
<input TYPE="checkbox" NAME="mlist" VALUE="Yes" checked> 
Here's how such a checkbox would look:

Unfortunately, a checkbox by itself is fairly useless. If you want your visitors to understand the purpose of the checkbox, you must type some instructions nearby:
<P>
<input TYPE="checkbox" NAME="mlist" VALUE="Yes" checked>
Check this box to join our mailing list</P>
Here's how a checkbox with instructions would look:

Check this box to join our mailing list

You can have as many checkboxes as you'd like on your form, but you must be careful to give each checkbox a different name:
<P><B>
Which of the following products do you use?
</B></P>
<P>Please check all that apply:</P>
<P><input TYPE="checkbox" NAME="cd" VALUE="Yes">
CD-ROM drives</P>
<P><input TYPE="checkbox" NAME="tape" VALUE="Yes">
Tape drives</P>
<P><input TYPE="checkbox" NAME="removable" VALUE="Yes">
Removable drives</P>
A person will be able to select all, none, or some of these checkboxes.

Here's how such a collection of checkboxes might look:

Which of the following products do you use?

Please check all that apply:

CD-ROM drives

Tape drives

Removable drives

Chapter 2

Radio Buttons offer your visitors a group of buttons to click, but unlike checkboxes, all the buttons in the group are mutually exclusive. What that means is that only one button in the group may be selected at a time, like the buttons on an old-fashioned car radio. When you select one button, the others become deselected.
When creating a group of radio buttons, you will need several <input> tags, one for each button. The radio button <input> tags must be adjacent to one another.

And here's something strange: each of the radio button tags in the group must also have the exact same NAME, but each button must have a different VALUE. This is because the radio buttons function as a group. Only one of the buttons can be selected at any one time, so only one occurrence of the name you select will be sent to your form-processing program.

Here's an example:
<P>
What type of computer do you have?
<input TYPE="radio" NAME="comp" VALUE="Pent">Pentium
<input TYPE="radio" NAME="comp" VALUE="486">486
<input TYPE="radio" NAME="comp" VALUE="386">386
<input TYPE="radio" NAME="comp" VALUE="Mac" checked>Mac
<input TYPE="radio" NAME="comp" VALUE="Other">Other
</P>
And here's how they would look:

What type of computer do you have?
Pentium 486 386 Mac Other

Notice how all the radio buttons are named 'comp,' but each one has a different value. If someone were to select the radio button with a value of '486,' the forms processing program would send you confirmation that says:

comp=486

It is important that you type a label just after each <input> tag. Each <input> tag will create a radio button and nothing more. People who use your form won't understand the purpose of your radio buttons unless you type a label next to each <input> tag.

Labels are customarily positioned to the right of radio buttons. If you want avoid confusing people, I would strongly encourage you to honor this custom.

Notice how all the radio buttons and text are surrounded by just one set of <P> and </P> tags. This helps to ensure that the buttons and the accompanying text will all appear on the same line.

Finally, notice how the word "checked" at the end of the <input> tag for the "Mac" radio button ensures that that button will be selected. If you choose to add the word "checked" to a radio button's input tag, make sure that you only do this for only ONE of the buttons!

Chapter 3

Today, we're going to learn how to add drop-down lists, scrollable lists, multiple lists, and comment boxes to your form.
First, you'll need to start a text editor such as Notepad or Simple Text.

Then, you'll want to click the 'File' menu, choose 'Open,' and retrieve the HTML form we created in lesson 5.

-Note-

If you plan on viewing your form with a web browser, be aware that glitches in the Netscape Navigator and Internet Explorer can often prevent forms from displaying correctly. If you can't get your browser to recognize changes you've made to your form, even after you click the 'Reload' button, try clearing the cache by holding down the SHIFT key and clicking the 'Reload' or 'Refresh' button. If that doesn't work, try shutting down the browser and restarting it.

-Drop-Down Lists-

A drop-down list is essentially a text box with a down arrow at the right edge. When you click the down arrow, a list of options will drop down. Click an option, and it will be entered into the text box for you.

Unlike all of the other input devices we've learned about so far, drop-down lists are not created with <input> tags. Instead, we create the drop-down list with <select> and </select> tags.

The initial <select> tag should contain the name of the drop-down list. This name must be unique--it cannot be used by any other input device on your form. The name must not contain any spaces. Also, each option on your drop-down list must be preceded by an <option> tag.

The tags below will create a drop-down list named 'OperatingSystem.' The drop- down list will have seven options:

<P>Please select your operating system:
<select name="OperatingSystem">
<option>DOS
<option>Windows 3.x
<option>Windows 95
<option>Windows 98
<option>Apple System 7
<option>Apple System 8
<option>other
</select>
</P>

Here's the actual drop down list:

Please select your operating system:

Chapter 4

Like a drop-down list, a scrollable list presents users with multiple options to choose from. However, a scrollable list automatically displays several lines of options at all times. Unlike a drop-down list, there is no need to click a down arrow to make the options on your scrollable list visible.
If screen space is limited, you're probably better off going with a drop-down list. However, if you want to make it as easy as possible for your visitors to select one of many options, nothing beats a scrollable list.

Creating a scrollable list is not too different from creating a drop-down list. The entire list must be surrounded with <select> and </select> tags.

The initial <select> tag must contain a unique name for the scrollable list. This name should not contain any spaces.

The same <select> tag should also contain a size attribute that indicates the number of lines of options you'd like to have visible.

The number of lines of options you make visible can be less than or equal to the total number of options on your list. Any unseen options can be brought into view with scroll bars that will automatically appear on the right side of your scrollable list.

Finally, each option on your scrollable list should be preceded by an <option> tag.

The tags below will create a scrollable list named 'Language.' Although the list has six options, the 'size' attribute in the <select> tag dictates that only the first four will be visible initially. Clicking a scroll bar on the right side of the list will make the other two options visible.

<P>Please select a language:
<select name="Language" size="4">
<option>English
<option>French
<option>German
<option>Japanese
<option>Korean
<option>Spanish
</select>
</P>

Here is the actual scrollable list:

Please select a language:

Chapter 5

Both drop-down lists and scrollable lists allow the user to only make one selection. If you'd like people to be able to select more than one option at a time, you need to create a multiple list.
The tags for a multiple list are identical to the tags for a scrollable list, with one exception: the initial <select> tag must contain the word 'multiple.' This word tells the browser that the user is free to make multiple selections from your list.

The user selects the first option by clicking the option. To make more than one selection, a PC user must only hold down the CTRL key while clicking on subsequent options. The Mac user must hold down the 'Apple' key and 'Shift' key while clicking on subsequent options.

The following tags will create a 5-line tall scrollable list, with multiple selections possible.
 
<P>
Which of the following kitchen appliances do you own?
<BR> 
(Hold down the CTRL key to select more than one item.) 
<select name="Appliances" size="5" multiple> 
<option>Bread baking machine 
<option>Coffee machine 	  
<option>Cuisineart 	  
<option>Espresso maker 	  
<option>Juicer 	  
<option>Microwave 	  
<option>Toaster oven 	  
<option>Veg-o-matic 	  
</select> 	  
</P>
Here is the actual multiple list:

Which of the following kitchen appliances do you own?
(Hold down the CTRL key to select more than one item.)

Chapter 6

A textarea is a large text box that can accommodate multiple lines of text. Form designers use textareas to create 'comment' boxes on their form.
You create a textarea with the <textarea> tag. Each <textarea> tag you create must be accompanied by a closing </textarea> tag.

The initial <textarea> tag has three attributes:

name
A unique identifier for the textarea. Must not contain spaces.

rows
Number of lines of text that will be visible. The user can scroll if more lines are needed.

cols
Width of textarea (in characters).

The following tag will create a textarea named 'comments.' The textarea will be 6 lines tall and 40 characters wide.
 
<P>
Please type your comments below:<BR> 
<textarea name="comments" rows="6" cols="40">
</textarea> 
</P> 
Notice how the </textarea> tag immediately follows the initial <textarea> tag. Nothing appears between the two tags. If you were to type some text in between the two tags, the text would automatically appear inside of the textarea on your form.

Note: Most textareas will not wrap text automatically each time a line is filled with text. Your users will have to press the ENTER key everytime they want to start a new line. If you'd like text to wrap (not all browsers support this), add the word 'wrap' to the end of the textarea tag, like this:
 
<P>
Please type your comments below:<BR> 
<textarea name="comments" rows="6" cols="40" wrap>
</textarea>       
</P>
Here is the actual textarea.

Please type your comments below:

Chapter 7

-Quiz 6-
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 6' selected. Good luck!

-Bonus Assignment-

Create a form that uses the following initial <FORM> tag:
 <FORM METHOD="POST" 
 ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
Your form should contain the following input devices:

-At least two text boxes

-At least one set of radio buttons

-At least one checkbox

-A drop down list and/or a scrollable list and/or a multiple list

-A textarea

-A Submit button

-A Reset button

Don't just cut and paste my tags from lessons 5-6 into your form. Instead, create your own form. Tailor the form to suit your own purposes.

No need to send me anything, but please post a message in the Discussion Area if you have any problems.

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.