{"id":15154,"date":"2012-10-08T21:01:42","date_gmt":"2012-10-08T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15154"},"modified":"2025-04-04T01:13:02","modified_gmt":"2025-04-03T17:13:02","slug":"html5-form-input-type","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-form-input-type\/","title":{"rendered":"Exploring HTML5 Form Input Types: Date, Color, and Range"},"content":{"rendered":"

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.<\/p>\n

Traditionally, web forms offered limited input types, including text<\/code>, password<\/code>, radio<\/code>, checkbox<\/code>, and submit<\/code>. 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.<\/p>\n

Let\u2019s embark on a journey through some of the most intriguing HTML5 Form inputs, shedding light on their potential to revolutionize web forms.<\/p>\n

Exploring the Date Picker<\/h2>\n

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<\/code> input type:<\/p>\n

\r\n <input type=\"date\">\r\n<\/pre>\n
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<\/code> input differently, leading to potential inconsistencies in user experience. Here\u2019s a look at how these browsers display the date picker:<\/p>\n
\"HTML5<\/figure>\n
Each browser offers a unique take on the date picker, highlighting the need for standardized implementation to ensure a cohesive user experience.<\/p>\n
HTML5 also introduces specialized input<\/code> types for more precise date and time selection, including month<\/code>, week<\/code>, time<\/code>, datetime<\/code>, and datetime-local<\/code>. These inputs offer descriptive ways to specify dates or times:<\/p>\n
\r\n <input type=\"month\">\r\n <input type=\"week\">\r\n <input type=\"time\">\r\n <input type=\"datetime\">\r\n <input type=\"datetime-local\">\r\n<\/pre>\n
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:<\/p>\n
<\/i>  See demo <\/span><\/a><\/p>\n
Introducing the Color Picker<\/h2>\n
The color picker<\/strong> 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<\/code> input type, enabling the creation of native-browser color pickers:<\/p>\n
\r\n <input type=\"color\">\r\n<\/pre>\n
Different browsers, specifically Chrome and Opera, present this input type in their unique ways, highlighting the diversity in rendering:<\/p>\n
\"HTML5<\/figure>\n
\n
<\/i><\/div>\n
Comparison of the HTML5 Color Picker in Chrome and Opera.<\/div>\n
<\/div>\n<\/div>\n
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.<\/p>\n
Additionally, setting a default color is straightforward with the value<\/code> attribute:<\/p>\n
\r\n <input type=\"color\" value=\"#ff0000\">\r\n<\/pre>\n
This feature ensures that, in browsers lacking support for the color<\/code> input type, the field degrades gracefully to a text input. The default value then serves as a hint, guiding users on what to enter:<\/p>\n
\"Default<\/figure>\n
\n
<\/i><\/div>\n
Displaying the default color in unsupported browsers.<\/div>\n
<\/div>\n<\/div>\n
Displaying the Color Value<\/h2>\n
Eliminate the need to use Photoshop for simple tasks like copying a hex<\/code> color format. With HTML5, you can develop a straightforward tool that utilizes the color<\/code> input type to display the selected color\u2019s hexadecimal value:<\/p>\n
\"Displaying<\/figure>\n
To begin, assign the id<\/code> \u201ccolorpicker\u201d to the input element and create an adjacent empty div<\/code> with the id<\/code> \u201chexcolor\u201d to show the color value.<\/p>\n
\r\n <input type=\"color\" id=\"colorpicker\" name=\"color\" value=\"#ff0000\"> <div id=\"hexcolor\"><\/div>\r\n<\/pre>\n
Ensure jQuery is included in the document\u2019s head<\/code>. Next, capture the color value and the target div<\/code> in variables:<\/p>\n
\r\nvar color = $('#colorpicker').val();\r\nvar hexcolor = $('#hexcolor');\r\n<\/pre>\n
Display the initial color value in the div<\/code>:<\/p>\n
\r\nhexcolor.html(color);\r\n<\/pre>\n
Update the display when a new color is selected:<\/p>\n
\r\n$('#colorpicker').on('change', function() {\r\n  hexcolor.html(this.value);\r\n});\r\n<\/pre>\n
Now, you can see this functionality in action through the provided demo:<\/p>\n
<\/i>  Colorpicker Demo <\/span><\/a><\/p>\n
Utilizing the Range Input<\/h2>\n
The range<\/code> 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:<\/p>\n
\r\n <input type=\"range\">\r\n<\/pre>\n
\"HTML5<\/figure>\n
To customize further, the slider\u2019s orientation can be adjusted to vertical using CSS:<\/p>\n
\r\ninput[type=range] {\r\n  width: 20px;\r\n  height: 200px;\r\n  -webkit-appearance: slider-vertical;\r\n}\r\n<\/pre>\n
\"Vertical<\/figure>\n
Defining the range limits is also possible by specifying the min<\/code> and max<\/code> attributes. For example:<\/p>\n
\r\n <input type=\"range\" name=\"range\" min=\"0\" max=\"225\">\r\n<\/pre>\n
This configuration sets the minimum value at zero and the maximum at 225. Without explicit min<\/code> and max<\/code> values, browsers default to a range of 0 to 100.<\/p>\n
Displaying Slider Values<\/h2>\n
A common challenge with the range<\/code> input type is that the selected number or value isn\u2019t displayed by default in the browser. To overcome this, a small amount of JavaScript or jQuery can be used to reveal the slider\u2019s value to users:<\/p>\n
\"Displaying<\/figure>\n
Begin by placing an empty div<\/code> adjacent to the input element. Style this div<\/code> to visually represent a display box for the slider value.<\/p>\n
\r\n <input type=\"range\" id=\"slider\" value=\"10\" name=\"range\"> <div id=\"output\"><\/div>\r\n<\/pre>\n
Implement the following JavaScript code to dynamically display the slider\u2019s value, updating it in real-time as the user adjusts the slider:<\/p>\n
\r\n$(function(){\r\n  var slider = $('#slider');\r\n  var output = $('#output');\r\n  \r\n  output.html(slider.val()); \/\/ Display the default slider value\r\n  \r\n  slider.on('change', function(){\r\n    output.html(this.value); \/\/ Update the display upon value change\r\n  });\r\n});\r\n<\/pre>\n
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<\/code> input type currently.<\/p>\n
<\/i>  Range Slider Demo <\/span><\/a><\/p>\n
Concluding Thoughts<\/h2>\n
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\u2019s 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<\/strong>, proceed with caution to ensure broad compatibility.<\/p>\n
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.<\/p>\n
<\/i>  View demo <\/span><\/a>\n<\/i>  Download source code <\/span><\/a><\/p>\n
Explore More on HTML Forms<\/h2>\n
For those interested in delving deeper into the world of HTML forms, here are several resources to expand your knowledge and skills:<\/p>\n