Form Tutor - Lesson 3

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 several options.
First let's build some Radio Buttons.

    <FORM>
    <INPUT TYPE="radio" NAME="BEST FRIEND">
    </FORM>

Now add 2 more.

    <FORM>
    <INPUT TYPE="radio" NAME="BEST FRIEND">
    <INPUT TYPE="radio" NAME="BEST FRIEND">
    <INPUT TYPE="radio" NAME="BEST FRIEND">
    </FORM>

Hmmm... I suppose we could insert a couple line breaks.

    <FORM>
        <INPUT TYPE="radio" NAME="BEST FRIEND">
    <BR><INPUT TYPE="radio" NAME="BEST FRIEND">
    <BR><INPUT TYPE="radio" NAME="BEST FRIEND">
    </FORM>

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

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

(If you're wondering why I shoved the top input over 4 spaces, the reason is simple... neat code. The neater and more organized you write your code, the easier it is to work with. Also, when you go back to make changes, having an orderly layout is half the battle.)

Now label each button.

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

Ed Holleran
Rick Weinberg
Tom Studd

You can, of course, 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).

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

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.

    <FORM>
    <INPUT TYPE="checkbox" NAME="Ed">
    </FORM>

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

    <FORM>
        <INPUT TYPE="checkbox" NAME="Ed">
    <BR><INPUT TYPE="checkbox" NAME="Rick">
    <BR><INPUT TYPE="checkbox" NAME="Tom">
    <BR><INPUT TYPE="checkbox" NAME="BM">
    </FORM>

Each Check Box gets the same `VALUE`.

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

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.

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

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.

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

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 Meisterburger | Which of these guys would you lend money to? Ed Holleran Rick Weinberg Tom Studd Burgermeister Meisterburger | Which of these guys would you trust with your sister? Ed Holleran Rick Weinberg Tom Studd Burgermeister Meisterburger

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.

    <FORM>
    <TABLE BORDER=1><TR><TD WIDTH=33%>
    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 Meisterburger
    </TD><TD WIDTH=33%>
    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 Meisterburger
    </TD><TD WIDTH=34%>
    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 Meisterburger
    </TD></TR></TABLE>
    </FORM>

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

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

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

Ain't it cool?

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

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