The Current State of HTML5 Forms

The min, max, and step Attributes

<input type=number min=0 max=100 step=5>

Live Demo



Firefox
11-
Safari
5+
Safari Mobile
5-
Chrome
6+
Opera
10.6+
IE
10+
Android
2.3-
No support Supported No support Supported Supported Supported No support

Supported Browser Screenshots

Chrome 10

Unsupported Browser Screenshots

Firefox 3.6

The Low Down

To use the min, max, and step attributes the input first needs a type of number. Small arrow widgets are applied after the input which increment the current value of the input up or down.

  • You don't need to use all three, each work independently.
  • Falls back to regular text input.
  • If step is not applied number will increment by 1.
  • min and max imply validation of that value.
  • Up/Down widgets taken from total width of input (Chrome 10 tested).
  • Mobile Safari on iOS 3.1 used to make the default value of the input half way between min and max value. Mobile Safari on iOS 4 stopped doing that and displays no default value if none supplied.
  • Scrolling on mouse increments number (tested in Chrome 10)