Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML inputmode Attribute

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 06 Jun, 2022
Improve Article
Save Article

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.
  • Edge – 79 and above supported.
  • Firefox – 95 and above supported.
  • Opera – 53 and above supported.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!