Web Tutor - Forms

	Sign In Sign-Up

HTML Studio's

Lesson : 1 - 2 - 3 - 4 - 5 - 6

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 >

Lesson : 1 - 2 - 3 - 4 - 5 - 6

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page