Page 2

The Text Area Box

The text area box is a lot like the text box; it allows your reader to write something. However, there is one big difference. The text box only allows you to enter one line of data. The text area box, however, is much larger and will allow you to type in as many lines of text as you want. Here's a text area box:

Neat, huh? Again, go ahead and write in it. (you may have to click on the box to activate it) Type something really long; you’ll see what happens. Here's the command that made it appear:

<TEXTAREA NAME="comment" ROWS=6 COLS=40></TEXTAREA>

Here are the parts and what they mean:

TEXTAREA (all one word): This tells the browser that a text area box goes here.
NAME is the same as before. The information the reader puts in this box will arrive in your e-mail box denoted by whatever name you use. In my example, what is written in this box will arrive in your e-mail box with the words, "comment=".
ROWS tells the computer how many rows of text it will accept, and...
COLS tells the computer how many characters will be in each row. This text box will accept 6 rows of text each being 40 characters long. You can make the box as big or as small as you need to.
You must end the text area box with a </TEXTAREA> tag. Notice that this is unique to the text area box. We didn’t use an end tag with the text box above.

The Radio Button

This form element is simply a circle on the page. Someone can use the mouse to click on it. When the radio button is chosen, it darkens. Here are three radio buttons:

Go ahead. Click on them. I included three of them to prove a very important point. When you use radio buttons, only one can be checked. When another is checked, the first one gives up its selection. Go ahead -- try it; you’ll see what I’m talking about.

Here's the command to place three radio buttons on your page.

Here are the parts and what they mean:

INPUT: This tells the browser that a form element is being placed here.
TYPE: This tells the computer what type of form element it will be. In this case, it's a radio button.
NAME: This names the category of your radio buttons. Let’s say that you are asking people to choose their favorite color. The name of the radio buttons could be “color”.
VALUE is the name assigned to the specific button. In the example above, I included three possible values: red, yellow and blue. If you wanted to offer more choices you could easily add more radio buttons with different values.

The Checkbox

The checkbox is just like the radio button except for two features:

The item is a square and it is marked with a check when chosen.
You can check as many as you'd like.

Here are three checkboxes:

Go ahead. Click around a bit. You'll note that just one or every one can be chosen. The checkbox is really just a fancy radio button. Here's the command that placed these checkboxes on the page:

Each of the items means the same as for the radio button, so there's no need to go over it all again. Notice, however, that the TYPE is now "checkbox" instead of "radio."

Remember that when the text from a checkbox arrives at your e-mail box, more than one can show up. With radio buttons, only one item under each heading will arrive. With checkboxes, every item can be checked, thus every item can arrive. Bottom of Form

The Drop-Down List

I really like these; they are a nice alternative to radio buttons. Here's an example of a drop-down list. You have to click on it to see all the choices. This one is for people to choose their favorite color:

Here are the commands that placed the drop-down list on the page:

<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>Blue
<OPTION>Red
<OPTION>Yellow
<OPTION>Green
<OPTION>Black
<OPTION>Orange
<OPTION>Purple
</SELECT>

Although this looks a little more complicated, it really isn't, once you understand the parts of this command. Here are the parts and what they mean:

SELECT tells the computer that a drop-down list is going here.
NAME: Just as above, this is the heading of the form item. It tells you how the reader’s results will be labeled when they arrive in your e-mail box. In this case it will say "color=" and then the reader's choice.
SIZE tells you the size of the box. Here, 1 means one line or item is shown. Try putting 2 there if you'd like to see what it does. I prefer just one. More than one item tends to defeat the purpose of the drop-down list.
OPTION SELECTED denotes which option will appear in the box. In my example, "Blue" is visible.
OPTION denotes another choice that will be visible when you click on the item.
/SELECT ends the drop-down list.

Send and Reset Buttons

Well, now that we know what the 5 most commonly used form elements are, we need a way to have the results sent to your e-mail box. This may be the easiest of all the items on this page. Here are the submit and reset buttons:

And here are the commands to put the buttons on the page:

That's it...really! When you put these buttons into your form, the submit button will send the data to your e-mail address. The reset button will clear the information from the form if someone wants to start over.

The Last Step

Remember to end your form with this:

</FORM>

A Very Important Note

I have some bad news. Even though you will be able to view the form elements in all browsers, not all browsers will allow you to send the results to your e-mail. To allow the information to be sent to your e-mail, you must be using the Mozilla Firefox browser or Microsoft Internet Explorer with a version earlier than 6.0. If you are using a recent version of Internet Explorer, the form will not send the information to your e-mail. The easiest way to fix this is to use the Mozilla Firefox browser when you test your form.

A Sample Web Page

Here is some HTML code for a Web page containing the form that you saw at the beginning of this lesson. Your first assignment this week will be to use this code to create a page of your own.

<HTML>
<HEAD>
<TITLE>My First Form</TITLE>
<HEAD>

<BODY>
<FONT FACE="arial, helvetica" SIZE="-1">

<CENTER><H1>My First Form</H1></CENTER>

<FORM METHOD="POST" ACTION="mailto:YOUR E-MAIL ADDRESS">
<OL>

<P><LI><B>Name: </B><INPUT TYPE="text" NAME="name" SIZE="30">

<P><LI><B>Why is the sky blue?</B><BR>
<TEXTAREA NAME="comment" ROWS=4 COLS=40></TEXTAREA>

<P><LI><B>How many times have you been to Disneyland?<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="0"> 0<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="1"> 1<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="2"> 2<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="3"> 3<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="4"> 4<BR>
<INPUT TYPE="radio" NAME="disneyland" VALUE="5_or_more"> 5 or more</B>

<P><LI><B>Which of these flavors of ice cream do you like?</B><BR>
(You can check as many as you like)<BR>
<B><INPUT TYPE="checkbox" NAME="icecream" VALUE="vanilla"> Vanilla<BR>
<INPUT TYPE="checkbox" NAME="icecream" VALUE="chocolate"> Chocolate<BR>
<INPUT TYPE="checkbox" NAME="icecream" VALUE="strawberry"> Strawberry<BR>
<INPUT TYPE="checkbox" NAME="icecream" VALUE="rockyroad"> Rocky Road<BR>
<INPUT TYPE="checkbox" NAME="icecream" VALUE="rainbow"> Rainbow Sherbet</B>

<P><LI><B>Which of these is your favorite color?</B><BR>

<P><SELECT NAME="color" SIZE="1">
<OPTION SELECTED>Blue
<OPTION>Red
<OPTION>Yellow
<OPTION>Green
<OPTION>Black
<OPTION>Orange
<OPTION>Purple</SELECT>

<P><INPUT TYPE="submit"> <INPUT TYPE="reset">

</FORM>
</FONT>
</BODY>
</HTML>

__________________________________________________________________

You have now completed the Week 13 Lesson. Please re-read this information until you feel that you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 13 Assignments.

Week 2 Assignments
(Microsoft Word required)

Return to Web Design Home Page

Lesson 2 (cont'd)