HTML and CSS Reference
My final colour picker makes use of the range input type, the new
oninput event, and the new output elements to show the value
(though this could easily use .innerHTML ). The final result is shown
in Figure 3.14 .
FIguRE 3.14 An HSLA colour
picker using the oninput
What's particularly important about the oninput event is that
unlike the onchange, which fires only when the element is
blurred (although historically some browsers got this wrong, and
fired during input—strangely this wasn't IE getting it wrong for
a change!), oninput fires when the user is inputting to the form
and whilst the changes are happening immediately.
Hopefully you've seen that HTML5 forms offer a huge pro-
ductivity boost for developers and a consistent experience
for users. They offer a ton of features right out of the box that
previously would have required a lot of custom coding (such as
form validation, or creating slider controls). Implementation is
at varying, but increasing, levels in Opera, the WebKit browsers
(Safari and Chrome), and beginning in Firefox and IE10. The lack
new features are designed to degrade gracefully.
Now, let's move on to even sexier subjects.