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: <_input type="number" name="field1" /><br>
  field2: <_input type="number" name="field1" /><br>
  Calculation( 5 * field1 / ( 20 + [field2] ): <_input type="number" name="total" calc="5*[field1]/(20+[field2]" />
</_form>

FORM CANNOT BE RENDERED, NOT VALIDATED

Note

Links

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