HTML5 input type=”number” and step granularity

or how I learnt the hard way about the how the step attribute works.

Being an old (VB4,5,6) windows developer, I mistook the “step” attribute on the <input type=”number”…/> HTML 5 element for what it used to be. It not only controls what the step is if you press the spin control but also defines what numbers are ALLOWED in the field.

For example, with the default step of “1” you are only allowed to enter integers (that is whole numbers). With a step of 2 you are only allowed to enter even integers. With a step of 0.1, you are allowed to enter numbers with a single decimal place, 0.5 means only half integers and integers (…-0.5,0,0.5, 1.0, 1.5…).

So if you find yourself getting errors from your browser when trying to enter 41.2 into a number field, try setting step to either “0.1” or “any”.

More reading over at HTML: The Markup Language on the W3C website.