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, you will need them in your finished 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 the input's name (address) and the end result after processing will be the name=value pair:

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.

IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances just hitting the refresh button doesn't quite do the trick. In that case...

Internet Explorer users: Click Refresh while holding down the CTRL key.
Netscape/FireFox users: Click Reload while holding down the SHIFT key.

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 probably see it 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 sometimes just begging for trouble. Precision form layout is a little better achieved using CSS, but that is a tutorial for another day.)

PageTutor - Form Tutor

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13

Quick Forms Reference      Barebones HTML Guide

Print version of this tutorial available - Get the PageTutor book & CD