Check Boxes

Finally, we come to a series of check boxes where you can choose more than one option at a time. Note that paper forms use checkboxes for either single-value or multi-value information; it's different in the web world.

The only difference between radio buttons and checkboxes in HTML is that you say type="checkbox" instead of type="radio" in the <input> tag.

Again, we're going to need a name for the field; let's call it extraInfo. (Programmers: see this note about naming your fields.) As before, since the user doesn't get to type in the value, we have to supply it within the tag. And again, just as with radio buttons, the <input> element draws only the box, so we have to repeat the text outside the element.

Here's the HTML for the checkbox portion of the form. We're using the checked attribute to pre-select the first item. Please check at least two of the boxes and send the form to see the results.

<form action="showInfo.cgi" method="post">
  Send me more information about: <br />
  <input type="checkbox" name="extraInfo"
     value="Computer-Zine" checked="checked" /> Computer-Zine
  <br />
  <input type="checkbox" name="extraInfo"
     value="Fisher-Zine" /> Fisher-Zine
  <br />
  <input type="checkbox" name="extraInfo"
     value="Cat-O-Zine" /> Cat-O-Zine
  <br />
  <input type="submit" value="Send Data" />
</form>