Form Tutor - Lesson 2

Now, just to keep things a little cleaner I am going to start writing only the `<FORM>` tags. I will leave out the head, body, title and form tag attributes from now on. Needless to say, leave them in your document.

The most common `TYPE` of form `<INPUT>` is `TEXT`.

    <FORM>
    <INPUT TYPE="text">
    </FORM>

Every input needs a `NAME`.

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS">
    </FORM>

When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with `ADDRESS` so the end result after processing will be `ADDRESS=1313 Mockingbird Lane`.

We can if we want, type in a `VALUE`.

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St">
    </FORM>

This will automatically pair the value `44 Cherry St` with the name `ADDRESS`, unless the user changes it. Note - be sure to use quotes where I've specified.

We can specify the size of the text input box.

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
    </FORM>

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
    </FORM>

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
    </FORM>

As you can see, the default value is (usually) 20. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

Note - A text box is not always the same size between browsers. Author a form with one browser, then view it in another browser, and you'll see them rendered a little differently. The only time this becomes a problem is when you try to get into precision form layout. (Actually precision layout of anything on a web page is just begging for problems.)

Go ahead and remove `VALUE="44 Cherry St"`.

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" SIZE=30>
    </FORM>

If we want, we can specify how many characters a user can input.
Just go ahead and try to input more than 10 characters!

    <FORM>
    <INPUT TYPE="text" NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
    </FORM>

I suppose this feature might come in handy now and again, but unless you think someone's going to send the whole King James Bible down the pike at you, I wouldn't worry about it.

Very similar to the `TYPE=TEXT` is the `TYPE=PASSWORD`. It is exactly the same, except it displays *** instead of the actual input. The browser will send you the input, it just won't display it.

    <FORM>
    <INPUT TYPE="password">
    </FORM>

Remember that each `<INPUT>` must have a `NAME`.

    <FORM>
    <INPUT TYPE="password" NAME="USERPASS">
    </FORM>

`SIZE`, `VALUE`, and `MAXLENGTH` attributes work here also. By the way, a `<TAG>` tells the browser to do something. An `ATTRIBUTE` goes inside the `<TAG>` and tells the browser how to do it.

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

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