HTML inputmode Attribute
The HTML inputmode attribute provides a hint about the type of input a user is expected to enter, allowing browsers to display an appropriate virtual keyboard on devices that provide one.
Global Attribute
The inputmode attribute is a global attribute and can be specified on HTML elements. It is primarily useful on form controls and other elements whose content can be edited by the user.
The attribute does not change the type of data an element accepts or perform input validation. Instead, it provides a hint that browsers can use when choosing an input mechanism, such as a virtual keyboard.
inputmode Values
The inputmode attribute is an enumerated attribute. The following keywords describe the type of input mechanism that would be most useful for the user.
| Value | Description |
|---|---|
none |
Indicates that a virtual keyboard should not be displayed, such as when the webpage provides its own input control. |
text |
Displays a standard text keyboard appropriate for the user's locale. This is the default state. |
decimal |
Displays a keyboard intended for entering fractional numeric values, usually including a locale-appropriate decimal separator. |
numeric |
Displays a keyboard intended primarily for entering the digits 0 through 9. |
tel |
Displays a telephone keypad that typically includes digits and telephone-related characters. |
search |
Displays a keyboard optimized for entering search terms, which may include a search-specific action key. |
email |
Displays a keyboard optimized for entering email addresses, often providing convenient access to characters such as @. |
url |
Displays a keyboard optimized for entering URLs, often providing convenient access to characters commonly used in web addresses. |
Using inputmode with <input>
The inputmode attribute is commonly used with the <input> element. For example, a field that expects a numeric code can request a numeric virtual keyboard without changing the field to type="number".
<label for="code">Verification Code:</label>
<input type="text" id="code" name="code" inputmode="numeric">This can be useful when the value consists of digits but is not intended to be treated as a mathematical number.
Using inputmode with contenteditable
The inputmode attribute can also provide an input hint for editable content created with contenteditable.
<div contenteditable="true" inputmode="decimal"></div>On a device with a virtual keyboard, the browser can use the decimal value as a hint to provide a keyboard suited to entering decimal numbers.
inputmode vs. type
The inputmode attribute does not replace the type attribute on an <input> element. The two attributes serve different purposes.
| Attribute | Description |
|---|---|
type |
Defines the type and behavior of an <input> control and can affect validation. |
inputmode |
Provides a hint about the input mechanism or virtual keyboard that may be most useful. |
For example, a telephone number field should normally use type="tel", while inputmode="numeric" can be useful for a text field that expects digits but should retain normal text-field behavior.
Common Mistakes
Do not use inputmode as a substitute for validation. The attribute only provides an input hint and does not restrict what the user can enter.
<!-- Does not restrict the field to numbers -->
<input type="text" inputmode="numeric">Do not assume that every device will display exactly the same keyboard. The keyboard presented for a particular value can vary by browser, operating system, device, and locale.
When an appropriate <input> type exists for the actual data being collected, use that type to provide the correct semantics and behavior rather than relying only on inputmode.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The inputmode global attribute is widely supported in current core browsers. The exact virtual keyboard presented can vary by browser, operating system, language, and device.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the inputmode Attribute
The example uses different inputmode values to provide virtual keyboard hints for several text fields. The effect is easiest to see on a device that uses a virtual keyboard.
Summary
The HTML inputmode attribute provides a hint about the input mechanism or virtual keyboard that would be most useful when a user edits content. Values such as numeric, decimal, tel, email, url, and search can help browsers present a keyboard suited to the expected input, but the attribute does not enforce validation or replace an appropriate <input> type.