HTML inputmode Attribute for Textboxes

The inputmode attribute provides a hint to the browser regarding the type of onscreen keyboard to display when any <input> or <textarea> element is selected. inputmode can effectively customize the onscreen keyboard taking in the mind the data to be filled for the textbox — telephone, email, numbers etc.

inputmode is a small but very useful feature for mobile devices when dealing with textboxes. Imagine a user needs to input his telephone number in a web application, but while entering, the default keyboard is presented that includes all alphabets and special characters also. Taking in view that mobile screens are typically small, it will become difficult for the user to type numbers only. But if the keyboard included numbers only, the user can type a phone number quickly and easily.

Using inputmode attribute

<input type="text" inputmode="numeric" />

inputmode attribute can have the following values :

  • none
  • text
  • decimal
  • numeric
  • tel
  • search
  • email
  • url

The next sections describe how these options look like. Demo for these are also given.

No On-Screen Keyboard — inputmode=none

The value none implies no onscreen keyboard to be displayed. This is for cases where the application is handling the virtual keyboard by itself (probably self-coded).

<input type="text" inputmode="none" />

Demo :

Standard Keyboard — inputmode=text

The value text implies standard locale-specific keyboard to be displayed.

<input type="text" inputmode="text" />
inputmode=text on Android 9

Demo :

Numeric On-Screen Keyboard — inputmode=numeric

The value numeric implies numeric on-screen keyboard to be displayed from digits 0 to 9. Minus key may or may not be displayed.

<input type="text" inputmode="numeric" />
inputmode=numeric on Android 9

Demo :

Numeric Keyboard with Decimal — inputmode=decimal

The value decimal implies numeric on-screen keyboard to be displayed along with the locale specific decimal separator ("." or ","). Minus key may or may not be displayed.

<input type="text" inputmode="decimal" />
inputmode=decimal on Android 9

Demo :

Keyboard for Telephone Input — inputmode=tel

The value tel implies numeric on-screen keyboard with asterisk (*) and pound (*) keys to be displayed fit for entering telephone numbers.

<input type="text" inputmode="tel" />
inputmode=tel on Android 9

Demo :

Keyboard for Search Input — inputmode=search

The value search implies the on-screen keyboard to be optimized for search in which the "Enter" key may be labeled something as "Search" or may have the search icon or something similar

<input type="text" inputmode="search" />
inputmode=search on Android 9

Demo :

Keyboard for Email Input — inputmode=email

The value email implies the on-screen keyboard will have @ character displayed, facilitating email input.

<input type="text" inputmode="email" />
inputmode=email on Android 9

Demo :

Keyboard for URL Input — inputmode=url

The value url implies the on-screen keyboard will have / character displayed, making it easy to enter the url.

<input type="text" inputmode="url" />
inputmode=url on Android 9

Demo :

Conclusion

Using inputmode=url is a must when dealing with HTML textboxes. It will prevent a lot of frustration coming up when user is entering data.