HTML and CSS Reference
A checkbox input may have a value attribute corresponding to whatever the selected option is, and this
value is passed along when the form is submitted. Without a specific value, all that will submit is the state
of the box—a value of “on” if it's checked or nothing at all if it's not checked. That could be enough
information in some cases, so an explicit value attribute might not always be necessary.
Once checked, a checkbox can be unchecked by simply selecting it again. Furthermore, it can be
“prechecked” using the Boolean checked attribute, which requires no value though you can write it as
checked="checked" if you prefer XHTML syntax.
Listing 8-10 shows an example of several checkbox input elements, two of which have been pre-
checked. This is a simple checklist and each control has a meaningful name attribute, so value attributes
probably aren't necessary here; just ticking an item tells us everything we need to know. We've also
organized these options in an unordered list for a bit of added structure.
Listing 8-10 . A set of multiple-choice options using checkbox controls
<label><input type="checkbox" name="grapgun" checked> Grapple gun</label>
<label><input type="checkbox" name="minilaser"> Mini laser cutter</label>
<label><input type="checkbox" name="smokepel" checked> Smoke pellets</label>
<label><input type="checkbox" name="xrayspecs"> Terahertz imaging goggles</label>
<label><input type="checkbox" name="microcam"> Micro-camera</label>
Figure 8-12 shows this checklist in a browser with default styling, Safari on Mac OS X in this case.
Checkboxes may look different in other browsers and on different platforms. You could, of course, remove
the default list item markers with CSS, as you learned in Chapter 4.
Figure 8-12 . The list of checkboxes as it might appear in a browser (this is from Safari on OS X).
A radio button control is somewhat like a checkbox, but only one option in a set can be selected. Radio
buttons get their name from the station preset buttons on old-fashioned car radios; since you can listen to
only one radio station at a time, pushing one button in would cause the previous button to pop back out.