HTML inputmode Attribute

The inputmode attribute in HTML is used to provide a hint to browsers about the type of input expected from the user. The ‘inputmode’ attribute allows you to specify the type of data expected to be entered into a text field on a phone or tablet (any device with a virtual keyboard).

Note: Using inputmode attributes is a must while dealing with textboxes as it increases the ease of user Input.

Syntax:

<input type ="number" id="age" inputmode="numeric" />

The inputmode attribute can have the following values.

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).

Syntax:

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

Text:

The value text displays the locale-specific standard keyboard.

Syntax:

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

inputmode=text On Android 11

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.

Syntax:

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

inputmode=numeric On Android 11

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.

Syntax:

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

inputmode=decimal On Android 11

tel:

The value tel displays numeric on-screen keyboard along with pound (*) and asterisk(*) keys. This is used for entering telephone numbers.

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

inputmode=tel On Android 11

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.

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

inputmode=search On Android 11

email:

The value email assures that the on-screen keyboard must display “@” character which will facilitate the user for email input.

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

inputmode=email On Android 11

URL:

The value url assures that the on-screen keyboard must display “/” character which will facilitate the user in entering the URL.

Syntax:

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

inputmode=url On Android 11

Example: In this example we will see the input mode attribute with help of an HTML document.

Output:

Supported Browsers:

• Chrome 66
• Edge 79
• Firefox 95
• Opera 53