A Look Into HTML5 Forms Input Types: Date, Color and Range

Forms are found everywhere on websites. Facebook, Twitter, Google — just to name a few — require us to log into or register to the site through a form, in fact we also use a form to tweet and updating status in social sites. In short, the form is a very important part to be able to interact to a website.

A web form is built with inputs, in the past, we only have a few option for the input types; such as text, password, radio, checkbox and submit. Now, HTML5 comes with great improvements and introduces many new input types in the spec.
So, in this post we will dig into some of the new interesting pieces from the HTML5 Forms that we think you should try them on; let’s check them out.

Date Picker

The first thing we would like to take a look at is the date picker. Selecting date is a common thing you may find in registration form, particularly in some sites or application like flight and hotel booking.
There are many JavaScript Libraries to create date picker. Now, we can also create one in much easier way with HTML5 input date, as follows;

<input type="date">

The date picker in HTML5 basically works very similar to how the JavaScript Libraries did; when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.
However, each browsers that currently support the date input type namely Chrome, Opera, and Safari display this input type a bit differently which potentially lead to inconsistency issue in the user experience, and here is how it looks like;

Some notable differences you can see at a glance from the above screenshot; the Opera used the English three-letter abbreviation for the days name — Sun, Mon, Thu, and so on, while the Chrome used my local language, the Safari — on the other hand — works rather odd, it is not showing a calendar at all.
There are also some new input types to select date or time more specifically; month, week, time, datetime and datetime-local, which we are sure that the keyword itself is quite desctiptive to tell what it does.

<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

You can view all of them in action from the link below, but make sure you view it in Opera 11 and above, since, at the of the writing, it is the only browser that support all of those input types.

• Datepicker Demo

Color Picker

Color picker is often needed in certain web-based application, such as this CSS3 gradient generator, but all this time web developers also still rely on a JavaScript Library, such as jsColor, to do the job. But now we can create a native-browser color picker with HTML5 color input type;

<input type="color">

Once again, the browsers, in this case the Chrome and Opera, render this input type slightly different;

The Opera firstly display the basic color option upon the click as well as the hex format of the current picked color in a dropdown, while the Chrome will directly pop up the color palette in a new window when clicked.
Furthermore, we can also set the default color with the value attribute, as follows;

<input type="color" value="#ff0000">

That way, when it is viewed in the unsupported browsers, the input will degrade in a text field and the default value will be visible that can give a sort of hint for users what should be entered in the field.

Display the Color Value

Rather than opening Photoshop just to copy the hex color format, you can actually create a simple tool upon this input type to do the job, since the generated color is already in hexadecimal this would be really easy;

First, we add id colorpicker to the input and we also add an empty div with id hexcolor next to it to contain the value.

<input type="color" id="colorpicker" name="color" value="#ff0000"> <div id="hexcolor"></div>

We need the jQuery linked in the head of our document. Then we store the color value and the newly added div in a variable, like so;

var color   = $('#colorpicker').val();
 hexcolor = $('#hexcolor');

Get the initial value from the #colorpicker;

hexcolor.html(color);

…and lastly change the value when the picked color is changed as well;

$('#colorpicker').on('change', function() {
    hexcolor.html(this.value);
});

That’s it; now let’s view it in action.