The HTML inputmode attribute
Quick answer
The HTML inputmode attribute hints what kind of data a user will enter so mobile browsers show the most useful on-screen keyboard, e.g. numeric, tel, email, url, decimal or search. It is a global attribute, most valuable on form fields.
Overview
The inputmode attribute lets you optimize the on-screen keyboard without changing an input's type. For example, a one-time-code field can stay type="text" for validation but use inputmode="numeric" to summon a number pad.
It only affects the virtual keyboard layout; it does not perform validation or change the submitted value. Choose the mode that matches the expected characters, and combine it with enterkeyhint for the smoothest mobile experience.
Values
| Value |
|---|
| none | text | decimal | numeric | tel | search | email | url |
Example
<input inputmode="numeric" placeholder="Enter a numeric code" style="padding:8px; width:100%;">Best practices
- Use inputmode to bring up the right on-screen keyboard (numeric, email, and so on).
- Set autocapitalize appropriately: off for names and codes, sentences for prose.
- These are hints; do not rely on them for validation.
- Test on real mobile devices, where most of these take effect.
Frequently asked questions
What does the inputmode attribute do?
Hints the type of virtual keyboard to display for an editable field.
Is inputmode guaranteed to work?
No. It is a hint to on-screen keyboards; a browser may show a different layout or ignore it, and physical keyboards are unaffected.
What is the difference between inputmode and the input type?
The type attribute sets what the value means and how it is validated;
inputmode only suggests which on-screen keyboard layout to show.Is inputmode a global attribute?
Yes, it is a global attribute, so it can be set on any HTML element, most usefully on editable and form fields.