DevOps:Doc/FlexForm/2.0/input/checkbox - Revision history

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

2025-08-21T09:07:14Z

Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

ws-class-props
← Older revision		Revision as of 11:07, 21 August 2025
Line 1:		Line 1:
	{{Csp class properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1,2.5
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Doc parent=DevOps:Doc/FlexForm/1.0/input		\|Doc parent=DevOps:Doc/FlexForm/1.0/input

Maintenance script: Imported by PageSync

2025-07-15T08:33:46Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:33, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Charlot: User:Charlot

2023-03-31T20:00:32Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:00, 31 March 2023
Line 1:		Line 1:
	{{Doc properties		{{Doc properties
	\|Subject version=2.0		\|Subject version=2.0,2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Doc parent=DevOps:Doc/FlexForm/1.0/input		\|Doc parent=DevOps:Doc/FlexForm/1.0/input

Charlot at 20:35, 13 December 2022

2022-12-13T20:35:30Z

← Older revision		Revision as of 22:35, 13 December 2022
Line 2:		Line 2:
	checkbox		checkbox
	===Type===		===Type===
	~~_input~~		input
	===Synopsis===		===Synopsis===
	How to use checkboxes		How to use checkboxes
	===Description===		===Description===
	<code>~~_input~~</code> elements of type '''<code>checkbox</code>''' 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).		<code>input</code> elements of type '''<code>checkbox</code>''' 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===		===Parameters===
	~~_input~~ type="checkbox"		input type="checkbox"

	- Extra option '''default'''		- Extra option '''default'''
Line 17:		Line 17:

	So the following example will send "Yes" when the checkbox is clicked and "No" when it is not.		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"		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 :		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="1" value="organizer" id="organizer-checkbox"
	~~_input~~ type="checkbox" name="Role[]" default="2" value="participant" id="participant-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".		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===		===Example===
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_input~~ type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <~~_label~~ for="archived-checkbox">Yes, archive this page</~~_label~~>		<input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <label for="archived-checkbox">Yes, archive this page</label>
	</syntaxhighlight>		</syntaxhighlight>
	<~~_input~~ type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <~~_label~~ for="archived-checkbox">Yes, archive this page</~~_label~~>		<input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <label for="archived-checkbox">Yes, archive this page</label>

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_input~~ type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" />		<input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" />
	<~~_label~~ for="organizer-checkbox">Organizer</~~_label~~>		<label for="organizer-checkbox">Organizer</label>
	<~~_input~~ type="checkbox" name="Role[]" value="participant" id="participant-checkbox" />		<input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" />
	<~~_label~~ for="participant-checkbox">Participant</~~_label~~>		<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="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~~>		<input type="checkbox" name="Role[]" value="user" id="user-checkbox" /><label for="user-checkbox">User</label>
	</syntaxhighlight>		</syntaxhighlight>
	<~~_input~~ type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" /> <~~_label~~ for="organizer-checkbox">Organizer</~~_label~~><br><~~_input~~ type="checkbox" name="Role[]" value="participant" id="participant-checkbox" /> <~~_label~~ for="participant-checkbox">Participant</~~_label~~><br><~~_input~~ type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /> <~~_label~~ for="contact-checkbox">Contact</~~_label~~><br><~~_input~~ type="checkbox" name="Role[]" value="user" id="user-checkbox" /> <~~_label~~ for="user-checkbox">User</~~_label~~>		<input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" /> <label for="organizer-checkbox">Organizer</label><br><input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" /> <label for="participant-checkbox">Participant</label><br><input type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /> <label for="contact-checkbox">Contact</label><br><input type="checkbox" name="Role[]" value="user" id="user-checkbox" /> <label for="user-checkbox">User</label>

	===Note===		===Note===

Charlot: User:Charlot

2022-12-13T20:33:22Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:33, 13 December 2022
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
	}}		}}

Charlot: User:Charlot

2022-12-13T20:33:09Z

User:Charlot

New page

===Name===
checkbox
===Type===
_input
===Synopsis===
How to use checkboxes
===Description===
<code>_input</code> elements of type '''<code>checkbox</code>''' 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===
<syntaxhighlight lang="html">
<_input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <_label for="archived-checkbox">Yes, archive this page</_label>
</syntaxhighlight>
<_input type="checkbox" name="Archived" value="Yes" id="archived-checkbox" /> <_label for="archived-checkbox">Yes, archive this page</_label>

<syntaxhighlight lang="html">
<_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>
</syntaxhighlight>
<_input type="checkbox" name="Role[]" value="organizer" id="organizer-checkbox" /> <_label for="organizer-checkbox">Organizer</_label><br><_input type="checkbox" name="Role[]" value="participant" id="participant-checkbox" /> <_label for="participant-checkbox">Participant</_label><br><_input type="checkbox" name="Role[]" value="contact" id="contact-checkbox" /> <_label for="contact-checkbox">Contact</_label><br><_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