HTML and CSS Reference
In-Depth Information
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
event.
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
of implementation in IE9 can be faked with JavaScript, as the
new features are designed to degrade gracefully.
Now, let's move on to even sexier subjects.