The most common reason we do not use HTML5 input types is maybe we do not know how they work or due to lack of browser support. HTML5 different input types are great alternative to plugins like: range sliders and color pickers.
Basically we will discuss some major input types which at least have some browser support and can replace heavy scripts we use. These input types interact natively with device or browser that can never be done by plugins.
Input type='color'
Input type color let user select color. The returned value is HEX and if browser doesn't support any input type then it returns a simple text field which is functional. Input type color doesn't got any attractive browser support.
IE
11
Chrome
39
Firefox
38
Opera
29
Safari
8
iOS Safari
8.4
Android Browser
4.1
This is something no one likes. Color picking is not actually something forms can use of, but color picking stuff like generators, or HEX value makers and can't figure out many uses of it. The basic input is:
If you can really notice than value is HEX and doesn't support #09f or any other color unit, it might give a console message.
Polyfill & Fallback
Okay first, whenever browser doesn't support any input type, it simply returned as text field which is functional and value can simply achieved with e.value in Javascript. On this basis you can add any fallback but what is real solution?
Modernizr is real backup for any kind of bad browser supporting stuff. Setup the Modernizr like this:
There are two ways:
Since text input field is returned so set up color input in a way that user is able to put HEX value by itself (like #ffffff) and you can simply make it work by getting value with Javascript.
Nevertheless, you can use Modernizr load function to load Spectrum which is most popular color picker plugin that is supported by IE 6+ and major browsers as well. This works as polyfill for color input types.
Here is the way to test it:
See the Pen Modernizr color input test by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Customization
Color input have somple customization, seriously I do not have clue about moz and ms based browser about this property, but works best in webkit browsers.
Input type range
This input type is best way to let a user select value between some specific value. This input insures value is an integer and if browser doesn't support range, then simply returns a text field. Well, browser support is better than color but not promising one.
IE
10
Chrome
39
Firefox
38
Opera
29
Safari
8
iOS Safari
8.4
Android Browser
4.1
Here is look at some a few browsers' behaviour to input range.
Basic markup for input range could have min, max and step attribute. Min and max will decide range while step will define the change in value with every slide.
Polyfill & Fallback
Range input got IE10 support which is not good at all and not surprising either. The best way to make a fallback is to use native elements like returned text field (for non supporting browsers) by letting the user put the numeric value it self and you simply obtain that.
One more solution is to use jQuery UI's slider. But loading the whole jQuery UI (and even jQuery if you aren't using it) just for a slider? Well, Modernizr is again a solution for this. Best way is to use Modernizr.load, this one is great for polyfill replacement.
Beside jQuery UI there are many more jQuery plugins and Javascript polyfill available with browser support of IE8 which could be used in same way as this one, test, load and call the plugin. I found these words on Modernizr's docs page:
Just because you can use a polyfill doesn’t mean you should.
Loading some heavy resource for IE7 and same for Chrome (when it is supported) isn't a good way at all.
Customization
Well, I can't explain the way this guy did here. However there are some points need to know while customizing range input. First as far as browser support is concern, then styling should be done for all browsers supported. Use this generator to generate code for your input range. This tool is created by same person that wrote the blog post on CSS-Tricks, Daniel Stern.
Here is a screenshot from my on going project that uses range:
On Chrome
Somehow similar style was achieved in IE 10.
Well, you can see a big difference. So make sure that whatever style you are apply might not have exactly the same result in all browsers.
Basically there are two main components in range, first is track and second is thumb.
Input type number
Input type number is more than helpful in many cases. Input field that only accept numerical value. Smartphones and tablets on focus on this input type returns numeric keyboard directly. They have arrows on side which let user increase or decrease value but not in all browsers.
If browser doesn't support this input type then a text field is returned. Here is the browser support table.
IE
10
Chrome
39
Firefox
38
Opera
29
Safari
8
iOS Safari
8.4
Android Browser
4.1
Internet Explorer , iOS Safari and Android browser doesn't include increment and decrement buttons. Basic markup includes min, max and step value. Well, min and max values defines range in this input while step defines that how much value will increase or decrease with each button click.
Polyfill and Fallbacks
The best way is to test the browser support with Modernizr and load polyfill fill with Modernizr.load function. Here is a number polyfill by jonstipe.
Second is to test the browser with:
And add buttons yourself. This solutions works best with shopping cart, when user selects the number of items order or sometimes while receiving donation when each click of button increases $5 or $10 to the donation bucket.
Internet Explorer 10 and 11 doesn't add buttons for increment or decrement but number input is partially supported because user can never add any non-numeric value in input field.
Customization
You can simply style it like text input field and I didn't find any way to style those buttons. CSS selectors are there which are :in-range or :out-of-range. When a number is added less than min value or more than max value then :out-of-range style is applied but when a input value is under range then :in-range is style applied.
The range for below demo is 10 to 20, adding any value out of range will have different style.
See the Pen Input number :in-range and :out-of-range by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.