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

Share

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 UX, web development, and productivity tips via e-mail.

Comments

If you want to comment, write a post on social media and @mention me or write to me directly on the contact page.