Skip to content
html.sh

The inputmode Attribute

The inputmode Attribute

Section titled “The inputmode Attribute”
Global Attribute

The inputmode attribute provides a hint to browsers about what type of virtual keyboard to display on mobile devices and tablets. Unlike the type attribute, inputmode focuses solely on keyboard optimization without affecting validation or input semantics.

Syntax

Section titled “Syntax”
<element inputmode="value">Content</element>

Values

Section titled “Values”
ValueKeyboard TypeBest For
noneNo keyboardCustom keyboard implementations
textStandard QWERTYGeneral text input (default)
decimalNumber pad with decimal pointPrices, measurements (12.99)
numericNumber pad onlyPIN codes, quantities (1234)
telTelephone keypadPhone numbers
searchSearch-optimized keyboardSearch queries (may include suggestions)
emailEmail keyboardEmail addresses (with @)
urlURL keyboardWeb addresses (with .com, /)

Examples

Section titled “Examples”

E-commerce Payment Form

Section titled “E-commerce Payment Form”
Result

All inputmode Values Demo

Section titled “All inputmode Values Demo”
Result

Contact Form with Optimized Keyboards

Section titled “Contact Form with Optimized Keyboards”
Result

inputmode vs type Attribute

Section titled “inputmode vs type Attribute”

Key Differences

Section titled “Key Differences”
<!-- type affects validation AND keyboard -->
<input type="number"> <!-- Only allows numbers, shows number keyboard -->


<!-- inputmode only affects keyboard -->
<input type="text" inputmode="numeric"> <!-- Allows any text, shows number keyboard -->

When to Use inputmode

Section titled “When to Use inputmode”

Use inputmode when:

  • You need flexible input validation
  • The type attribute is too restrictive
  • You want better mobile UX without type constraints
<!-- Credit card with spaces/dashes -->
<input type="text" inputmode="numeric" placeholder="1234 5678 9012 3456">


<!-- Phone with formatting -->
<input type="text" inputmode="tel" placeholder="+1 (555) 123-4567">


<!-- Currency with symbol -->
<input type="text" inputmode="decimal" placeholder="$99.99">

Best Practices

Section titled “Best Practices”

1. Match Keyboard to Content

Section titled “1. Match Keyboard to Content”
<!-- Good: Numeric keyboard for numbers -->
<input type="text" inputmode="numeric" placeholder="Quantity">


<!-- Good: Decimal for prices -->
<input type="text" inputmode="decimal" placeholder="Price">


<!-- Good: Email keyboard for email -->
<input type="email" inputmode="email">


<!-- Bad: Text keyboard for numbers -->
<input type="text" inputmode="text" placeholder="Phone">

2. Combine with Pattern for Validation

Section titled “2. Combine with Pattern for Validation”
<!-- Show number keyboard but validate format -->
<input
  type="text"
  inputmode="numeric"
  pattern="[0-9]{16}"
  placeholder="Card number">


<!-- Decimal input with validation -->
<input
  type="text"
  inputmode="decimal"
  pattern="[0-9]+\.?[0-9]*"
  placeholder="Amount">

3. Use with Autocomplete

Section titled “3. Use with Autocomplete”
<input
  type="text"
  inputmode="numeric"
  autocomplete="cc-number"
  placeholder="Card number">


<input
  type="tel"
  inputmode="tel"
  autocomplete="tel"
  placeholder="Phone">

4. Consider User Expectations

Section titled “4. Consider User Expectations”
<!-- ZIP code: numeric is better than tel -->
<input type="text" inputmode="numeric" placeholder="ZIP Code">


<!-- Verification code: numeric keyboard -->
<input type="text" inputmode="numeric" placeholder="6-digit code">

Common Use Cases

Section titled “Common Use Cases”

Financial Inputs

Section titled “Financial Inputs”
<!-- Price -->
<input type="text" inputmode="decimal" placeholder="0.00">


<!-- Credit card -->
<input type="text" inputmode="numeric" autocomplete="cc-number">


<!-- CVV -->
<input type="text" inputmode="numeric" maxlength="4" autocomplete="cc-csc">

Contact Information

Section titled “Contact Information”
<!-- Phone -->
<input type="tel" inputmode="tel">


<!-- Email -->
<input type="email" inputmode="email">


<!-- Website -->
<input type="url" inputmode="url">

Measurements and Quantities

Section titled “Measurements and Quantities”
<!-- Quantity (whole numbers) -->
<input type="text" inputmode="numeric" min="1">


<!-- Weight (decimal) -->
<input type="text" inputmode="decimal" placeholder="0.0 kg">


<!-- Temperature -->
<input type="text" inputmode="decimal" placeholder="98.6°F">

Codes and IDs

Section titled “Codes and IDs”
<!-- PIN code -->
<input type="text" inputmode="numeric" maxlength="4" placeholder="PIN">


<!-- Postal code -->
<input type="text" inputmode="numeric" placeholder="12345">


<!-- Product code -->
<input type="text" inputmode="numeric" placeholder="SKU">

JavaScript API

Section titled “JavaScript API”
const input = document.getElementById('myInput');


// Set inputmode
input.inputMode = 'numeric';
input.setAttribute('inputmode', 'numeric');


// Get current value
console.log(input.inputMode); // "numeric"


// Change dynamically based on input
input.addEventListener('focus', () => {
  if (input.value.includes('.')) {
    input.inputMode = 'decimal';
  } else {
    input.inputMode = 'numeric';
  }
});

Browser and Platform Support

Section titled “Browser and Platform Support”
PlatformSupportNotes
iOS Safari12.2+Full support
Android Chrome67+Full support
Desktop browsersIgnoredNo virtual keyboard

Common Pitfalls

Section titled “Common Pitfalls”

Type vs inputmode Confusion

Section titled “Type vs inputmode Confusion”
<!-- WRONG: type="number" is restrictive -->
<input type="number" placeholder="1234 5678">
<!-- Can't type spaces or dashes! -->


<!-- RIGHT: text + inputmode for flexibility -->
<input type="text" inputmode="numeric" placeholder="1234 5678">
<!-- Can format however you want -->
Section titled “Related Attributes”

Specifications

Section titled “Specifications”