inputmode

inputmode attribute

The inputmode attribute gives browsers a clue about the expected data type, enabling them to show the suitable virtual keyboard. It is primarily used with <input> elements but can also be applied to any element with the contenteditable attribute.

Syntax

<input type="text" inputmode="value">

Example

<input type="text" inputmode="numeric" placeholder="Enter numbers only" />

The inputmode attribute specifies the type of virtual keyboard to display, in this case, a numeric keypad for number input.

Key Points

• No Validation: The inputmode attribute does not enforce data validation; it simply suggests the type of keyboard to display.
• Input Type Selection: To enforce specific input types, use the corresponding <input> element type.

Values

• none: No virtual keyboard; suitable for custom keyboard controls.
• text: Standard keyboard; the default setting.
• decimal: Keyboard designed for fractional numbers, featuring digits and a decimal separator.
• numeric: Keyboard limited to digits (0–9).
• tel: Telephone keypad with digits, asterisk (*), and pound (#) keys.
• search: Keyboard tailored for search inputs.
• email: Keyboard optimized for entering email addresses, usually including the @ symbol.
• url: Keyboard designed for URL input, often highlighting the / key.

Using the inputmode attribute enhances user experience by providing the most suitable virtual keyboard for the expected input.

See also

• enterkeyhint global attribute.

Conclusion

The inputmode attribute in HTML suggests the type of virtual keyboard to display based on the expected input. It enhances user experience by aligning the keyboard with the input type, such as numeric or email. This attribute helps guide users to enter data more efficiently without enforcing validation.