HTML inputmode Attribute - HTML Global Attributes

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

Related Articles

HTML accesskey Attribute	HTML Global Attributes
HTML class Attribute	HTML Global Attributes
HTML contenteditable Attribute	HTML Global Attributes
HTML data-* Attributes	HTML Global Attributes
HTML dir Attribute	HTML Global Attributes
HTML draggable Attribute	HTML Global Attributes
HTML enterkeyhint Attribute	HTML Global Attributes
HTML hidden Attribute	HTML Global Attributes
HTML id Attribute	HTML Global Attributes
HTML inert Attribute	HTML Global Attributes
HTML inputmode Attribute	HTML Global Attributes
HTML lang Attribute	HTML Global Attributes
HTML popover Attribute	HTML Global Attributes
HTML spellcheck Attribute	HTML Global Attributes
HTML style Attribute	HTML Global Attributes
HTML tabindex Attribute	HTML Global Attributes
HTML title Attribute	HTML Global Attributes
HTML translate Attribute	HTML Global Attributes
HTML Global Attributes	HTML Global Attributes

Single Articles

How to Show only numeric keys on the (virtual) keyboard	HTML Global Attributes
How to Show only decimal keys on the (virtual) keyboard	HTML Global Attributes
How to Show only email keys on the (virtual) keyboard	HTML Global Attributes
How to Show only none keys on the (virtual) keyboard	HTML Global Attributes
How to Show only search keys on the (virtual) keyboard	HTML Global Attributes
How to Show only tel keys on the (virtual) keyboard	HTML Global Attributes
How to Show only text keys on the (virtual) keyboard	HTML Global Attributes
How to Show only url keys on the (virtual) keyboard	HTML Global Attributes

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