How to render a number only input field
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
max attributes to specify a minimum and maximum value that the field can have.
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.
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.
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.