Name
number
Type
input
Synopsis
How to render a number only input field
Description
elements of type "number" 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 step attribute, which takes as its value a number specifying the step amount.
You can use the min and max 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)
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
<form action="get">
field1: e.g. try 20 <input type="number" name="field1" /><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])" />
</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
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 :
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"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.
