inputmode
Tells phones and tablets which on-screen keyboard to show for a field, without changing what the field accepts.
Syntax
<input type="text" inputmode="numeric">Parameters
| Parameter | Type | Description |
|---|---|---|
| inputmode | text | numeric | decimal | tel | email | url | search | none | `numeric` — digits only, `decimal` — digits and a decimal separator, `tel`, `email`, `url`, `search`, `text` (default) or `none` (no keyboard). |
Examples
A one-time code field: a digit keyboard on phones, but no number spinner and leading zeros are kept:
<label>
Code from SMS
<input type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6">
</label>A price with a decimal point:
<label>Price, $ <input type="text" inputmode="decimal" placeholder="9.99"></label>Notes
Use it when the value is made of digits but is not really a number: codes, card numbers, postal codes — type="number" would add arrows, drop leading zeros and accept e. On a desktop with a physical keyboard the attribute does nothing. Check the value with pattern or on the server, since inputmode does not validate.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- type — The kind of an `<input>` field: from text and numbers to a date, colour and file.
- pattern — A pattern (regular expression) the field value must match.
- autocomplete — Tells the browser which saved data to fill into a field.
In the tutorial
- Input types — The type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.