HTML Elements

---

Creates a check box control.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<input
   accesskey = key
   checked
   class = classname
   datafld = fieldname
   dataformatas = html | text
   datasrc = #id
   dir = ltr | rtl
   disabled
   id = value
   name = name
   size = n
   style = css properties
   tabindex = n
   title = text
   type = checkbox
   value = value
   event = script
>

The INPUT type=checkbox element renders a control box that the user can switch on or off.

The switch is on when a user clicks the checkbox, or when the control element’s checked attribute is set thru script.

When a form is submitted, only on checkbox controls are sent with the form data set. The default value for checkboxes is on.

Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property.

Note that by setting the name attributes the same, the controls act as a collection. As a collection, the INPUT Checkbox controls can be easily queried in client-side script while maintaining individuality and accepting multiple selections.

Yes, I would like to receive updates

Yes, I would like to receive money too

Each selected check box generates a separate name/value pair in the submitted data, even if this results in duplicate names. Below is the code for the above example.

<form>
   <table align="center" bgcolor="khaki">
      <tr>
         <td><input type="checkbox" name="group1">
            Yes, I would like to receive updates</td>
      </tr>
      <tr>
         <td><input type="checkbox" name="group1">
            Yes, I would like to receive money too</td>
      </tr>
   </table>
</form>

INPUT Members

The following HTML code defines two check boxes with explanatory text. The onclick events call two script functions. The first check box is checked.

<p><input type=checkbox id="chk1"
   onclick="choosebox1 ( )"> Click on this check box for some free advice.</p>
<p><input type=checkbox id="chk2"
   onclick="choosebox2" ( )"> Or on this check box for a message from our sponsors.</p>

<p id="msg">

The following script is implemented when the check boxes are clicked.

<script language="JavaScript">
function choosebox1 ( ) {
   alert ( "Never play leapfrog with a unicorn!" );
}
function choosebox2 ( ) {
   msg.insertAdjacentHTML ( "AfterBegin", "<b>Buy WonderWidgets! </b>" );
}
</script>

The HTML and script above result in the following check boxes:

Click on this check box for some free advice.

Or click on this check box for a message from our sponsors.

This sample demonstrates the use of the INPUT Checkbox control to allow a user to select multiple choices. The sample includes client-side script that detects which check boxes are selected.

 Show me 

INPUT