Input Types: Give Users the Right Keyboard on Mobile Forms

by on 08/23/11 at 10:20 pm

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 Types: Give Users the Right Keyboard on Mobile Forms

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 Types: Give Users the Right Keyboard on Mobile Forms

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 Types: Give Users the Right Keyboard on Mobile Forms

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 Types: Give Users the Right Keyboard on Mobile Forms

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


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

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

9 Responses to “Input Types: Give Users the Right Keyboard on Mobile Forms”

  1. Anthony Sonego

    Aug 23rd, 2011

    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.

  2. Jens Rantil

    Aug 25th, 2011

    Does anyone know how older (pre HTML5) browsers handle these input types? Will they all fall back to ?

    • anthony

      Aug 26th, 2011

      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.

      • Steven

        Sep 7th, 2011

        Chrome will actually validate URL fields to be properly formatted (it’s butt ugly, but still ;) ).

  3. John

    Mar 15th, 2012

    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?

  4. Frank

    Nov 21st, 2012

    THIS is the proper way to get the phone keyboard:

  5. Leo

    Oct 9th, 2013

    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

  6. Jim Doherty

    Nov 10th, 2013

    i need help with other input fields, can you contact me? Very helpful.

Leave a Comment