Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML inputmode Attribute

The inputmode attribute defines the type of virtual keyboard to use when an input element has focus.

This attribute is for pages that are viewed on portable devices.

Example

#

An inputmode attribute on an <input> element.
On a portable device, this input field requires a numeric virtual keyboard.

<input inputmode="numeric" 
       type="text" name="cost"
       placeholder="Enter cost" />

On an iPhone, when this field receives focus, you may see a keyboard like this:


Using inputmode

The inputmode attribute specifies the type of keyboard to display when the element has focus.

Virtual keyboards are used in mobile devices, tablets, touch screens, and others.

This attribute has no effect on the desktop with a regular keyboard.

Note:   The inputmode is a global attribute that can be applied to any tag.

Tip:   Not all browsers support inputmode.


Syntax

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

Values

#

Value Description
none Renders a system virtual keyboard.
text Displays a standard virtual keyboard. This is the default.
decimal Fractional numeric input with numbers, decimal separator (. or ,), and minus.
numeric Numeric input with numbers from 0 to 9.
tel Telephone input with numbers, asterisk (*), and pound (#) keys.
search A keyboard for search input. May display an Enter or Go key.
email A keyboard optimized for email, with '@', and possibly a '.com' key.
url A virtual keyboard for URLs with history access, '/' and possibly a '.com' key.

Browser support

Here is when inputmode support started for each browser:

Chrome
68.0 Jul 2018
Firefox
20.0 Apr 2013
Edge
79.0 Jan 2020
Opera
Not Supported
Safari
Not Supported

You may also like




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides