HTML <input> type="number"

The <input> tag with a type="number" attribute creates a numeric input field. A spinner allows the user to increment and decrement by a predefined value.

Example

#

An <input> element of type number.
Click the spinner to increment or decrement the number input value.

Quantity (0 - 100, increments of 5)

<form action="/tutorial/action.html">
  <fieldset>
    <legend>Quantity (0 - 100, increments of 5)</legend>

    <input type="number" name="number"
           min = "0" max="100" step="5" value="30"><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

Using nput type="number"

The <input type="number"> specifies a number input.

A number input only accepts numberic values.

When focused the field shows a spinner that increases or decreases the value by a given step size.

The following attributes specify number input restrictions:

  • max - maximum value allowed
  • min - minimum value allowed
  • step - numeric interval size
  • value - initial value

Syntax

<input type="number">

Browser support

Here is when type="number" support started for each browser:

Chrome
6.0 Sep 2010
Firefox
29.0 Apr 2014
IE/Edge
10.0 Sept 2012
Opera
10.0 Aug 2009
Safari
5.0 Sep 2010

You may also like

 Back to <input>
Guides