Are you looking for HTML5 inputs in Kentico EMS?

Written by Ilesh Mistry
28th July 2017

6 minutes read

The Kentico 11 beta was recently released and if you haven't had a chance to download it yet, then I would really recommend that you do. You’ll be able to explore some of the new features that could be available in Kentico EMS 11 when it is released later this year.

Download Kentico 11 EMS beta

Tip - If you haven't already done so, make sure you register for the Kentico Developer Newsletter to receive the latest developer updates on Kentico EMS and Kentico Cloud!

Kentico Roadmap

Along with the newsletter, you can also check out the Kentico EMS Roadmap where you will find information about what Kentico are planning to cover in Kentico 11 as well as the status of new features.

The roadmap is a great way to find out about Kentico’s future plans, whether you’re a developer wanting to know more or someone who is looking to upgrade existing websites. It's an ideal place to check when you need information for clients on the benefits that Kentico 11 will bring.

HTML5 inputs in Kentico 10 (or earlier versions)

Okay, back to HTML5 inputs. Currently there is no out of the box way to add input fields to a form in Kentico 10 (or an earlier version) that would utilise the range of HTML5 inputs.

Each input has a behaviour to inform the website visitor what the input form field does and what type of information/data needs to go into it.

In websites built on Kentico 10 EMS (or earlier versions) the majority of the fields are just 'type of text' fields. This means that if you tried to complete the form with these fields on browsers, tablets or mobiles, you would not get any assistance on what data is needed for each field. For example, if you wanted to fill out the telephone number field using numeric values instead of alpha/numeric characters.

What options are available for websites built on Kentico EMS 10 (or earlier) so that I can change my input fields?

You can use some of the form controls added to the Kentico Marketplace

This is good but it involves using a control from the Marketplace. If the Marketplace item needs to be updated, then this will need to be factored into any areas that could be using this form.

Another option is to clone the existing form controls and adjust the 'type of text' attribute. In doing this, you will need to create a form control for each scenario. You will be responsible for the management of the form controls but you will need to update this each time and replicate it on each website you create.

With both of these approaches you will most likely want to use it on multiple projects, with some potential differences. Sharing this amongst them all and managing this could cause a bigger problem.

Kentico 11 (beta) offering

Let's consider the Kentico 11 offering which has been made available for testing in the Kentico 11 Beta. You will see a new feature within the beta version which will allow you to add an HTML5 form control, which will then allow you to select an HTML5 input type.

I used different methods of changing form fields to make them HTML5 friendly. This is not only for my benefit but also for others. Imagine you’re looking at a form on your phone and come across an email field, what keyboard type should you expect from clicking on that field? You would expect a standard email keyboard rather than a normal alpha keyboard, but an email keyboard. The same would apply for some of the other available HTML5 input fields which would help with accessibility as well.

A quick comparison test

Let's see if using the HTML5 control, which should be available in Kentico EMS 11, makes it easier to fill a contact form on a mobile device compared to what was available out of the box in previous Kentico versions.

Tip - Remember to use the HTML5 doctype if you want to really make use of HTML5!

I'm going to use a local version of the dancing goat website, where I will have two contact forms. One for the standard previous versions approach and the other for the newly created HTML5 inputs approach.

Contact form without HTML5 input fields


Contact form with HTML5 input fields


In conclusion

I believe that HTML5 inputs is a great addition to the upcoming Kentico 11 release. It's currently in beta form so hopefully it will make it to the full version which is due to launch in November. Upgrading to version 11 will not be a problem for existing form controls. As it is a new feature, you will simply be able to use it as and when required.