| ws-class-props | |||
|---|---|---|---|
| Line 5: | Line 5: | ||
|Doc sort order=110 | |Doc sort order=110 | ||
|Doc target group=User | |Doc target group=User | ||
| + | |Doc synopsis=How to use checkboxes | ||
}} | }} | ||
Revision as of 21:33, 13 December 2022
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
