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", "
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: ElementD
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 min Attribute
HTML min attribute specifies the minimum value for an input element. It is commonly used with input types like number, date, and time to define the minimum acceptable value. The value of the min attribute must be less than the value of the max attribute. It has a default value which is 0. Table of C
4 min read
HTML | <input> name Attribute
The HTML <input> name Attribute is used to specify a name for an <input> element. It is used to reference the form-data after submitting the form or to reference the element in a JavaScript. Syntax: <input name="name"> Attribute Values: It contains a single value name which describ
1 min read
HTML method Attribute
The HTML method Attribute is used to specify the HTTP method used to send data while submitting the form. There are two kinds of HTTP Methods, which are GET and POST. The method attribute can be used with the <form> element. Attribute Values: GET: It is the default value. In the GET method, af
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
HTML open Attribute
The open attribute in HTML is used to indicate whether the details will be shown on page load. This is a boolean attribute. If it is not present by default then details are not shown. Note: This attribute is used by <details> element only. This attribute has been DEPRECATED and is no longer re
1 min read
HTML | input readonly Attribute
The readonly attribute of <input> element in HTML is used to specify that the input field is read-only. If an input is readonly, then it's content cannot be changed but can be copied and highlighted. It is a boolean attribute. Syntax: <input readonly> Example: This example uses HTML <
1 min read