{"id":3065,"date":"2011-05-10T15:16:01","date_gmt":"2011-05-10T19:16:01","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=3065"},"modified":"2012-05-20T08:48:05","modified_gmt":"2012-05-20T12:48:05","slug":"is-onforminput-deprecated-in-html5-forms-and-why-should-i-care-anyways","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2011\/05\/10\/is-onforminput-deprecated-in-html5-forms-and-why-should-i-care-anyways\/","title":{"rendered":"Is onforminput<\/code> Deprecated in HTML5 Forms? (And Why Should I Care Anyways?)"},"content":{"rendered":"
\n

Update:<\/h3>\n

Newer versions of all browsers support the form<\/code> element’s oninput<\/code> attribute, which replaces the functionality of onforminput<\/code>, and as a result I wrote a related article Fixing oninput<\/code> in IE Using html5Widgets<\/a>.<\/strong> Thanks to Rob Crowther<\/a> for setting me straight and providing a great example<\/a>, which I have forked<\/a> to work for IE9. I will refactor html5Widgets to support oninput<\/code> in IE very soon. I will leave this article as is for the benefit of anyone who is Googling for onforminput<\/code> and why it was deprecated.\n<\/p>\n<\/div>\n

\"\"<\/p>\n

I was just doing some regression testing on html5Widgets<\/a>, and noticed that the onforminput<\/code> event wasn’t working in Firefox 4. This didn’t make sense to me: I designed html5Widgets to detect if the output<\/code> tag is supported, and if not, add support for it. I believed that if a browser supported the output<\/code> tag, it also had to support the onforminput<\/code> event, since I assumed that this was one of the main reasons of having the output<\/code> tag in the first place. However, Firefox 4 supports the output<\/code> tag, but doesn’t support onforminput<\/code>.<\/strong> After doing a bit of light research, I came across this this bug report<\/a> that seems to indicate that onforminput<\/code> is deprecated. This article will discuss what onforminput<\/code> does<\/strong>, why it is very useful to designers are not so strong in JavaScript<\/strong>, how one can add support for onforminput<\/code> to browsers that don’t<\/strong>, and why I really hope someone in power adds it back to the HTML5 Forms specification,<\/strong> or at least something very similar.<\/p>\n

Why Do I Care<\/h2>\n

For those that don’t know what this is, onforminput<\/code> is an attribute<\/strong> that a web author can use on the output<\/code> tag to do some calculations with the values in a form’s input fields<\/strong> and show that calculation to a user. Right now, Opera is the only browser that natively supports it, but in an earlier post<\/a> 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<\/code> input field:<\/p>\n\r\n\r\n\r\n\r\n\r\n\r\n
HTML<\/th>\r\nOutput<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
\r\n
\r\n
\r\n<form>\r\n  Darkness Level:\r\n  <input type=\"range\" name=\"darkness\"\r\n         value=\"0\" min=\"0\" max=\"255\" \/>\r\n<\/form>\r\n<\/pre>\r\n<\/blockquote>\r\n<\/td>\r\n
\r\n
\r\nDarkness Level: \r\n\r\n<\/form>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

(Note the range<\/code> element is polyfilled<\/a> with html5Widgets if your browser doesn’t support it).<\/p>\n

The range<\/code> 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<\/code> comes in:<\/p>\n\r\n\r\n\r\n\r\n\r\n\r\n
HTML<\/th>\r\nOutput<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
\r\n
\r\n
\r\n<form>\r\n  Darkness Level:\r\n  <input type=\"range\"\r\n     name=\"darkness\"\r\n     value=\"0\" min=\"0\" max=\"255\" \/>\r\n  <output \r\n     onforminput=\"this.value = darkness.value\"\r\n  >0<\/output> \/ 255<\/span>\r\n<\/form>\r\n\r\n<\/pre>\r\n<\/blockquote>\r\n<\/td>\r\n
\r\n\r\n Darkness Level:\r\n \r\n 0<\/output> \/ 255\r\n<\/form>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Immediate user feedback! Great user experience! And simple syntax!<\/em><\/strong> Even a person who is not familiar with JavaScript can figure it out. But it’s deprecated! So, even though the output<\/code> tag is supported by Firefox 4, onforminput<\/code> is not. Oh-noes!!!!<\/p>\n

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

Another good (and common) example for using output<\/code> 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:<\/p>\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\nAmount:\r\n<\/th>\r\n\r\n\r\n<\/td>\r\n<\/tr>\r\n
\r\nItem:\r\n<\/th>\r\n\r\n\r\n<\/td>\r\n<\/tr>\r\n
Tax:<\/th>\r\n0<\/output><\/td>\r\n<\/tr>\r\n
Total:<\/th>\r\n0<\/output>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/form>\r\n

But, why is it depreciated in the first place?<\/h2>\n

It seems the decision has been made to remove onforminput<\/code> 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 onforminput<\/code> and onformchange<\/code> on the public-webapps mailing list<\/a>). <\/p>\n

While this is true, I think keeping it in would be a huge help to designers and developers. I even think that having it declared inline like I do in the code examples above is useful. Even though it breaks the separation of document structure and behavior, it allows a developer with practically no JavaScript knowledge to implement this simple feature in a form. According to the Bug Report<\/a>, designers shouldn’t have to use onforminput<\/code> since they can do this instead: <\/p>\n

\n
\r\n<form name=\"f1\">\r\nDarkness Level:\r\n
    <script type=\"text\/javascript\">\r\n      document.addEventListener(\"input\",\r\n        function(e) {\r\n          if (document.forms.f1 == e.target.form)\r\n            e.target.form.output.value =\r\n              parseFloat(e.target.form.darkness.value);\r\n        }, true);\r\n    <\/script><\/div>\r\n    <input type=\"range\" name=\"darkness\"\r\n         value=\"0\" min=\"0\" max=\"255\" \/>\r\n    <output name=\"output\">\r\n  <\/form>\r\n<\/pre>\n<\/blockquote>\n
This is uglier than your Mom’s mood when you don’t call her on Mother’s Day<\/strong> (not that I’m speaking from any recent experience). Even though it is dead easy for a JavaScript programmer to implement this without onforminput<\/code>, 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<\/code> in html5Widgets.  It is really convenient and easy to understand.<\/p>\n
A Note To Those In Power<\/h2>\n
To anyone at the W3C who has the power to do so, I am politely asking to reconsider and please put onforminput<\/code> back into the specification<\/strong> or at least replace it with something just as simple<\/strong> (the latter being attractive to those who want to continue separating the structure of the document (i.e. HTML) from the behavior (i.e. JavaScript)).<\/strike> As mention in the update on the top of the page, oninput<\/code> is a great replacement for onforminput<\/code> and it works in all modern browsers.  <\/p>\n
In my humble opinion, creating calculations the old-fashioned way with events and lines and lines of JavaScript is painful for designers who aren’t scripters.  After all, isn’t this the reason why required<\/code> and pattern<\/code> were created?<\/p>\n
Download the latest version of html5Forms.js, which includes HTML5Widgets with onforminput<\/code> support, from github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\"\" The onforminput<\/code> event has been stripped out of HTML5, and it makes me sad.  This article will show examples of how it works, how you can use it today in browsers that don’t support it, and hopefully will also present a good case as to why it should be put back into the HTML5 specification.  Should something this useful and easy-to-use be abandoned?<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118,109,50,8,35,119],"tags":[],"class_list":["post-3065","post","type-post","status-publish","format-standard","hentry","category-events-html5","category-events","category-forms","category-html","category-html5","category-polyfills"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/3065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=3065"}],"version-history":[{"count":110,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/3065\/revisions"}],"predecessor-version":[{"id":4888,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/3065\/revisions\/4888"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=3065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=3065"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=3065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}