Widely available Recommended for mobile-heavy forms because it reduces input friction without changing validation semantics.

inputmode

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.

It is used primarily on <input> elements, but is usable on any element in contenteditable mode.

It's important to understand that the inputmode attribute doesn't cause any validity requirements to be enforced on input. To require that input conforms to a particular data type, choose an appropriate <input> element type. For specific guidance on choosing <input> types, see the Value section.

FormsMobileKeyboard

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
inputmode
66
79
95
12.1
66
12.2
DOM API
inputMode

The HTMLElement property inputMode reflects the value of the element's inputmode attribute.
66
79
95
12.1
66
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (23)
Notes 1 item(s)
Implementation note
  • Before iOS 13, `inputmode="none"` had no effect.

Syntax

HTML 
<input inputmode="numeric" pattern="[0-9]*" placeholder="数字のみ">
<input inputmode="decimal" placeholder="小数入力">
<input inputmode="tel" placeholder="電話番号">
<input inputmode="email" placeholder="メールアドレス">
<input inputmode="url" placeholder="URL">

Live demo

Input mode picker

Match inputmode to the type of value users are expected to enter.

PreviewFullscreen

Checkout fields

Use numeric, decimal, and search modes within the same task flow.

PreviewFullscreen

Mode comparison table

Show how a single text input can suggest different virtual keyboards.

PreviewFullscreen

Use cases

  • Numeric entry

    Use inputmode='numeric' for one-time codes, postal codes, or other digit-first fields.

  • Email and URL fields

    Email and URL keyboards surface helpful characters such as @, .com, or / on mobile devices.

Cautions

  • inputmode is only a hint. It does not validate the content, so keep the correct input type and validation rules as well.
  • Test real devices because virtual keyboard layouts vary across browsers and operating systems.

Accessibility

  • Pair inputmode with a clear label and input purpose so users understand both the field meaning and expected format.
  • Do not use numeric keyboards for data that may require letters, symbols, or international formats.

Related links