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>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.
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).
Introduction | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Index |
PROFESSIONAL WEB DESIGN Back to Tutor Base |