Mobile Form Inputs — Keyboards, Autofill, and OTP Fields That Do Not Fight the User

Short answer: three attributes do most of the work. type and inputmode choose the keyboard, so a phone number field shows digits. autocomplete tells the browser what the field is, so it can fill name, address, email, and one-time codes. Add them to every field, use a single input for OTPs, never block paste, and keep labels visible. These are small changes with a large effect on how long a form takes on a phone.

Table of Contents

1. The Right Keyboard
2. Autofill
3. OTP Fields
4. Other Details
5. Finding Problems in Recordings
6. Key Takeaways

The Right Keyboard

On a phone, the keyboard takes half the screen. Showing letters when digits are needed forces a switch on every field.

Avoid type="number" for things that are not quantities. It strips leading zeros, allows scrolling to change the value by accident, accepts characters such as e, and behaves inconsistently. A pincode or card number is a string of digits, not a number.

Also set autocapitalize="off" and autocorrect="off" on emails, usernames, and codes, so the phone does not "correct" them.

Autofill

Browsers and password managers can fill a form in one tap if they know what each field is. The autocomplete attribute tells them.

<input type="text"  name="name"    autocomplete="name">
<input type="email" name="email"   autocomplete="email">
<input type="tel"   name="phone"   autocomplete="tel">
<input type="text"  name="address" autocomplete="address-line1">
<input type="text"  name="city"    autocomplete="address-level2">
<input type="text"  name="state"   autocomplete="address-level1">
<input type="text"  name="pincode" autocomplete="postal-code" inputmode="numeric">

For payment: cc-name, cc-number, cc-exp, cc-csc. For accounts: username, current-password, new-password.

Common ways sites break autofill:

• `autocomplete="off"` everywhere. Often added by habit. It makes every visitor type everything.
• Non-standard field names with no autocomplete value, so the browser guesses wrong.
• Custom components that are not real input elements.
• Splitting one value across fields, such as three boxes for a phone number.
• No `form` element around the fields.
• Fields that reject the autofilled format, such as a phone field that refuses the +91 prefix the browser supplies.

Accept what autofill provides, and clean it up yourself. Strip spaces, the country code, and dashes in code instead of showing an error (error messages).

Note that embedded in-app browsers often have little or no saved autofill data, which is one reason forms from social ads are abandoned more (in-app browsers).

OTP Fields

One-time passwords are a major drop-off point in Indian checkouts and logins.

Use one input, not six boxes.

<input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*">

autocomplete="one-time-code" lets the phone offer the code from the SMS above the keyboard, so the user taps once without leaving the page.

Six separate boxes commonly break paste, break the keyboard suggestion, mishandle backspace, and confuse screen readers. If the design requires the look of separate boxes, style a single input to appear that way.

Also:

• Allow paste.
• Show the number the code was sent to, with a way to change it.
• Show a resend timer, and enable resend after it ends.
• Submit automatically when the last digit is entered, but leave a visible button too.
• Keep the page state if the user switches to the messages app and back.
• Explain failures. "Incorrect code" and "Code expired" are different problems.
• Offer an alternative such as a call or email when SMS does not arrive.

Other Details

• Labels above fields, always visible. A placeholder that disappears on typing leaves the user unsure what the field was.
• Font size of at least 16 pixels in inputs. Smaller text makes iOS zoom the page on focus.
• Large tap targets, with space between them.
• Do not block paste on any field, including passwords and account numbers. Blocking paste breaks password managers and increases errors.
• Show and hide for passwords.
• Validate on leaving a field, not on every keystroke, and not only on submit (form conversion).
• Use the right `enterkeyhint`, such as next or done, so the keyboard's action key is helpful.
• Keep the submit button visible above the keyboard (mobile checkout).
• Derive what you can. City and state from the pincode.
• Prefer a short list of radio buttons to a dropdown for five or fewer options.

Finding Problems in Recordings

Filter session recordings to mobile sessions that reached a form and did not submit (form abandonment).

Input values are masked in DeepSync recordings, so you see the interaction and its timing without the data typed (masking). That is enough: the hesitation and repetition tell the story.

Then test your own form on a phone, with an empty browser profile and with a full one.

Key Takeaways

• type and inputmode choose the keyboard.
• autocomplete enables one-tap filling; do not turn it off.
• Use a single OTP input with one-time-code.
• Never block paste; accept and clean varied formats.

Conclusion

A mobile form is typed with one thumb on a small screen. Every attribute that saves a tap is a courtesy, and a conversion.

Start free with DeepSync.