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
- 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" />
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" />
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" />
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" />
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" />
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" />
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" />
Demo :
Conclusion
Using inputmode is a must when dealing with HTML textboxes. It will prevent a lot of frustration coming up when user is entering data in mobile devices.