Lesson 3

Before we go on, there is one more thing I want to mention. You can also use images in a form. As a matter of fact, you can use just about anything in a form or a form in anything. Just watch your html syntax and avoid overlapping tags.

   <TABLE><FORM></TABLE></FORM>    Overlapping tags.... bad
   <TABLE><FORM></FORM></TABLE>    Nested tags.... good

The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag. Let's make one.

<SELECT>
</SELECT>

Don't forget to give it a name.

<SELECT NAME="BEST FRIEND">
</SELECT>

Next add a few options.

<SELECT NAME="BEST FRIEND">
<OPTION>SM
<OPTION>NA
<OPTION>IG
<OPTION>IB
</SELECT>

And give each <OPTION> a VALUE.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="SM">SM
<OPTION VALUE="NA">NA
<OPTION VALUE="IG">IG
<OPTION VALUE="IB">IB
</SELECT>

The default option is the one that is listed first.

We can specify a default other than the first option in the list.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="SM">SM
<OPTION VALUE="NA">NA
<OPTION VALUE="IG" SELECTED>IG
<OPTION VALUE="IB">IB
</SELECT>

A Scrolling List is very similar in construction to a Pull Down List . Let's add a few more names first though.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="SM">SM
<OPTION VALUE="NA">NA
<OPTION VALUE="IG">IG
<OPTION VALUE="IB">IB
<OPTION VALUE="NS">NS
<OPTION VALUE="JA">JA
<OPTION VALUE="AKF">AKF
</SELECT>

All we gotta do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="SM">SM
<OPTION VALUE="NA">NA
<OPTION VALUE="IG">IG
<OPTION VALUE="IB">IB
<OPTION VALUE="NS">NS
<OPTION VALUE="JA">JA
<OPTION VALUE="AKF">AKF
</SELECT>

The SIZE is simply how many options show in the window. This stuff is CAKE!

Again, the default value is the first <OPTION>, and again we can change that by selecting one.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="SM">SM
<OPTION VALUE="NA">NA
<OPTION VALUE="IG" SELECTED>IG
<OPTION VALUE="IB">IB
<OPTION VALUE="NS">NS
<OPTION VALUE="JA">JA
<OPTION VALUE="AKF">AKF
</SELECT>

I have no idea why you would use the selection feature for a Scrolling List but it's there and I just felt the need to tell you about it.

A very useful type of input is <TEXTAREA>.

<TEXTAREA NAME="COMMENTS">
</TEXTAREA>

You control the size of the box like so...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>

ROWS is the height, COLS is the width.

A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it.

Go ahead and type in the boxes...

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>

WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>

This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).