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

Newsletter

Level up your skills with useful web development & UX tips via e-mail.

Comments

If you have any thoughts, please contact me on LinkedIn or see the contact page for more options.