Forms — Checkboxes

Topics on This Page

The <input> Tag for Checkboxes
The type Attribute
The name and value Attributes
The checked Attribute
Example

The <input> Tag for Checkboxes

HTML:  <input>
XHTML: <input />

   Note: The W3C and WDG validators will not accept the XHTML-format
         in HTML, although browsers will accept this format.

Always include these attributes:

  type="checkbox"
  name="name"
  value="value"

Optional attributes:

  checked                HTML format
  checked="checked"      XHTML format

The type Attribute

The <input> tag is used for other gadgets such as text boxes and radio buttons. type="checkbox" is what indicates that the <input> tag is defining a checkbox.

The name and value Attributes

In each checkbox, you must include both a name and a value. If the checkbox is selected when the user submits the form, the name-value pair is sent as part of the form data. If the checkbox is not selected, the name-value pair is not sent.

If you have several related checkboxes, you can choose to give them the same name, or you can choose to give them different names. It doesn't matter to your browser: the browser makes no attempt to group checkboxes. Your browser considers each checkbox to be a separate entity. Just be sure that no two checkboxes have both the same name and the same value, or you won't be able to tell which one was checked.

If you're sending the form data to a server-side program such as a CGI program, that program might require that your checkboxes have unique names. Most server-side program do not require that, though.

The checked Attribute

The checked attribute causes the checkbox to be already selected when the form is displayed: it makes a default choice for the user. In XHTML, this attribute must be coded as checked="checked". The XHTML format will work in HTML in most browsers, but it's possible that some browsers will ignore the XHTML format.

If you use the checked attribute for a checkbox and if you receive a form that indicates that the box was checked, you can never be certain that the user actually intended that checkbox to be checked. He might have simply not bothered to unselect it if it didn't apply. For that reason, I rarely use checked myself.

Example

Here's an example of checkboxes. Verify that all of the checkboxes are independent of all others.

This example illustrates a bug in Netscape 4. In Netscape 4, the text before the first <input> tag on each line is shown in a sans-serif font as requested, but the remainder of the text on the line is shown in the default serif font.