The <input> tag with a type="checkbox" attribute creates a checkbox (also called a tickbox).
Checkboxes let users select multiple options by ticking one or more boxes.
Four <input> elements of type checkbox.
The first checkbox is checked (selected).
<form action="/tutorial/action.html">
<fieldset>
<legend>Your favorite technologies</legend>
<label><input type="checkbox" name="html" value="html" checked> HTML</label><br />
<label><input type="checkbox" name="css" value="css"> CSS</label><br />
<label><input type="checkbox" name="javascript" value="javascript"> Javascript</label><br />
<label><input type="checkbox" name="csharp" value="csharp"> C#</label><br />
<input type="submit" value="Submit">
</fieldset>
</form>
All input elements are contained by a <form> and a <fieldset> with a <legend>.
Each checkbox is associated with a <label> which is wrapped around the checkbox.
Clicking the box or the label will select or unselect the checkbox
The first checkbox is selected by default with the checked attribute.
Submitting the form will send the values of selected checkboxes only.
An <input> tag with type="checkbox"creates a checkbox element.
A checkbox allows a user to select an option by ticking a box.
Each checkbox is usually associated with a <label> (see below).
<input type="checkbox">
Adding clickable labels to checkboxes improves usability. It allows users to click the labels to turn checkboxes on and off. There are 2 ways to implement this:
A <label> wrapping a checkbox.
<form>
<label><input type="checkbox" name="insured" value="insured" checked> Do you have insurance?</label>
</form>
A <label> associated with a checkbox using a for attribute.
<form>
<input type="checkbox" id="insured" name="insured" value="insured" checked>
<label for="insured"> Do you have insurance?</label>
</form>
Tip: The wrapped label approach is preferred because it is simpler and does not require for and id attributes.
Here is when type="checkbox" support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
