Inputmode And Type In HTML Inputs For Better User Experiences

Rijwan Ansari

User experience is always of the highest concern for any better solution. Input mode plays a pivotal role when it comes to input records/forms in any application. We use only input control in HTML for textbox/forms entry for user input. We enter several kinds of data like plain text, number, decimal, email, mobile number, rich text, search, telephone, URL, date, range etc.

However, a small change in inputmode and type of input control can improve the user experience significantly and ease the typing and entering the data.

In this article, I will explore various inputmode used in HTML for input types like email, text, number, phone number, URL etc. Furthermore, I will illustrate various inputmode for input control with examples and explain how they can improve user experiences and ease the data entry.

Various type of input based on inputmodes and types in HTML are listed below:

Default or Text
None
Number
Decimal
Email
Search
Tel
URL
Date
Range
Color
File

Why do we need various inputmodes and types attribute in HTML input control?

Well, the answer is quite straight forward: To ease the user input and validation. Let me explain in more detail. This attribute inputmode can be extremely useful in mobile keyboards. Adding a small attribute in input controls enhances user experiences by overwriting the keyboard of mobile. Isn’t it cool?

The attribute inputmode=”numeric”, for instance, overwrites the keyboard of mobile with number related keys only as portrayed.

Inputmode and Type in HTML Inputs for better User Experiences

The above keyboard layout is with inputmode =”numeric”. However, if we don’t use the attribute inputmode and keep it default, then the keyboard layout will be as shown below.

Inputmode and Type in HTML Inputs for better User Experiences

Left (iOS) and Right (Android). This keyboard layout is with default text type.

Consider a case where the input field requires only numeric input like age or quantity, then adding a simple inputmode numeric can help users with numeric keys only.

Similarly, there are several cases where users need to input emails, telephone number, URL, Date and so on, therefore using inputmode and type attribute can heighten user experiences and ease in entering the values specially with mobile. Furthermore, HTML 5 adds additional validation for those data types.

Let take some examples inputmodes and types in input control.

Numeric

As shown in the above example, we can use inputmode as numeric for values like age, pin, zip code, credit card number and many similar numeric values.

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

This is one of most commonly used inputmode and further we can add maxlength, minlength, patterns to cover diverse cases.

Inputmode and Type in HTML Inputs for better User Experiences

In addition to the above, we can add an autocomplete attribute to provide a more accurate keyboard for mobile users. This autocomplete helps users significantly while inserting the records.

Default

We use this inputmode as Text for default input like string values. We allow users to input any characters.

<input inputmode="text" />

Default keyboard layout is as shown below.

Inputmode and Type in HTML Inputs for better User Experiences

None

We use none inputmode to show no keyboard. Using inputmode as none, will not show any keyboard at all. We possibly use this sometimes to reset the keyboard.

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

Tel

This is another handy inputmode for entering a telephone number with Alphanumeric keypad as portrayed.

Inputmode and Type in HTML Inputs for better User Experiences

Email

This is also the most used inputmode. These days, we need at least an email in every form entry. Therefore, adding this inputmode can comfort user insertion.

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

However, adding this inputmode does not change much in the input keyboard, just add @ and . keys.

Inputmode and Type in HTML Inputs for better User Experiences

Decimal

We can add a decimal inputmode for decimal entry.

<input type=”text” inputmode=”decimal” />

By the way, this mode is like number in Android mobile, however, better experience in iOS comparing to number.

Inputmode and Type in HTML Inputs for better User Experiences

URL

This inputmode is also handy for entering URL in browser or input form because it comes with .com, / keys.

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

Inputmode and Type in HTML Inputs for better User Experiences

Search

This inputmode adds the go key in iOS and the search key in Android.

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

Inputmode and Type in HTML Inputs for better User Experiences

Input Type

On the other hand, we can add data types to get richer experience as well as validation like date, file, checkbox, picture, month, time, week and so on.

Examples

<input type="date">
<input type="color">
<input type="password">
<input type="radio">
<input type="range">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<input type="checkbox">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="button">

Example of Date Type

Inputmode and Type in HTML Inputs for better User Experiences

This type will help users to input dates without difficulty.

You can check user inputmode examples from the below site.

https://inputmodes.com/

Inputmode and Type in HTML Inputs for better User Experiences

Conclusion

From above examples, we can, indeed, observe the importance of inputmode and type in input control for better user experience. Based on the requirement of data input, we can use inputmode and type for ease of entering data. A modest change in those attributes results in higher user satisfaction. It is always encouraged to use correct inputmode and data type in HTML input control, which compels users to enter correct data.

References

https://rijsat.com/2022/05/30/inputmode-and-type-in-html-inputs-for-better-user-experiences/
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/

HTML UI User Experience

Comments

Join the conversation! Your thoughts help the community grow.

Inputmode And Type In HTML Inputs For Better User Experiences

Rijwan Ansari

4y12.6k0100Article

However, a small change in inputmode and type of input control can improve the user experience significantly and ease the typing and entering the data.

Various type of input based on inputmodes and types in HTML are listed below:

Default or Text
None
Number
Decimal
Email
Search
Tel
URL
Date
Range
Color
File

Why do we need various inputmodes and types attribute in HTML input control?

The attribute inputmode=”numeric”, for instance, overwrites the keyboard of mobile with number related keys only as portrayed.

Inputmode and Type in HTML Inputs for better User Experiences

The above keyboard layout is with inputmode =”numeric”. However, if we don’t use the attribute inputmode and keep it default, then the keyboard layout will be as shown below.

Inputmode and Type in HTML Inputs for better User Experiences

Left (iOS) and Right (Android). This keyboard layout is with default text type.

Consider a case where the input field requires only numeric input like age or quantity, then adding a simple inputmode numeric can help users with numeric keys only.

Let take some examples inputmodes and types in input control.

Numeric

As shown in the above example, we can use inputmode as numeric for values like age, pin, zip code, credit card number and many similar numeric values.

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

This is one of most commonly used inputmode and further we can add maxlength, minlength, patterns to cover diverse cases.

Inputmode and Type in HTML Inputs for better User Experiences

In addition to the above, we can add an autocomplete attribute to provide a more accurate keyboard for mobile users. This autocomplete helps users significantly while inserting the records.

Default

We use this inputmode as Text for default input like string values. We allow users to input any characters.

<input inputmode="text" />

Default keyboard layout is as shown below.

Inputmode and Type in HTML Inputs for better User Experiences

None

We use none inputmode to show no keyboard. Using inputmode as none, will not show any keyboard at all. We possibly use this sometimes to reset the keyboard.

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

Tel

This is another handy inputmode for entering a telephone number with Alphanumeric keypad as portrayed.

Inputmode and Type in HTML Inputs for better User Experiences

Email

This is also the most used inputmode. These days, we need at least an email in every form entry. Therefore, adding this inputmode can comfort user insertion.

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

However, adding this inputmode does not change much in the input keyboard, just add @ and . keys.

Inputmode and Type in HTML Inputs for better User Experiences

Decimal

We can add a decimal inputmode for decimal entry.

<input type=”text” inputmode=”decimal” />

By the way, this mode is like number in Android mobile, however, better experience in iOS comparing to number.

Inputmode and Type in HTML Inputs for better User Experiences

URL

This inputmode is also handy for entering URL in browser or input form because it comes with .com, / keys.

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

Inputmode and Type in HTML Inputs for better User Experiences

Search

This inputmode adds the go key in iOS and the search key in Android.

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

Inputmode and Type in HTML Inputs for better User Experiences

Input Type

On the other hand, we can add data types to get richer experience as well as validation like date, file, checkbox, picture, month, time, week and so on.

Examples

<input type="date">
<input type="color">
<input type="password">
<input type="radio">
<input type="range">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<input type="checkbox">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="button">

Example of Date Type

Inputmode and Type in HTML Inputs for better User Experiences

This type will help users to input dates without difficulty.

You can check user inputmode examples from the below site.

https://inputmodes.com/

Inputmode and Type in HTML Inputs for better User Experiences

Conclusion

References

https://rijsat.com/2022/05/30/inputmode-and-type-in-html-inputs-for-better-user-experiences/
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/

HTML UI User Experience

Comments

Join the conversation! Your thoughts help the community grow.