Field types in forms and the phone keyboard

Did you know, that smartphone’s keyboard layout adapts to the field type in the contact form? The difference is also visible in desktop browser when the fields are validated. But I think, that you will realise how important it is to choose the right field type, while filling a form on a mobile phone.

Field type “text”

This is regular text field. The source code in short is: <input type=“text”>. It’s most commonly used field in contact form, and because of it’s history often the only one. Why? Because before HTML5 and CSS3 revolution there was no other option ;o) Now that HTML5 is a standard and browser support is really good (not including older versions of IE…), we can make life a bit easier for our users.

Text fields should be used when we need regular strings like name, surname, street, city etc. Keyboard’s layout for this field looks similar to this:

type-name

It’s a standard QWERTY keyboard. Nothing special yet.

Field type “email”

Theoretically, value in this field isn’t that different from the text field. We have a string here which is simply an email address. Let’s see how layout adapts to this field.

type-email

In the default view you can see two additional characters: @ and dot. You might think it’s nothing, but those two extra characters are part of every email address. Pulling them to the default view allow you to enter email faster, because you don’t have to switch between keyboards.

Source code for this field is <input type=“email”>.

Field type “url”

If you want an url address from a user, use the url field type, for which the source code is, of course, <input type=“url”> ;o)

type-url

The website url address has no space, so there is no need to show it. You can see on the screenshot that space has been replaced with characters that are always a part of url addresses. Like dot and  /.

Field type “tel”

You want a phone number? Use a field for that. Why? See attachment below:

type-tel

Keyboard layout looks like, wait for it, a dial pad! When you enter a phone number, do you need any other characters for that than numbers (and maybe a + or * or #)?

Source code for this is <input type=“tel”>

Field type “number”

If you have a QWERTY keyboard on your phone, you have two views. There is alphabet view, which is shown by default for text fields. The other one is with numbers and special characters. You switch between them depending on what character you need. If you set field type to number, the first view that you’ll see will be the one with numbers. Which should be obvious if we want user to type a number.

type-number

Shockingly the source code is <input type=“number”>.

Field type “date”

Last field type you can use to make filling your form more enjoyable, is date field. In most modern smartphones it will open a date picker. Yay! On the left is a screenshot from iPhone, on the right from Sony Xperia with Android.

type-dateScreenshot_2016-01-19-20-23-49

Source code <input type=“date”>.

Summary

Filling forms is boring and hard. Especially on mobile phones. If you choose a field type properly, you can make this process easier and more enjoyable. User experience is very important, so if there is anything we can do to speed things up, we should do it. Next time when you build a form, use already built in solutions. It’s a game changer for mobile users.  And the only thing you need to do, is change the field type.