C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

Optimizing Form Input on Mobile Devices: The `inputmode` Attribute


What is inputmode?

The inputmode attribute is an HTML attribute that provides a hint (not an enforcement) to the browser about the type of data a user is expected to enter into a form field. This information helps the browser display an appropriate virtual keyboard on mobile devices or tablets, optimizing the user's input experience.

Where is it used?

The inputmode attribute is primarily used with the <input> element, but it can also be applied to any element that is in contenteditable mode, allowing users to directly edit its content.

How does it work?

When a web page is loaded, the browser parses the HTML code and encounters the inputmode attribute. Based on the specified value, the browser might:

  • Adjust the autocorrect or autocompletion suggestions to better align with the expected input format.
  • Display a specialized keyboard layout that includes relevant symbols or buttons for the expected data type (e.g., a numeric keypad for phone numbers, an emoji keyboard for text messages).

Important points to remember

  • The effectiveness of inputmode depends on browser support and the specific virtual keyboard implementation on the user's device.
  • inputmode is a hint, not a requirement. Browsers may not always adhere to the suggestion, and user input validation should still be implemented on the server-side.

Common inputmode values

Here are some of the most common values you can use with the inputmode attribute:

  • tel: Indicates a telephone number, potentially displaying a phone number pad.
  • email: Provides a hint for email addresses, and the keyboard might include an "@" symbol or other relevant options.
  • decimal: Suggests decimal numbers, often showing a keyboard with a decimal point.
  • numeric: Hints at numeric input, potentially displaying a numeric keypad.
  • text: This is the default value and indicates plain text input.

Numeric Input

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" inputmode="tel" placeholder="123-456-7890" required>

This code creates a labeled input field for a phone number. The type="tel" attribute suggests a phone number, and inputmode="tel" further hints to the browser to display a phone number keypad (if available) on mobile devices.

Email Address

<label for="email">Email:</label>
<input type="email" id="email" inputmode="email" placeholder="[email protected]" required>

This example creates a labeled input field for an email address. The type="email" attribute suggests an email format, and inputmode="email" provides a hint to display a keyboard with an "@" symbol or other relevant options for email addresses on mobile devices.

Decimal Input

<label for="price">Price:</label>
<input type="number" id="price" inputmode="decimal" placeholder="123.45" required>

This code creates a labeled input field for a price. The type="number" attribute suggests a numeric input, and inputmode="decimal" hints at the possibility of decimal values. The keyboard might display a decimal point button for easier input.

Text Input (Default)

<label for="message">Message:</label>
<textarea id="message" inputmode="text" rows="5" cols="30" placeholder="Write your message here..." required></textarea>

Here, a labeled textarea element is used for multi-line text input. While inputmode isn't strictly necessary for plain text, you can still include it with the default text value for consistency or potential future browser behavior changes.


  1. Leverage the type attribute effectively

    The type attribute of the <input> element already provides a basic hint to the browser about the expected input format. Using the appropriate type value can trigger some virtual keyboards to adjust their layout accordingly:

    • type="number": Suggests numeric input and might display a numeric keypad.
    • type="email": Hints at email addresses, potentially showing an "@" symbol on the keyboard.
    • type="tel": Indicates a telephone number, with the possibility of a phone number pad.

    While not as granular as inputmode, the type attribute can be a good fallback option.

  2. Polyfills (Experimental)

    If you absolutely need the functionality of inputmode, you could consider using a polyfill. A polyfill is a piece of JavaScript code that attempts to provide a similar behavior in browsers that don't natively support a feature. However, polyfills for inputmode are still under development and might not be reliable across all browsers.