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]*">The 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:
username,new-password,current-password.
Browsers and password managers have very good heuristics to find login forms on web pages, but using theusernameandcurrent-passwordvalues make it very obvious.
