The “inputmode” attribute is not supported in all browsers. Please be sure to test, and consider using a polyfill.

The inputmode attribute is a global attribute that can be applied to any element that is editable, including <input> elements and elements with contenteditable. It tells the browser which type of virtual keyboard to present—for example, a numeric keypad, a telephone dialpad, or a URL-optimized keyboard. This is particularly useful on mobile devices where the on-screen keyboard can be tailored to the expected input.

The W3C validator raises this as an informational warning, not an error. The inputmode attribute is part of the WHATWG HTML Living Standard and is valid HTML. However, the validator flags it because browser support, while now quite broad, has historically been inconsistent. Older versions of Safari, Firefox, and some less common browsers lacked support for certain inputmode values. When inputmode is not recognized, the browser simply ignores it and shows the default keyboard—so it degrades gracefully and won’t break your page.

The valid values for inputmode are:

• none — No virtual keyboard; useful when the page provides its own input interface.
• text — Standard text keyboard (the default).
• decimal — Numeric keyboard with a decimal separator, ideal for fractional numbers.
• numeric — Numeric keyboard without a decimal separator, ideal for PINs or zip codes.
• tel — Telephone keypad layout with digits 0–9, *, and #.
• search — A keyboard optimized for search input, which may include a “Search” or “Go” button.
• email — A keyboard optimized for email entry, typically including @ and . prominently.
• url — A keyboard optimized for URL entry, typically including / and .com.

It’s important to understand the difference between inputmode and the type attribute. The type attribute on <input> defines the semantics and validation behavior of the field (e.g., type="email" validates that the value looks like an email address). The inputmode attribute only affects the virtual keyboard hint and has no impact on validation or semantics. This makes inputmode especially useful when you need a specific keyboard but the field type doesn’t match—for example, a numeric PIN field that should remain type="text" to avoid the spinner controls that come with type="number".

How to fix it

Since this is a warning rather than an error, no fix is strictly required. However, you should:

1. Test on your target browsers and devices to confirm the virtual keyboard behaves as expected.
2. Pair inputmode with the appropriate type and pattern attributes to ensure proper validation and semantics, since inputmode alone does not enforce any input constraints.
3. Accept graceful degradation — in browsers that don’t support inputmode, users will simply see the default keyboard, which is still functional.

There is no widely adopted polyfill for inputmode because it controls a browser-native UI feature (the virtual keyboard) that JavaScript cannot directly replicate. The best strategy is to treat it as a progressive enhancement.

Examples

Using inputmode for a numeric PIN field

This example triggers the validator warning. The code is valid, but the validator advises caution:

<label for="pin">Enter your PIN:</label>
<input id="pin" type="text" inputmode="numeric" pattern="[0-9]*">

Here, type="text" keeps the field free of number-spinner controls, inputmode="numeric" requests a numeric keypad on mobile, and pattern="[0-9]*" provides client-side validation. This combination is the recommended approach for PIN or verification code fields.

Using inputmode for a currency amount

<label for="amount">Amount ($):</label>
<input id="amount" type="text" inputmode="decimal" pattern="[0-9]*\.?[0-9]{0,2}">

The decimal value displays a numeric keyboard that includes a decimal point, which is ideal for monetary values.

Falling back to type when inputmode is unnecessary

If the semantic input type already provides the correct keyboard, you don’t need inputmode at all:

<label for="email">Email address:</label>
<input id="email" type="email">

<label for="phone">Phone number:</label>
<input id="phone" type="tel">

<label for="website">Website:</label>
<input id="website" type="url">

Using the appropriate type gives you both the optimized keyboard and built-in browser validation, making inputmode redundant in these cases.

Using inputmode on a contenteditable element

The inputmode attribute also works on non-input elements that accept user input:

<div contenteditable="true" inputmode="numeric">
  Enter a number here
</div>

This is one scenario where inputmode is especially valuable, since contenteditable elements don’t have a type attribute to influence the keyboard.

Learn more:

caniuse.com

Can I Use: inputmode browser compatibility chart

→

WHATWG Spec

HTML Living Standard: the inputmode attribute

→

css-tricks.com

CSS Tricks: Everything You Ever Wanted to Know About inputmode

→