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>
Please log in first.
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
