Описание тега html5-input-number

With HTML5, new input types were created to update how users interact with forms and to help validate the data. One of these new types was the input type "number". In order to use this tag, the post must be regarding HTML5 and the use of input type "number".

To create input type "number", the basic syntax is:

<input type="number">

This will create a text box. A noticeable difference is when the user clicks inside the text box, stepper arrows will appear to increment or decrement the value. If the value attribute is filled out, the arrows will start from that value, otherwise if no value is set then the arrows will start at 0. Also, it is possible to decrement into negative numbers. Stepper arrows are supported by most major browsers except Microsoft Edge.

Besides the standard value, type, id, and name attributes, the number input introduces the following:

  • max - the maximum number to accept
  • min - the minimum number to accept
  • placeholder - a value to display within the input when it's empty
  • readonly - boolean to determine if input is readonly (default is false)
  • step - a number for the arrows to increment or decrement by (default is 1)

One thing to note about this input is that it accepts only integers by default. In order for it to accept decimals, use the following:

<input type="number" step="0.01">

References