What does the HTML inputmode attribute do, and how is it different from an input's type attribute?

## Two attributes, two jobs A common interview probe is to ask a candidate to distinguish a *behavioural* attribute from a *presentational hint*. `type` and `inputmode` are the cleanest example in HTML. `type` selects an input **state**. The state determines the widget the browser renders, the grammar the value must satisfy, whether the browser rewrites an unparseable value, which built-in validity checks apply, and which implicit ARIA role the control exposes. Change the type and you change what the field *is*. `inputmode` is a **hint to the input method**. It tells a device with a software keyboard which layout would be most useful. Nothing else. It does not validate, does not sanitise, does not change the role, does not affect what a hardware keyboard can type, and the user can always switch layouts manually. ## The values and what they buy - `none` — request no virtual keyboard at all. Used when the page supplies its own on-screen input surface, such as a custom PIN pad or a calculator widget. Use it sparingly: it removes the user's normal way to type. - `text` — the standard keyboard; the default for text-shaped fields. - `numeric` — digits only. Correct for PINs, postcodes, verification codes, quantities entered as strings. - `decimal` — digits plus the locale's decimal separator, and typically no plus/minus. Correct for money and measurements. - `tel` — the telephone keypad, usually with `+`, `*` and `#`. - `search` — a keyboard whose action key is oriented to searching. - `email` — a layout with `@` and `.` on the primary layer. - `url` — a layout with `/` and often a `.com`-style key. The distinction people miss most often is `numeric` versus `decimal`: a currency field with `inputmode="numeric"` gives a keypad on which the user cannot type the decimal point. ## Why the pairing exists ```html <label for="otp">Verification code</label> <input id="otp" name="otp" type="text" inputmode="numeric" maxlength="6"> ``` Before `inputmode` was widely supported, `type="number"` was the only way to get a numeric keypad on a phone — which is how a whole generation of forms ended up modelling postcodes and codes as quantities, with spin buttons, stepping keys and a value that empties itself when it cannot be parsed. `inputmode` decouples the keyboard from the semantics: `type="text"` keeps the value a plain string with a textbox role, while the hint still gets the keypad. Any time you want "the keyboard of X without the behaviour of X", this is the tool. The inverse holds too. `inputmode` never rescues a wrong type. Putting `inputmode="text"` on a number input does not remove the spinner or the value sanitising, because those come from the state, not the keyboard. ## It is a global attribute `inputmode` is defined as a global attribute, not an input-only one, so it applies to editing hosts as well: ```html <div contenteditable="true" inputmode="numeric">42</div> ``` That is a small but genuine differentiator in an interview, because it shows you know the attribute is about the *input method* rather than about form controls specifically. ## enterkeyhint `enterkeyhint` is the other virtual-keyboard hint worth knowing. It relabels the action key — the values are `enter`, `done`, `go`, `next`, `previous`, `search` and `send`. ```html <input type="search" name="q" enterkeyhint="search"> ``` Critically, it is cosmetic. Labelling the key `next` does not make the browser move focus to the next field; the key still does whatever it would have done, and if you want a different action you implement it. It is a promise to the user about what will happen, so a mismatch between the label and the actual behaviour is worse than no hint at all. ## What to say when asked Lead with the one-line difference: `type` decides what the control *is*, `inputmode` decides what keyboard the device *offers*. Then give the pairing that proves you understand the split — `type="text" inputmode="numeric"` for identifiers — and note the honest limits: it is a hint, it is ignorable, it does nothing on a laptop, and it validates nothing.