Newer versions of all browsers support the
oninput attribute, which replaces the functionality of
onforminput, and as a result I wrote a related article Fixing
oninput in IE Using html5Widgets. Thanks to Rob Crowther for setting me straight and providing a great example, which I have forked to work for IE9. I will refactor html5Widgets to support
oninput in IE very soon. I will leave this article as is for the benefit of anyone who is Googling for
onforminput and why it was deprecated.
I was just doing some regression testing on html5Widgets, and noticed that the
onforminput event wasn’t working in Firefox 4. This didn’t make sense to me: I designed html5Widgets to detect if the
output tag is supported, and if not, add support for it. I believed that if a browser supported the
output tag, it also had to support the
onforminput event, since I assumed that this was one of the main reasons of having the
output tag in the first place. However, Firefox 4 supports the
output tag, but doesn’t support
onforminput. After doing a bit of light research, I came across this this bug report that seems to indicate that
onforminput is deprecated. This article will discuss what
onforminput to browsers that don’t, and why I really hope someone in power adds it back to the HTML5 Forms specification, or at least something very similar.
Why Do I Care
For those that don’t know what this is,
onforminput is an attribute that a web author can use on the
output tag to do some calculations with the values in a form’s input fields and show that calculation to a user. Right now, Opera is the only browser that natively supports it, but in an earlier post I showed how one could use it with my html5Widgets polyfill library in all the other browsers. How does it work? To illustrate a very simple use case, let’s say I have a
range input field:
<form> Darkness Level: <input type="range" name="darkness" value="0" min="0" max="255" /> </form>
range element is polyfilled with html5Widgets if your browser doesn’t support it).
range input type is a slider widget, and we use it here so the user can choose a number between 0 and 255. The slider looks cool, but from a usability standpoint, there is no feedback of what value the user is sliding to. It would make more sense to show a number next to the slider. which gives feedback to the user as to what the slider’s value is. This is where
onforminput comes in:
<form> Darkness Level: <input type="range" name="darkness" value="0" min="0" max="255" /> <output onforminput="this.value = darkness.value" >0</output> / 255 </form>
output tag is supported by Firefox 4,
onforminput is not. Oh-noes!!!!
Luckily, my html5Widgets library adds support for it in browsers that don’t, including Firefox 4. I just made a small change that worked around an issue preventing Firefox from supporting it, and BAM! Instant support.
Another good (and common) example for using
output would be a form for an online tool that calculates a total automatically. Enter in values into the following form and see the calculations magically appear:
But, why is it depreciated in the first place?
It seems the decision has been made to remove
onforminput from the HTML5 specification since it’s purpose can be easily done with capturing events (at least, that’s what I understood from this thread about
onformchange on the public-webapps mailing list).
onforminput since they can do this instead:
onforminput, some web designers wouldn’t have the knowledge or the patience to do so. This is not a slight to those designers — after all, they can probably make better looking web pages than the average programmer. So I am keeping
onforminput in html5Widgets. It is really convenient and easy to understand.
A Note To Those In Power
To anyone at the W3C who has the power to do so, I am politely asking to reconsider and please put As mention in the update on the top of the page,
oninput is a great replacement for
onforminput and it works in all modern browsers.
pattern were created?