Sign In Sign-Up

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

HTML Studio's

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

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>

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>

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>

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>

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.

It's true that in each form there should never be duplicate NAMEs. 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...

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

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

Maintained by Nick Grant < htmlstudio@talk21.com >

• HTML Studio's Main Page

Copyright © 2000 Nick Grant. All Rights Reserved.