InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Check Boxes

The simplest input type is a check box, which appears as a small square the user can select or deselect by clicking. You must give each check box a name. If you want a check box to be checked by default when the form comes up, include the checked attribute. For example, the following would make two check boxes:

<input type="checkbox" name="baby" checked /> Baby Grand Piano
<input type="checkbox" name="mini" /> Mini Piano Stool

The one labeled Baby Grand Piano would be checked. (The user would have to click it to turn it off if he didn't want a piano.) The one marked Mini Piano Stool would be unchecked to begin with, so the user would have to click it to turn it on.

When the form is submitted, selected check boxes appear in the form result:

baby=on

Blank (deselected) check boxes do not appear in the form output at all.

CAUTION

The new XHTML and XML standards will require all attributes to have an equal sign followed by a value. Therefore, to make your pages 100 percent XHTML compatible, you may eventually need to start using checked="checked" instead of just checked.

Right now, however, I recommend using checked without the ="checked" to avoid confusing some older Web browsers.

Speaking of XHTML, the standard also includes several new form input elements to give you greater control over how form data is entered and processed. This is certainly something to look forward to, but as yet no current Web browsers recognize those new input elements.

TIP

You can use more than one check box with the same name, but different values, as in the following code:

<input type="checkbox" name="pet" value="dog"> dog
<input type="checkbox" name="pet" value="cat"> cat
<input type="checkbox" name="pet" value="iguana"> iguana

If the user checks both cat and iguana, the submission result includes the following:

pet=cat
pet=iguana

Radio Buttons | Next Section

Previous Section