Name
checkbox
Type
input
Synopsis
How to use checkboxes
Description
input elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).
Parameters
input type="checkbox"
- Extra option default
By default, when a checkbox is not checked, it will not be send with the form. This is standard HTML5 behaviour.
If you do want a value send with the form if the checkbox is not Clicked, then you can use the "default" parameter.
So the following example will send "Yes" when the checkbox is clicked and "No" when it is not.
input name="test" value="Yes" default="No" type="checkbox"
Keep in mind that if you use checkboxes as an array of information like in this example :
input type="checkbox" name="Role[]" default="1" value="organizer" id="organizer-checkbox" input type="checkbox" name="Role[]" default="2" value="participant" id="participant-checkbox"
Then using the "default" option will only work if none of the checkboxes have been clicked. You should not set a default value per checkbox when they all use the same name. If you do (like in the example above) only the last checkbox with a default value will be used if no checkboxes have been checked and the value for Role in this case would be "2".
Example
<input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <label for="archived-checkbox">Yes, archive this page</label>
<input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" />
<label for="organizer-checkbox">Organizer</label>
<input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" />
<label for="participant-checkbox">Participant</label>
<input type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /><label for="contact-checkbox">Contact</label>
<input type="checkbox" name="Role[]" value="user" id="user-checkbox" /><label for="user-checkbox">User</label>
Note
Radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
Links
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
