Exploring HTML5 Form Input Types: Date, Color, and Range

By . in Web Design. Updated on .

Forms are ubiquitous across websites, serving as critical tools for user interaction. From logging into platforms like Facebook, Twitter, and Google to tweeting and updating statuses on social networks, forms facilitate essential online engagements. This article highlights the pivotal role of forms in website interaction, emphasizing the evolution and significance of input types with the advent of HTML5.

Traditionally, web forms offered limited input types, including text, password, radio, checkbox, and submit. HTML5 has significantly expanded this repertoire, introducing a variety of new input types designed to enhance user experience and form functionality. This exploration delves into the innovative input types brought forth by HTML5, showcasing their utility and application.

Let’s embark on a journey through some of the most intriguing HTML5 Form inputs, shedding light on their potential to revolutionize web forms.

Exploring the Date Picker

Our first stop is the date picker, a common feature in registration forms and essential for services requiring date selection, such as flight and hotel bookings. While JavaScript libraries have long provided mechanisms to implement date pickers, HTML5 simplifies this process with its date input type:

 <input type="date">

The HTML5 date picker mirrors the functionality of its JavaScript counterparts, offering an intuitive calendar pop-up for easy date navigation. However, browser support varies, with Chrome, Opera, and Safari each presenting the date input differently, leading to potential inconsistencies in user experience. Here’s a look at how these browsers display the date picker:

HTML5 Date Picker in Different Browsers

Each browser offers a unique take on the date picker, highlighting the need for standardized implementation to ensure a cohesive user experience.

HTML5 also introduces specialized input types for more precise date and time selection, including month, week, time, datetime, and datetime-local. These inputs offer descriptive ways to specify dates or times:

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

To see these inputs in action, visit the following demo. Note that Opera 11 and above is currently the only browser that fully supports all these input types:

See demo

Introducing the Color Picker

The color picker is a vital tool in various web-based applications, including CSS3 gradient generators and other design tools. Traditionally, web developers have relied on JavaScript libraries, such as jsColor, to incorporate color pickers into their applications. However, HTML5 introduces a streamlined solution with its color input type, enabling the creation of native-browser color pickers:

 <input type="color">

Different browsers, specifically Chrome and Opera, present this input type in their unique ways, highlighting the diversity in rendering:

HTML5 Color Picker in Chrome and Opera
Comparison of the HTML5 Color Picker in Chrome and Opera.

Opera offers a basic color selection and displays the hex format of the currently picked color in a dropdown menu. Chrome, on the other hand, presents a full color palette in a new window upon clicking the input field.

Additionally, setting a default color is straightforward with the value attribute:

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

This feature ensures that, in browsers lacking support for the color input type, the field degrades gracefully to a text input. The default value then serves as a hint, guiding users on what to enter:

Default Color in HTML5 Color Picker
Displaying the default color in unsupported browsers.

Displaying the Color Value

Eliminate the need to use Photoshop for simple tasks like copying a hex color format. With HTML5, you can develop a straightforward tool that utilizes the color input type to display the selected color’s hexadecimal value:

Displaying the Hexadecimal Color Value

To begin, assign the id “colorpicker” to the input element and create an adjacent empty div with the id “hexcolor” to show the color value.

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

Ensure jQuery is included in the document’s head. Next, capture the color value and the target div in variables:

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

Display the initial color value in the div:

hexcolor.html(color);

Update the display when a new color is selected:

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

Now, you can see this functionality in action through the provided demo:

Colorpicker Demo

Utilizing the Range Input

The range input type introduces a slider for numerical selection within a defined range, similar to functionalities found in jQuery UI. This feature simplifies the process of selecting numbers by providing a user-friendly slider interface:

 <input type="range">
HTML5 Range Input Basic Implementation

To customize further, the slider’s orientation can be adjusted to vertical using CSS:

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

Defining the range limits is also possible by specifying the min and max attributes. For example:

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

This configuration sets the minimum value at zero and the maximum at 225. Without explicit min and max values, browsers default to a range of 0 to 100.

Displaying Slider Values

A common challenge with the range input type is that the selected number or value isn’t displayed by default in the browser. To overcome this, a small amount of JavaScript or jQuery can be used to reveal the slider’s value to users:

Displaying the Range Slider Value

Begin by placing an empty div adjacent to the input element. Style this div to visually represent a display box for the slider value.

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

Implement the following JavaScript code to dynamically display the slider’s value, updating it in real-time as the user adjusts the slider:

$(function(){
  var slider = $('#slider');
  var output = $('#output');
  
  output.html(slider.val()); // Display the default slider value
  
  slider.on('change', function(){
    output.html(this.value); // Update the display upon value change
  });
});

This functionality enhances user interaction by making the selected value visible. Explore this feature in the demo link provided. Note: This demo is best viewed in Chrome, Opera, and Safari, as Firefox and Internet Explorer do not support the range input type currently.

Range Slider Demo

Concluding Thoughts

HTML5 significantly simplifies web development by introducing a variety of new input types, making it easier for developers to create more interactive and user-friendly forms. However, it’s important to remember that support for these features can be limited in older browsers. Thus, when incorporating advanced input types like Date, Color, and Range, proceed with caution to ensure broad compatibility.

We hope this article has provided valuable insights into HTML5 forms, enhancing your understanding and application of these modern web technologies. Thank you for taking the time to read through our discussion, and we trust you found the information both informative and enjoyable.

View demo Download source code

Explore More on HTML Forms

For those interested in delving deeper into the world of HTML forms, here are several resources to expand your knowledge and skills:

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail