HTML inputmode Attribute - HTML Global Attributes - Horje

Definition and Usage

The inputmode attribute allows you to change the appearance of the keyboard on a phone or tablet (any device with a virtual keyboard).

Here is the result of the example above, on my phone:

The example below uses inputmode "email":

Browser Support

Syntax

<element inputmode="decimal|email|none|numeric|search|tel|text|url">

Attribute Values

Value	Description
decimal	Numeric only keyboard, usually also a comma key
email	Text keyboard, with keys typically for e-mail addresses like [@]
none	No keyboard should appear
numeric	Numeric only keyboard
search	Text keyboard, usually the [enter] key says [go]
tel	Numeric only keyboard, usually also with [+], [*], and [#] keys
text	Default. Text keyboard
url	Text keyboard, with keys typically for web addresses like [.] and [/], and a special [.com] key, or other domain endings that are typically for the local settings.

How to Show only numeric keys on the (virtual) keyboard

Run the example with a phone or tablet to see the result.

index.html

Example: HTML

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

Output should be:

How to Show only decimal keys on the (virtual) keyboard

The keys on the virtual keyboard is decimal only.

index.html

Example: HTML

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

Output should be:

How to Show only email keys on the (virtual) keyboard

Some of the keys are switched out with keys used typically for e-mail addresses.

index.html

Example: HTML

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

Output should be:

How to Show only none keys on the (virtual) keyboard

none	No keyboard should appear

index.html

Example: HTML

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

Output should be:

How to Show only search keys on the (virtual) keyboard

search

Text keyboard, usually the [enter] key says [go]

index.html

Example: HTML

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

Output should be:

How to Show only tel keys on the (virtual) keyboard

The keys on the virtual tel is search only.

index.html

Example: HTML

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

Output should be:

How to Show only text keys on the (virtual) keyboard

The keys on the virtual keyboard is text only.

index.html

Example: HTML

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

Output should be:

How to Show only url keys on the (virtual) keyboard

The keys on the virtual keyboard is url only.

index.html

Example: HTML

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

Output should be:

html inputmode attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Global Attributes
Uploaded by:	Admin