There are many ways to improve the UX of the form inputs. From custom styling and form labeling to using correct
autocomplete attributes. Today, let’s focus on improving typing and autofill experience.
There are cases when instead of:
…the following can be a better approach:
<input type="text" inputmode="decimal" autocomplete="one-time-code">
It’s not always obvious which combination of attributes will be optimal. Luckily, there is a great tool that helps to test and choose the best input for any job.
Build a Better Mobile Input
How to make sure that we are using the best solution in a given case? One way is to test with Better Mobile Input tool.
By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices.
Experiment with different combinations of the relatedBetter mobile inputs
inputmodeattributes, and make sure to specify an
autocompleteattribute for an optimized user experience.
- Better Form Inputs for Better Mobile User Experiences
- Why the GOV.UK Design System team changed the input type for numbers
- Form design: from zero to hero all in one blog post
Thanks for reading. If you liked it, consider sharing it with friends via:
Let's be in touch!
Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.