DevOps:Doc/FlexForm/2.0/input/number - 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:34Z

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:34:07Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:34, 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

944f869b-8467-464e-95c7-903362952755: add restrictions="lifted" so anons can see the form

2023-12-08T13:42:15Z

add restrictions="lifted" so anons can see the form

← Older revision		Revision as of 15:42, 8 December 2023
Line 32:		Line 32:
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	<form action="get">		<form action="get" restrictions="lifted">
	field1: e.g. try 20 <input type="number" name="field1" /><br>		field1: e.g. try 20 <input type="number" name="field1" /><br>
	field2: e.g. try 5 <input type="number" name="field2" /><br>		field2: e.g. try 5 <input type="number" name="field2" /><br>

Charlot at 20:02, 9 October 2023

2023-10-09T20:02:03Z

← Older revision		Revision as of 22:02, 9 October 2023
Line 42:		Line 42:
	===Links===		===Links===
	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number		https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

			===PageSync===
			If you have PageSync installed, you can install an example using Calc field with FlexForm.

			'''Using Terminal'''

			Go to the extensions/PageSync/maintenance folder

			Type :
			<syntaxhighlight>
			php WSps.maintenance.php --user="You username" --install-shared-file="https://www.open-csp.org/docs/PageSync/FlexForm-examples/PageSync_09-10-2023-19-49-44_2-6-1.zip"
			</syntaxhighlight>

			'''Using PageSync 2.6 and above Special Page.'''

			Use your browser and go to https://www.open-csp.org/docs/PageSync/FlexForm-examples/PageSync_09-10-2023-19-49-44_2-6-1.zip.
			This will download the example file. Make sure you have set file upload in your wiki to allow .zip files. Upload the file.

			Navigate to your wiki Special:PageSync Special page. Choose '''SHARE''', then at the bottom press the button '''INSTALL A SHARED FILE'''. The new page you get will have all your uploaded PageSync files at the top of the list. Choose the correct file and click on '''PREVIEW SHARED FILE''' to see all the details before you can actually install the example page.

Charlot: User:Charlot

2023-03-31T20:03:39Z

User:Charlot

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

2022-12-13T21:06:43Z

← Older revision		Revision as of 23:06, 13 December 2022
Line 2:		Line 2:
	number		number
	===Type===		===Type===
	~~_input~~		input
	===Synopsis===		===Synopsis===
	How to render a number only input field		How to render a number only input field
Line 13:		Line 13:

	===Parameters===		===Parameters===
	~~_input~~ type="number"		input type="number"

	As of version 1.1.37 there is an optional field you can use called '''calc'''. It allows you to do calculations with other input field of type="number".		As of version 1.1.37 there is an optional field you can use called '''calc'''. It allows you to do calculations with other input field of type="number".
Line 22:		Line 22:
	This example accepts only a value between 0 and 10 with steps of 0.01 (e.g. 2.21)		This example accepts only a value between 0 and 10 with steps of 0.01 (e.g. 2.21)
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_input~~ type="number" placeholder="1.0" step="0.01" min="0" max="10" />		<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
	</syntaxhighlight>		</syntaxhighlight>
	<~~_input~~ type="number" placeholder="1.0" step="0.01" min="0" max="10" />		<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="get">		<form action="get">
	field1: e.g. try 20 <~~_input~~ type="number" name="field1" /><br>		field1: e.g. try 20 <input type="number" name="field1" /><br>
	field2: e.g. try 5 <~~_input~~ type="number" name="field2" /><br>		field2: e.g. try 5 <input type="number" name="field2" /><br>
	Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4<br> Result: <~~_input~~ type="number" name="total" calc="5*[field1]/(20+[field2])" />		Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4<br> Result: <input type="number" name="total" calc="5*[field1]/(20+[field2])" />
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	<~~_form~~ action="get">		<form action="get">
	field1: e.g. try 20 <~~_input~~ type="number" name="field1" /><br>		field1: e.g. try 20 <input type="number" name="field1" /><br>
	field2: e.g. try 5 <~~_input~~ type="number" name="field2" /><br>		field2: e.g. try 5 <input type="number" name="field2" /><br>
	Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4<br> Result: <~~_input~~ type="number" name="total" calc="5*[field1]/(20+[field2])" />		Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4<br> Result: <input type="number" name="total" calc="5*[field1]/(20+[field2])" />
	</~~_form~~>		</form>
	===Note===		===Note===
	If you are using the Calc function and you do not see any calculations, then you can have a look in the console of your browser. It will show you any mistakes you have made in the calculation.		If you are using the Calc function and you do not see any calculations, then you can have a look in the console of your browser. It will show you any mistakes you have made in the calculation.

Charlot: User:Charlot

2022-12-13T21:06:09Z

User:Charlot

ws-class-props
← Older revision		Revision as of 23:06, 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 render a number only input field
	}}		}}

Charlot: User:Charlot

2022-12-13T21:06:01Z

User:Charlot

New page

===Name===
number
===Type===
_input
===Synopsis===
How to render a number only input field
===Description===
elements of type <code>'''"number"'''</code> are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a <code>step</code> attribute, which takes as its value a number specifying the step amount.

You can use the <code>min</code> and <code>max</code> attributes to specify a minimum and maximum value that the field can have.

===Parameters===
_input type="number"

As of version 1.1.37 there is an optional field you can use called '''calc'''. It allows you to do calculations with other input field of type="number".
The calc argument can hold a calculation and the other fields you want to use access them by there name field between square brackets. Like so : "5*[field1]+(20/[field2]".
See the second example. Currently for this to work, the number field with the calc argument must be in the same Form.

===Example===
This example accepts only a value between 0 and 10 with steps of 0.01 (e.g. 2.21)
<syntaxhighlight lang="html">
<_input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
</syntaxhighlight>
<_input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
<syntaxhighlight lang="html">
<_form action="get">
field1: e.g. try 20 <_input type="number" name="field1" /> 
field2: e.g. try 5 <_input type="number" name="field2" /> 
Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4 Result: <_input type="number" name="total" calc="5*[field1]/(20+[field2])" />
</_form>
</syntaxhighlight>
<_form action="get">
field1: e.g. try 20 <_input type="number" name="field1" /> 
field2: e.g. try 5 <_input type="number" name="field2" /> 
Calculation( 5 * field1 / ( 20 + field2 ) ) would become '''5 X 20 / ( 20 + 5 )''' = 4 Result: <_input type="number" name="total" calc="5*[field1]/(20+[field2])" />
</_form>
===Note===
If you are using the Calc function and you do not see any calculations, then you can have a look in the console of your browser. It will show you any mistakes you have made in the calculation.

===Links===
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number