HTML5 Input Types and the User Experience

The HTML5 specification adds several new input types:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

While HTML5 brings a lot of new input types that we as developers can make use of, the implementation of these new types varies from browser to browser, platform to platform and in the world of mobile, even by the Keyboard you use.

The big advantage of these new input types is to be found on mobile where the Keyboard can be adjusted to cater specifically to the input type.

For example, when an type = "tel" a phone will change its Keyboard Layout to one of mainly numbers to provide a better experience to the user. For type = "email" the Keyboard Layout will be modified to include the @ for ease of typing Email Addresses and often the .com, .org and other such domain prefixes will be easily accessible to make entry easier for the user.

You can read more about HTML5 Input Types here:

https://www.w3schools.com/html/html_form_input_types.asp

Its all about the User Experience.

These new types are only the beginning though. From there we start looking at how we can provide hints to the Keyboard on how to autofill or autocomplete for the user pulling from the Keyboard's User Dictionary of known words (all custom tailored to the user who already knows their data).

To take advantage of this, along with providing the appropriate new types, we can also provide new hints by including autocomplete suggestions such as:

name
nickname
username
new-password
current-password
address-line1
address-line2
address-level2 (typically used for City)
country-name
postal-code
tel-national (phone number without country code)
tel-extension
email

There are a lot more which you can find detailed here:

https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-name

The Baynard Institute has a nice cheat sheet for handling "Touch Keyboard Types" providing suggestions for how to best construct your HTML input tags to provide the best User Experience on a Mobile Device:

https://baymard.com/labs/touch-keyboard-types

Special Considerations

One thing to keep in mind though is that some of the new Input Types will nullify some of the constraints a typical text input field provided, most importantly, when dealing with numbers.

If you use an input type = "number" as you probably should for things like zip codes, you will help provide a better experience for your mobile users, however, your input fields will lose the maxlength settings you have been so judiciously supplying throughout your career in web development.

You can still add your maxlength constraints to the input tag but it will be ignored so you will likely want to include a hack such as the following to get this functionality back:

// On Key Up Event Handler to ensure Numeric Inputs adhere to their Max Length
$('input[type=number]').on('keyup', function (event) {
    var maxlength = $(this).attr('maxlength');

    if (this.value.length > maxlength) {
        this.value = this.value.slice(0, maxlength);
    }
});

Now while this example will cover all numeric input fields, you may want to change the selector during your own implementation if you have more specific needs. However, what this little script does is that it checks what maxlength you provided and simply will not let the user type more than what you expect.

Of course your client-side, server-side and database level validation should also be checking to make sure you aren't getting anything you weren't expecting but limiting the number of characters/digits input can greatly help to increase the User Experience in your application as the user knows up front what is expected rather than making costly mistakes later down the line.

kdarty/HTML5 Input Types and the User Experience.md

HTML5 Input Types and the User Experience

Special Considerations