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

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

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.

Recommended Reading: Creating Stylish Responsive Form With CSS3 and HTML5

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.

Colorpicker Demo

Range

The range input type allows us to add a slider in the browser for selecting number in a range which we can also find in jQuery UI.

<input type="range">

The snippet above is basic the implementation of range input type. We can also change the slider orientation to vertical using CSS, as follows;

input[type=range] {
	width: 20px;
	height: 200px;
	-webkit-appearance: slider-vertical;
}

Additionally, we can set the min and max range of the numbers, for instance;

<input type="range" name="range" min="0" max="225">

In the snippet below we set the min to zero and 225 for the maximum. When they are not explicitly specified, by default the browser will take 0 for the minimum to 100 for the maximum.

Display the Number

There is one constraint though, the number is invisible, we cannot see the generated number/value from the slider in the browser. To display the number we need to add a bit of JavaScript or jQuery, and here is how we do it;

First we add an empty div next to the input, style the div sufficiently so it looks like a box.

<input type="range" id="slider" value="10" name="range"> <div id="output"></div>

Then put the following code which will do the same as the above code in strongcolor picker, except we now get the value from the slider.

$(function(){
	var val = $('#slider').val();
		output 	= $('#output');

	output.html(val);

	$('#slider').change(function(){
	    output.html(this.value);
	});

});

Now, you can see the demo. Just a reminder, view the demo in these browsers — Chrome, Opera and Safari, as Firefox and IE do not support the range input type at the moment.

Range Demo

Final Words

It is clear that HTML5 make our lives a lot easier by introducing many new input types. But as any other HTML5 features, the support is very limited, especially in older browsers, so we should use these new features with cautious, especially the new input types that we’ve discussed in this post; Date, Color and Range.

But ultimately we hope that now you have more insight on HTML5 Forms. Thank you for reading this post, and we hope you enjoyed it.

Photoshop CS6 Download