I learned something new about number input fields.
So, I already knew about the number input type (as well as the other different types of input fields you can have: color, range, search, date and time). I also knew about the
max attributes, — but I didn’t know about the
Until today, I’ve only ever used number inputs for integers, not floats (decimals). So of course, I thought this would work:
<input type="number" name="price">
And it does work, as long as that price is in whole dollars, no cents. But as soon as you put a decimal value in there, any modern browser will stop the form from being submitted.
If you want a number input to accept decimal values, you need to add the
step attribute. If you want to accept a price — that is, a decimal value up to hundredths — you’d do this:
<input type="number" name="price" step="0.01">
I created a little demo of this very thing in action. (Note: most modern browsers, and even Internet Explorer 11, will provide built-in form validation if the input value does not match the requirements. In older versions of iOS Safari, however, this is not the case.)
That value is returned as a string, not as a numeric value — even though the field is defined as a number. Make sure you use the correct parse function to get the numeric value:
parseInt() for integers,
parseFloat() for decimals.
Form fields have a handy little property called
valueAsNumber, but Internet Explorer doesn’t seem to like it. It always returns
NaN for me, so I don’t recommend using it if you need to support IE.
I’m not sure if I should be ashamed because as a (self-proclaimed) front-end developer I never knew this, or if I should be happy because I learned something. I think it’s a little of both. As my dad always says, “we’re not born knowing these things.”