Typing is easy when users do it on a desktop computer. But it’s harder to do on a mobile device because not all the keys are visible on the keyboard at once. A smaller screen can only display a limited set of keys.
Most mobile operating systems have designed separate keyboards optimized for specific form field inputs. These optimized keyboards are there to use, but most developers fail to include the right input types in their code to take advantage of them. This leads to slower form completion rates on mobile devices.
Input Type is Not Always “text”
Most developers make the mistake of setting the input type of every form field to “text”. This is a problem because the input of every form field is not always plain text. Most forms usually have fields that ask for information with numeric or alphanumeric characters. When users try to fill out these fields, they should see a numeric or alphanumeric keyboard.
Unfortunately, when every field input is set to “text”, it forces users to use an alphabetic keyboard to type in numeric and alphanumeric characters. Typing on a mobile device is hard enough. But not having access to a numeric or alphanumeric keyboard when you need it makes it even harder.
Email Address Fields
It’s common for forms to ask users for their email address. When you set the input type of your email field to “email”, it’ll give users a keyboard that’s optimized for typing in email addresses. This keyboard not only displays letters, but it also displays the ‘@’ and ‘.’ characters that make up an email address. Users can easily type in their email address without struggling to find the necessary alphanumeric characters.
Web Address Fields
To make things easier, there’s also a keyboard that’s optimized for typing in web addresses. When you set the input type of a web address field to “url”, it’ll give users a keyboard that displays a ‘.’, ‘/’, and ‘.com’ key. You can even “long-press the ‘.com’ key to choose other common suffixes like ‘.org’ or ‘.net'” [1]. This keyboard can also prevent typing errors. It removes the ‘space’ key so that users won’t accidentally add spaces in the web address field.
Number Fields
It’s important to give users a numeric keyboard when they’re filling out number fields. Setting the input type to “number” gives users a numeric keyboard with number keys to type with. Users save time when they can immediately type without needing to manually switch to a numeric keyboard.
Telephone Fields
You can even go so far as to make it easy for users to type in their telephone numbers. Setting the input type to “tel” gives users a telephone keypad to type with. This keypad mimics the user interface users are familiar with when they make phone calls.
Mobile Form Input Types
The details for mobile usability are not always in the pixels. Sometimes they’re in the code. These input types were introduced with HTML5. Not all browsers support the full capabilities of HTML5 yet, but all of them do support these input types when users submit their data [2]. If you want to improve the usability of your mobile forms in a big way, update your fields with the right input types to give your users the right keyboard to type with.
References
[2] Current State of HTML5 Forms
Book
Affiliate
Nice summary.
I remember researching the keyboard types for a touch screen UI on a consumer telephone product a while back.
Three other aspects worth noting are:
The contextual “search” button which appears in place of “Go” when typing in the search field of Mobile Safari.
For dedicated text input, such as the Notes app on the iPhone, there is a “Return” key in the bottom right and separate “Done” button.
The form field buttons are also a nice addition – as Done and Return can function differently.
If you use input type attribute with value “search” on text inputs, you can also get “Search” button in iOS.
Does anyone know how older (pre HTML5) browsers handle these input types? Will they all fall back to ?
Older browsers that don’t support it will fall back to input=”text”. However, the majority of the browsers do support it. These input types mainly help mobile users. Web users won’t notice a difference.
Chrome will actually validate URL fields to be properly formatted (it’s butt ugly, but still 😉 ).
When I use text for my name field, tel for the phone field and email for the email field, if I go to the Phone field first all fields get the number pad. If I go to the Name field first all fields get the normal keyboard. What gives?
THIS is the proper way to get the phone keyboard:
I have a mobile form with validation. I need a numeric keyboard to pop up when user taps on Phone or Zip field.
However, if I change to type=tel, validation breaks. How do I go about it without breaking validation?
PS – for iOS, i found pattern=”\d*” works. However it does not work on Android.
Please help
Thanks
i need help with other input fields, can you contact me? Very helpful.
LinkedIn hasn’t even done this for their mobile OAuth screen – when editing the email field you get the standard keyboard instead of the email keyboard.
People have brought it up for years but there isn’t a good line with the developers to communicate this issue.
Oh wow that’s why i was wondering why on some website i am seeing input type number in mobile fields. you broke the secret.