Foundation HTML5 with CSS3

Chapter 8

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

<ul>

<li>

<label><input type="checkbox" name="grapgun" checked> Grapple gun</label>

</li>

<li>

<label><input type="checkbox" name="minilaser"> Mini laser cutter</label>

</li>

<li>

<label><input type="checkbox" name="smokepel" checked> Smoke pellets</label>

</li>

<li>

<label><input type="checkbox" name="xrayspecs"> Terahertz imaging goggles</label>

</li>

<li>

<label><input type="checkbox" name="microcam"> Micro-camera</label>

</li>

</ul>

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

input type="radio"

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.