Build a Better Mobile Input

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.

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

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

edit me

Edit type

Edit inputmode

Edit autocomplete

Input: (as it renders on your current device)

This input will autocomplete with the value: one-time-code

A one-time code used for verifying user identity.

source

Number-focused keyboard, differs from numeric type on ios by being more oriented towards solely inputing numbers

ios

android