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 11Numeric:
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 11Decimal:
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 11tel:
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 11search:
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 11email:
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 11URL:
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 11Example:Â In this example we will see the input mode attribute with help of an HTML document.
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:
Supported Browsers:
Similar Reads
HTML input value Attribute The HTML input value attribute defines the initial value of an <input> element, such as text fields, checkboxes, or radio buttons. It sets the default content or state for the input before user interaction or form submission.It has different meanings for different input types: The "button", "r
2 min read
HTML name Attribute The HTML name attribute labels elements, notably form inputs, identifying them for data submission. It's crucial for form processing and is often used in JavaScript DOM manipulation. Unique within a form.Note: This attribute has been DEPRECATED and is no longer recommended.Supported tags:ElementDesc
3 min read
HTML Id Attribute HTML id attribute provides a unique identifier for an element within a document. It allows targeted selection and manipulation of the element through CSS and JavaScript, facilitating specific styling and functionality. In CSS, the id attribute is used using the # symbol followed by id. quotes are no
5 min read
HTML title Attribute The title attribute is used to specify extra information about the element. When the mouse moves over the element then it shows the information. Supported Tags: It supports all HTML elements. Syntax: <element title = "text">Attribute Value: This attribute contains single value text which is us
2 min read
HTML type Attribute The type attribute in HTML specifies the type of content associated with an element, such as the button type, the media type of a source in an audio or video tag, or the type of input in a form element. Syntax: <element type="value"> Note: This attribute has been DEPRECATED and is no longer re
2 min read