Form Tutor - Lesson 4

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 the above 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.

    <FORM>
    <SELECT>
    </SELECT>
    </FORM>

Don't forget to give it a name.

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

Next add a few options.

    <FORM>
    <SELECT NAME="BEST FRIEND">
    <OPTION>Ed
    <OPTION>Rick
    <OPTION>Tom
    <OPTION>Guido
    </SELECT>
    </FORM>

And give each `<OPTION>` a `VALUE`.

    <FORM>
    <SELECT NAME="BEST FRIEND">
    <OPTION VALUE="ED">Ed
    <OPTION VALUE="RICK">Rick
    <OPTION VALUE="TOM">Tom
    <OPTION VALUE="GUIDO">Guido
    </SELECT>
    </FORM>

The default option is the one that is listed first.

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

    <FORM>
    <SELECT NAME="BEST FRIEND">
    <OPTION VALUE="ED">Ed
    <OPTION VALUE="RICK">Rick
    <OPTION VALUE="TOM" SELECTED>Tom
    <OPTION VALUE="GUIDO">Guido
    </SELECT>
    </FORM>

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

    <FORM>
    <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>
    </FORM>

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

    <FORM>
    <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>
    </FORM>

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.

    <FORM>
    <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>
    </FORM>

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.

Actually, I'll take that back. Here is a perfectly good use for it :-)

(This effect is done using a combination of HTML and JavaScript. If you're curious about how it was done, the source is here.

A very useful type of input is

`<TEXTAREA>`.

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

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

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

`ROWS` is the height, `COLS` is the width.

\\|// (@ @) +--------------------oOO----(_)----OOo-----------------------+ | | | This is to illustrate that if you type something between | | the TEXTAREA tags, it will show up in the window as the | | default text. The cool part is... it shows up EXACTLY | | the way you type it! | | | | * Most, but not all, browsers behave this way. | +------------------------------------------------------------+ |__|__| || || ooO Ooo

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.

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

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

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

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

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

This is normally the default.
`WRAP="off"` means that the text in the box does not wrap, although it is sent exactly the way it was typed in.

`<--BACK` `NEXT-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 | Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN