Better form controls (autofill, autocomplete, type, input mode)

There are many ways to improve the UX of the form inputs. From custom styling and form labeling to using correct type, inputmode, and autocomplete attributes. Today, let’s focus on improving typing and autofill experience.

There are cases when instead of:

<input type="number">

…the following can be a better approach:

<input type="text" inputmode="decimal" autocomplete="one-time-code">

See more about autofill and inputmode in the appropriate specs.

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 related type and inputmode attributes, and make sure to specify an autocomplete attribute for an optimized user experience.

Better mobile inputs

Further reading

• 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

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/better-form-controls/

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.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.