The Current State of HTML5 Forms

The checkbox Type

<input type=checkbox value=a name=checked checked>		  
<input type=checkbox value=b name=not_checked>		
<input type=checkbox value=c name=indtrmnt id=i>
document.getElementById(indtrmnt).indeterminate = true;

Live Demo




Firefox
Safari
Safari Mobile
Chrome
Opera
IE
Android
Supported Supported Supported Supported Supported Supported Supported

Supported Browser Screenshots

Chrome
IE 11

The Low Down

The checkbox input type is used to create a toggleable check box.

  • While optional, you need to include the name and value attributes to define the name/value content that will be submitted, if the checkbox is checked, when the form is submitted.
  • Clicking on a checkbox will toggle the state from checked to unchecked and back again.
  • While you should include a <label> for every form control, it is especially important to associate one with each checkbox input type: clicking the contents of the associated label toggles the state of the checkbox from on to off to on.
  • Use the checked attribute to default select the item. Without this attribute, the default state for a checkbox is not checked.
  • The indeterminate IDL attribute puts the checkbox into an indeterminate state, neither checked nor unchecked, like what you may want to do with a "check all" at the top of a group of checkboxes where at least one, but not all, are checked. On most platforms, this draws a horizontal line across the checkbox. In IE, it's a small square inside the bigger checkbox.
  • This  indeterminate attribute is not an HTML attribute. To put a checkbox into the indeterminate state, use JavaScript
    document.getElementById(indtrmnt).indeterminate = true;
  • You can target checkboxes and associated elements with :checked, :indeterminate and :not(:checked). For example, you can target the label that comes after a checked checkbox with:
    input[type=checkbox]:checked + label {}
  • Some designers want you to create their own look and feel for checkboxes. Don't try to style the browsers default checkboxes and don't try to use generated content on this replaced elements. Instead, visually hide the checkbox, and use a background image on the label.
  • In Firefox, you can target checkboxes that were checked by default with :default.