A humanoid shape emerging from a sheet of paper ticking off a series of checkboxes

Checkboxes are for questions in which you have a range of possible answers and the correct selection for the user may be from none, all, one or some of them. An example of a question appropriate for checkboxes might be asking the user what ice cream flavours the user likes:

<fieldset>
	<legend>What flavors of ice cream do you like?</legend>
	<label for="vanilla" accesskey="v">Vanilla</label>
		<input type="checkbox" name="vanilla" id="vanilla">
	<label for="chocolate" accesskey="c">Chocolate</label>
		<input type="checkbox" name="chocolate" id=chocolate">
	<label for="strawberry" accesskey="s">Strawberry</label>
		<input type="checkbox" name="strawberry" id=strawberry">
</fieldset>

(Note that some of the accesskey shortcuts used above would conflict with the input for “city” made in our text input example.)

A checkbox can be turned “on” or checked by default by adding a checked attribute to the tag. Be careful when doing so, however (just as you would be when using the same code with a radio element), as this comes close to “implied content”. (A real-world example example of implied consent being the statement “if a woman doesn’t say no, she means yes”.)

Image by AJ Cann, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.