Form Tutor- 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.

A Presidential Quiz

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem

RepDem

RepDem

RepDem

RepDem

RepDem
The html for this form    is   here if you are interested.
...and the answers are here... if you need them.

Overlapping tags, for those that are wondering are tags that... um... overlap. Let me illustrate.

   <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>Ed
<OPTION>Rick
<OPTION>Tom
<OPTION>Guido
</SELECT>


And give each <OPTION> a VALUE.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
</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="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
</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="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</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="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</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="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</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.



Html code for this textarea here.

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).

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Index
PROFESSIONAL WEB DESIGN