Definition and Usage
The inputmode attribute explicitly specifies the virtual keyboard input mode for input fields or editable content on devices with virtual keyboards, such as mobile phones and tablets.
(It serves as a hint to the browser to display the most appropriate keyboard type.)
This attribute explicitly sets the virtual keyboard input mode for HTML input controls or elements made editable using contenteditable="true",
providing a more user-friendly experience, especially for users on mobile devices.
Additional Explanation
The contenteditable attribute
specifies whether the content of an element is editable.
When this attribute is set to true, the element's content can be edited,
and when set to false, the content cannot be edited.
Basic Example
When the inputmode attribute is set to "numeric" as in the example above, the browser will display a virtual keyboard like the one shown in the screenshot below.
Note:
The appearance and user interface of the virtual keyboard may vary depending on the device, browser, and user language settings.
inputmode Attribute Values
inputmode |
Description | Example The appearance and user interface of the virtual keyboard may vary depending on the device, browser, and user language. |
|---|---|---|
inputmode="none" |
No virtual keyboard should be displayed. | No virtual keyboard appears. Use this when the page implements input controls via its own keyboard or input device, such as a numeric keypad randomly arranged for security in a financial app. |
inputmode="text" |
A virtual keyboard should be displayed to allow text input for the user's current locale. | 
|
inputmode="tel" |
A virtual keyboard optimized for entering telephone numbers should be displayed. It should include keys for digits 0–9, #, and *.
If telephone number input is required, it is better to use <input type="tel">, which semantically sets this mode by default. |
|
inputmode="url" |
A virtual keyboard suitable for URL entry should be displayed. It should provide keys to assist with entering /, ., and quick input for common strings like www. or .com.
For required URL input, it is better to use <input type="url">, which sets this mode semantically by default. |
|
inputmode="email" |
A virtual keyboard for email input should be displayed. It should include keys to assist with entering @ and ..
For required email input, it is better to use <input type="email">, which semantically sets this mode by default. |
|
inputmode="numeric" |
A virtual keyboard optimized for numeric input should be displayed. This is useful for PIN entry.
For required numeric input, it is better to use <input type="number">, which sets this mode semantically by default. |
|
inputmode="decimal" |
A virtual keyboard suitable for decimal number input should be displayed, including number keys and the locale-specific decimal separator. | 
|
inputmode="search" |
A virtual keyboard optimized for search input should be displayed.
For required search queries, it is better to use <input type="search">, which sets this mode semantically by default. |
|
Note:
If the inputmode attribute is not specified (or if the browser does not support it), the browser determines which virtual keyboard to display. It may use contextual information such as the <input> element's type or pattern attributes to decide the most appropriate virtual keyboard for the user.
Note:
To explicitly set the label (action label) displayed on the Enter key of the virtual keyboard, use the enterkeyhint attribute.
Specifications
| Specification | |
|---|---|
inputmode
|
HTML Standard #attr-inputmode |
Browser compatibility
| Desktop | ||||
|---|---|---|---|---|
| Attribute |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
inputmode
|
66 | 79 | 95 | 12.2 |
On Safari versions prior to iOS 13, inputmode="none" had no effect.
| Mobile | |||
|---|---|---|---|
| Attribute |
Mobile Chrome
|
Mobile Firefox
|
Safari
|
inputmode
|
66 | 95 | 12.2 |