Cloud Cloud Cloud Cloud

The checkbox Type

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

Live Demo





 


Firefox

Safari

Safari

Chrome

Opera

IE

Android

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

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.