The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


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




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





<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 />


  Updated 2009 July 10
  Copyright | Privacy | Accessibility
  Contact Us