I was working on a project the other day building a user information input form off of a mock design. Simple enough and then I got to an input requiring numbers for US Postal Codes. “Great!” I thought, “I can use an <input type=’number’> in my form.” Everything was spiffy until I tried it in various browsers. Let’s have a quick look at numeric inputs and browser differences.
Numeric Inputs
In Chrome, the form was rendered as:
Looks pretty good, right? Nice and clean. Then I opened it in Firefox:
What the heck? I didn’t add a number spinner in there. After digging around for a bit this is one of the wonderful side affects of a lack of specificity in the official specification. Further, if one continues to read through that particular specification (4.10.5.1.12 Number state (type=number)) one learns a couple of things.
- This specification does not define what user interface user agents are to use, and
- That it would be inappropriate for credit card numbers or US postal codes.
Okay, so I choose the wrong type for my input field. But what is the deal with that spinner? What if I just want an actual number field but no spinner? Well, you smack it out of there with some CSS and the appearance property. If one uses:
/* Firefox - remove spinner */
input[type=number] {
-moz-appearance: textfield;
}The lovely spinner disappears. I won’t cover the rest of the browsers as they all are similar but slightly different.
When then, do we use <input type=”number”>? Again, in looking at the specification, one would use it when one needs a number that is strictly speaking a number. It is also useful, with the spinner or not, if we want to limit the range and stepping of the number as follows:
<input type=number min=0 step=0.01 name=price>
Conclusion
Another wonderful discovery of different renderings in different browsers. But, not that we know, we can allow our users to have the same experience in both browsers.
Happy coding!
