Form Tutor- Lesson 2

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

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

`<INPUT TYPE=TEXT>`

Every input needs a `NAME`.

`<INPUT TYPE=TEXT NAME="ADDRESS">`

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`.

`<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">`

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.

`<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>`

`<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>`

`<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>`

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"`.

`<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>`

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

`<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>`

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.

`<INPUT TYPE=PASSWORD>`

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

`<INPUT TYPE=PASSWORD NAME="USER PASSWORD">`

`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.

Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of the options.
First let's build some Radio Buttons.

`<INPUT TYPE=RADIO NAME="BEST FRIEND">`

Now add 2 more.

`<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">`

Hmmm... I suppose we should put a line break after each one.

`<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>`

Note that each input has the same name. The reason will become apparent very shortly.

Each of the Radio Buttons must be assigned a `VALUE`.

`<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>`

Now label each button.

`<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>`

Ed Holleran
Rick Weinberg
Tom Studd

You can also modify these labels with html tags if you wish.

Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).

`Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>`

Who is your best friend?
Ed Holleran
Rick Weinberg
Tom Studd

The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair `BEST FRIEND=Ed` (or whoever they pick).

Building Check Boxes is pretty much the same thing. Start with this.

`<INPUT TYPE=CHECKBOX NAME="Ed">`

Add 3 more, but this time give each one a different `NAME`. (Also add in line breaks if you want)

`<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>`

Each Check Box gets the same `VALUE`.

`<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>`

Note- For Check Boxes the `NAME` changes and the `VALUE` stays the same and with Radio Buttons, the `VALUE` changes but the `NAME` stays the same. Don't feel bad, my simple mind still gets confused. That's why I lean heavily on html reference documents. (You thought I had all this in my head?? HA!)

OK, let's label each box.

`<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>`

Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults. Only if you want to, of course.

`Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>`

Which of these guys are your friends?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs...

`Ed=YES`
`Tom=YES`
(or what ever they choose... if they choose nothing, nothing will be returned to you)

Now a question might come to mind... What if I want to ask 3 different questions about the same group of guys?? How, Mr Smartypants am I going to do that!

Well, just settle down and I'll show you.

Which of these guys are your friends? Ed Holleran Rick Weinberg Tom Studd Burgermeister | Which of these guys would you lend money to? Ed Holleran Rick Weinberg Tom Studd Burgermeister | Which of these guys would you trust with your sister? Ed Holleran Rick Weinberg Tom Studd Burgermeister

It's true that in each form there should never be duplicate `NAME`s. So, maybe we could use a different name for each question. When I say never, I don't mean that your computer will blow up... at most it might confuse the browser or the form handler. At the very least it will confuse the poor sap that has to make sense of the form data.

What follows is the html for these 3 questions. The `<TABLE>` tags are in blue. They are for appearance only, they don't affect how the form works. If you need to brush up on your `<TABLE>` tags, then stumble on over to Table Tutor.

`<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>`

<TD WIDTH=199>
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM" VALUE="YES"> Burgermeister<P>
</TD>

</TR></TABLE>
</CENTER>

Let's suppose the user checked the following boxes...

Which of these guys are your friends? Ed Holleran Rick Weinberg Tom Studd Burgermeister | Which of these guys would you lend money to? Ed Holleran Rick Weinberg Tom Studd Burgermeister | Which of these guys would you trust with your sister? Ed Holleran Rick Weinberg Tom Studd Burgermeister

...doing that would send you the following name/value pairs.

`Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES`

Isn't that cool!

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

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