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.
Are these attributes guaranteed to work?
No. They are hints that browsers and on-screen keyboards may honor or ignore, especially on desktop.
Which elements do they apply to?
They are global attributes, but they mainly affect editable and form fields.
Is inputmode a global attribute?
Yes — it is a global attribute, so it can be set on any HTML element (it is a global attribute), most usefully on editable and form fields.