March 6th, 2020
You might reach for
<input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems.
Hanna Laakso documents the problems for GOV.UK. This is what they landed on:
<input type="text" inputmode="numeric" pattern="[0-9]*">
inputmode attribute is pretty great, and we have a deep dive on that.
Phil Nash came to (almost) same exact conclusion, and blogged about improving the experience of a two-factor auth code input on the Twilio blog:
<input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
That last attribute is interesting and new to me. It means you get this super extra useful experience on browsers that support it:
There are other autocomplete values, as Phil writes:
There are many autocomplete values available, covering everything from names and addresses to credit cards and other account details. For sign up and login there are a few autocomplete values that stand out as useful hints:
Browsers and password managers have very good heuristics to find login forms on web pages, but using the
current-passwordvalues make it very obvious.