HTML Checkboxes

Checkboxes allow the user to toggle between two possible choices. They work like an on/off switch.

Checkboxes are created using the <INPUT> tag. When used to create checkboxes, the INPUT tag has three required attributes, TYPE, NAME, and VALUE, and two optional attribute, ID and CHECKED.

Sample HTML source for a checkbox:

<input type="checkbox" name="duties" value="filing" id="duties" checked="checked" />

See the table below for more examples of checkboxes.

The TYPE Attribute (required)

The TYPE attribute takes the value "checkbox" when used to create a checkbox.

The NAME Attribute (required)

The author of the form assigns a value to the NAME attribute. Choose names for checkboxes which are meaningful and which will not be confusing when combined with the VALUE attribute you assign to the checkbox. It is permissible to give a group of checkboxes the same name, as long as you assign them each a separate value.

The VALUE Attribute (required)

Use the VALUE attribute to specify what value should be sent to the CGI script when the checkbox is checked. If using checkboxes singly, it is often least confusing to give the checkbox the same VALUE as its NAME. If you are using a group of checkboxes with the same NAME, make sure each has its own VALUE assigned to it.

The ID Attribute (optional, but required by accessibility standards)

The ID attribute is used to explicitly associate the specific Input tag with a specific LABEL tag. ID attributes are unique within a page.

The CHECKED Attribute (optional)

The CHECKED attribute indicates that the checkbox which includes this attribute should appear on the browser's screen with the checkbox selected.

Example	HTML Source	Description
Programming  Graphic Design  Page Layout  Technical Writing	<label for="programming"> <input type="checkbox" id="programming" checked="checked" name="programming" value="yes" /> Programming</label><br /> <label for="graphics"> <input type="checkbox" id="graphics" name="graphics" value="yes"> Graphic Design</label><br /> <label for="layout"> <input type="checkbox" checked="checked" name="layout" id="layout" value="yes"> Page Layout</label><br /> <label for="writing"> <input type="checkbox" id="writing" name="writing" value="yes"> Technical Writing</label><br />	Checkboxes are normally used to toggle between two possible values. If the checkbox is left unchecked, no value will be sent to the CGI script. Checkboxes allow the user to deselect an option once it has been selected. A group of checkboxes are best when the you want the user to be able to choose any or all of the options If you don't specify a value, the browser sends the value "on" for a checked checkbox. If you choose to give the same name to all of the checkboxes in a group, you will need to specify a separate value for each checkbox.
Microsoft Word  Adobe Photoshop  Claris Filemaker Pro  Adobe PageMaker	<label for="word"> <input type="checkbox" checked="checked" name="software" value="MSWord" id="word" /> Microsoft Word</label><br /> <label for="photoshop"> <input type="checkbox" checked="checked" name="software" value="Photoshop" id="photoshop" /> Adobe Photoshop</label><br /> <label for="file"> <input type="checkbox" checked="checked" name="software" value="FilemakerPro" id="file" /> Claris Filemaker Pro</label><br /> lt;label for="page"> <input type="checkbox" checked="checked" name="software" value="Pagemaker" id="page" /> Adobe PageMaker</label><br />