What to Use Instead of Number Inputs

two-factor-input.png

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:

iOS screen with a numeric input and a text message offering to auto-fill the two-factor auth

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: usernameemailnew-passwordcurrent-password.

Browsers and password managers have very good heuristics to find login forms on web pages, but using the username and current-password values make it very obvious. 

The post What to Use Instead of Number Inputs appeared first on CSS-Tricks.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
USA.css

.usa-stars {Show CSS} .usa-stars { background: linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.7in 0.43in, linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.3in 0.43in, linear-gradient(72deg, #fff 8.5%, transparent 8.5%)

Read More »
The Thirteenth Fourth

Well boy howdy. The 13th birthday of CSS-Tricks has rolled around. A proper teenager now, howabouthat? I always take the opportunity to do a bit

Read More »
sendinblue