inputmode: Requesting The Right Mobile Keyboard

It's a common and understandable assumption that inputmode="numeric" somehow restricts a field to numeric input, similar to how type="number" or pattern constrain acceptable values — but this is incorrect. inputmode exclusively requests which on-screen virtual keyboard layout a mobile browser should display; it has zero effect on what characters can actually be typed, pasted, or ultimately submitted.

Actual value restriction still requires the mechanisms covered earlier in this module — type, pattern, min/max. A field can (and often should, for the leading-zero use case covered later) use inputmode alongside these separate validation mechanisms, understanding they solve entirely different problems.

numeric requests a digit-focused keypad, ideal for whole-number values like quantities or PIN codes. tel requests a phone-dial-style layout appropriate for phone numbers. email requests a keyboard with an easily accessible @ key and often no autocapitalize interference. url optimizes for URL entry with quick access to / and common domain shortcuts. decimal is similar to numeric but crucially includes a decimal point key, appropriate for values like prices that may include fractional components.

Choosing the value that actually matches the expected data shape — rather than defaulting to the generic system keyboard for everything — measurably improves mobile form completion speed and reduces typing errors.

<input type="number"> treats its value as an actual numeric value internally, which means leading zeros are silently stripped — a value entered or set as "007" becomes simply 7. For genuinely numeric-shaped data where leading zeros are semantically meaningful — certain ID formats, some postal codes, product codes — this behavior is actively wrong.

The correct pattern is type="text" (preserving the exact string as entered) combined with inputmode="numeric" (still showing the appropriate numeric mobile keyboard) and pattern="\d*" (still validating that only digits were entered) — getting the correct mobile UX without type="number"'s data-mangling side effect.

Requesting The Right Keyboard, Not Just The Right Input Type. On mobile, the visible on-screen keyboard matters enormously for typing speed and accuracy. inputmode requests a specific keyboard layout — numeric keys, an @ symbol, phone-dial layout — independent of the input's actual type or validation behavior.

inputmode Is About The Keyboard, Not Validation. A common misconception: inputmode doesn't validate or constrain the actual entered value at all — that's still type, pattern, min/max from earlier lessons. inputmode purely requests which on-screen keyboard layout mobile browsers should display.

inputmode's Actual Effect. Does adding inputmode="numeric" to an <input type="text"> restrict what characters can actually be typed or submitted?

• →Yes, it prevents any non-numeric character from being entered
• →No, it only requests a numeric on-screen keyboard; actual value restriction requires separate constraints like pattern
• →It automatically converts the field's type to number

Common inputmode Values Match Common Data Types. numeric shows a digit-focused keypad, tel shows a phone-dial-style layout, email shows a keyboard with an easily accessible @ symbol, url shows one optimized for URLs with / and .com shortcuts, and decimal allows a decimal point unlike numeric.

Choosing The Right inputmode. A field collects a price value that may include cents, like '19.99'. Why might inputmode="decimal" be more appropriate than inputmode="numeric"?

• →They're functionally identical; either works equally well
• →decimal's keyboard includes a decimal point key, which numeric's typically omits
• →numeric is deprecated in favor of decimal

inputmode Complements type, It Doesn't Replace It. For genuinely numeric data, <input type="number"> already implies an appropriate mobile keyboard in most browsers — inputmode becomes most valuable specifically for type="text" fields that represent numeric-shaped data but need text-level validation flexibility (like a numeric ID that might have a required leading zero, which type="number" would strip).

inputmode With type="text". Why might a developer use type="text" with inputmode="numeric" instead of simply using type="number" for a numeric-looking ID field?

• →There's no real reason; type="number" is always strictly better
• →type="number" strips leading zeros and doesn't support values like "007" as text
• →inputmode literally cannot be combined with type="number"

Input Modes Mastered. You now understand that inputmode is purely a keyboard-layout hint independent of validation, know the common values matching typical data shapes, and understand the genuine use case for pairing type="text" with inputmode when type="number" would incorrectly strip meaningful leading zeros.

Show The Right Mobile Keyboard. inputmode="numeric" tells mobile browsers to show a numeric keypad, without changing validation.