Home Library Learn Downloads Support Community
Sign in | United States - English | |
42 out of 59 rated this helpful - Rate this topic

input type=checkbox element | input type=checkbox object

[This documentation is preliminary and is subject to change.]

Creates a check box control.

HTML 4.01 Specification, Section 17.4

Standards information

HTML information

Closing Tagforbidden
CSS Displayinline

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     input type=checkbox

Remarks

When an input type=checkbox element is selected, a name/value pair is submitted with the form. The default value of input type=checkbox is on.

The height and width styles are exposed to the input type=checkbox element. The size of the element is set based on the values provided by the author, subject to a particular minimum. The size is calculated as follows:

  • If the height or width is greater than 20 pixels, the padding around the check box is set to 4 pixels, and the inner height or width is set to 8 pixels.
  • If the height or width is less than 20 pixels but greater than 13 pixels, the padding around the check box is equal to one half the specified height or width minus 13. For example, if the specified width of the check box is 17, the equation would be: (17-13)/2.
  • If the height or width is less than 12 pixels, the padding around the check box is set to 0 and the inner width is set to the value specified by the author.

Examples

This example uses the label tag to include the text with the checkbox to increase the touch sensitive area of the checkbox.

HTML
Copy 

<label><input id="red" type="checkbox" name="colors" value="red" />Text</label>

This example uses the input type=checkbox element to create two check boxes with explanatory text enclosed in label tags. The onclick events for the checkbox elements call script functions to display a message. The first check box is checked when the page loads.

HTML
Copy 

<html>
<head>
    <title>Checkbox example</title>
    <script type="text/javascript">
      function choosebox1() {
        document.getElementById("sampText").innerHTML = "Never play leapfrog with a unicorn!";
      }
      function choosebox2() {
        document.getElementById("sampText").innerHTML = "Play checkers instead! ";
      }

    </script>
</head>
<body>
<p><label><input type="checkbox" checked id="chk1" onclick="choosebox1();"/>Clear 
    this check box for some free advice.</label></p>
<p><label><input type="checkbox" id="chk2" onclick="choosebox2();"/>Check 
    this check box for a message from our sponsors.</label></p>
<div id="sampText"></div>
</body>
</html>

See also

input
input

 

 

Build date: 3/8/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
multiple checkboxes with same "name" property
If more than one input type=checkbox element with the same name property is present in a form, a unique value property (that is, other than "on") can be assigned to each element to generate unique name / value pairs for the receiving receiving technology to interpret.

These might (for example) be available as a collection under a "form" collection or object, where they could be iterated for processing.
History