Building Check Boxes is pretty much the same thing.

<form>
<input type="checkbox" name="Ed">
</form>

We could stop here on check boxes if we wanted to. Sometimes all you'll need is a single check box with some text...

But I think we're also going to look at multiple check boxes, because out there in the world, they are often found in groups. Multiple check boxes are no different than a single check box... only there's more of them ;-)

So, take our lonely little check box and add 3 more, but this time give each one a different name. (Also add line breaks if you'd like)

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

In our form, each Check Box gets the same value. (Although you could just as easily assign different values for each checkbox)

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

With check boxes, the name changes and the value may stay the same or it may be different. You can have as many checkboxes as you like in your form... just give each one a different name. The values can be all the same or they can be all different. If a checkbox is checked by your user, your form will return the name/value pair for that checkbox.

Confusing, eh? Don't feel bad, my simple mind still gets confused. That's why I lean heavily on HTML reference documents. Truth be told, sometimes I even refer to my own tutorials! (You think I keep this all straight 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 whichever ones they choose. If they choose nothing, nothing will be returned to you. If your user checks them all, then all name/value pairs will be returned.

Remember when we were doing Radio Buttons and I said to think of radio buttons with the same name and in the same form as a collective unit? Well, that's not the case with checkboxes. Each checkbox is a completely separate input that returns its value if checked.

Form Tutor

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

HTML 4.0 Reference      Barebones HTML Guide