Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides