HTML inputmode Attribute - GeeksforGeeks

31 Oct, 2021
The inputmode is an HTML Global attribute (Global attributes are common to all HTML elements) which helps browsers or devices with on-screen keyboards to help them decide which keyboard to display when a user has selected an area for some input or textarea element.
The inputmode attribute does not change the way how the browser interprets the input. It instructs the browser which keyboard to display according to various inputs.
The inputmode is a very old concept but only some of the browsers adopted it. Some of the major browsers are Safari in iOS and chrome in Android. Previously it was implemented by Firefox in the year 2012 but deprecated after some months.
The inputmode accepts a number of values. Let’s take a look at them one by one.
Syntax:
<input type ="number" id="age" inputmode="numeric" />
The inputmode attribute can have the following values.
None:
<input type="text" inputmode="none" />
The value none implies ‘no’ onscreen keyboard to be displayed. This is used in those cases where the browser or any application is handling the VK (Virtual Keyboard) by itself (self-coded).
Text:
<input type="text" inputmode="text" />
The value text displays the locale-specific standard keyboard.
inputmode=text On Android 11
Numeric:
<input type="text" inputmode="numeric" />
The value numeric assures that digits from 0 to 9 should be displayed on the on-screen keyboard. ‘Minus’ key may or may not be displayed.
inputmode=numeric On Android 11
Decimal:
<input type="text" inputmode="decimal" />
The value decimal assures that along with digits from 0 to 9 the locale-specific decimal separator (“.” or “,”) must be displayed. ‘Minus’ key may or may not be displayed.
inputmode=decimal On Android 11
tel:
<input type="text" inputmode="tel" />
The value tel displays numeric on-screen keyboard along with pound (*) and asterisk(*) keys. This is used for entering telephone numbers.
inputmode=tel On Android 11
search:
<input type="text" inputmode="search" />
The value search assures that the on-screen keyboard should have such a layout that it’s convenient for searching , such a layout has an “Enter” key labelled as “Search” or maybe any search icon or similar.
inputmode=search On Android 11
email:
<input type="text" inputmode="email" />
The value email assures that the on-screen keyboard must display “@” character which will facilitate the user for email input. 
inputmode=email On Android 11
url:
<input type="text" inputmode="url" />
The value url assures that the on-screen keyboard must display “/” character which will facilitate the user in entering the URL.
inputmode=url On Android 11
Example: 
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>HTML inputmode Attribute</title></head>  <body>    <h1 style="color:green;">        GeeksforGeeks    </h1>      <h3>HTML inputmode Attribute</h3>      Name : <input type="text" id="text"         inputmode="text" /><br><br>      Phone No. : <input type="tel"         id="phone" inputmode="tel" /><br><br>      Email : <input type="email"         id="email" inputmode="email" /><br><br>      Age : <input type="number" id="age"         inputmode="numeric" /><br><br>      Search : <input type="search" id="search"         inputmode="search" /><br><br>      URL : <input type="url" id="url"         inputmode="url" /><br><br></body>  </html>
Output:
Advantages:
Using inputmode attributes is a must while dealing with textboxes as it increases the ease of user Input.
Supported Browsers:
Chrome – 66 and above supported.
Safari on iOS – 12.2 and above supported.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Angular File Upload
Form validation using jQuery
How to auto-resize an image to fit a div container using CSS?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers