Input Types: Give Users the Right Keyboard on Mobile Forms

Now Reading
Input Types: Give Users the Right Keyboard on Mobile Forms

Typing is easy for most users when they do it on a computer. But when they do it on a mobile device, it’s harder for them because they can’t see all the keys on a keyboard at once. Most mobile operating systems have designed separate keyboards optimized for specific form field inputs to make users’ lives easier. 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 completion rates when users fill out forms on their mobile device.

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.

input-type-email

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.

input-type-url

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.

input-type-number

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.

input-type-tel

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

[1] No. 9: A Form of Madness

[2] Current State of HTML5 Forms

[3] HTML5 Input Types