HTML5 in the Web browser: HTML5 forms
The newest specs for HTML forms give programmers more control over data input and validation, while offloading much of the work to the browsersFollow @peterwayner
HTML5 forms: Self-calculating form fields
onchange event fires.
The new idea is to create a new
output element that will work in concert with the
input element. An attribute specifies the formula for the
output field. The browser is responsible for updating the
output field whenever the form changes by calculating the formula. I have tried to use this on several browsers without success. It just seems easier to use good old input fields instead.
The output can also be represented graphically using the
meter tags. Both essentially represent some fraction between zero and one as a thermometer-like rectangle that fills up with color -- but there are differences. The
progress element has an "indeterminate" setting that indicates the software has no clue what the value really is. This is usually displayed as wavy lines.
meter tag is a bit more interesting because it includes the opportunity to specify a
high attribute, as well as a
max. Presumably a value between
max is undesirable and the user should try to push whatever buttons are necessary to push this value between
HTML5 forms and editable content
All of the work that's been done on the forms is quite nice, but the irony is that the
form tag itself is sort of passe. The greatest change in the
form tag may be the fact that it's no longer necessary. Now most HTML elements can be edited by simply adding the attribute
contenteditable="true" to any old
span. It's pretty freaky. If the user doesn't like what you write on your blog, you can give them the opportunity to rewrite it to fit their preconceived notions. In essence, any table or pile of data could be turned into a form just waiting for the user to click and change. Everything can be wikified.
This section of the API is changing a bit. Just recently, the
getSelection method was moved, changing the best way to capture any of the editing process. Is
getSelection ideal? Nope. Is it dangerous? Perhaps in the wrong hands. Will it be confusing to old users who still think that they can only monkey with data in the form boxes? Certainly. Will it encourage more traffic when people save entire pages just to store one tweak? No doubt. But editable content opens up more possibilities than ever. I'm sure that creative Web designers will find clever ways to make everything a form that comes alive.
Note: This is the fourth article in a series devoted to the new features of HTML5. The first article, "HTML5 in the browser: Canvas, video, audio, and graphics," examined display options, including the <canvas> and <video> tags, Scalable Vector Graphics, and WebGL. The second article, "HTML5 in the browser: Local data storage," examined Web Storage, Web Database, and other APIs designed to transform Web pages into local applications. The third article, "HTML5 in the browser: HTML5 data communications," examined cross-document messaging, WebSockets, and other HTML5 APIs that improve website and browser interactivity.
This story, "HTML5 in the browser: HTML5 forms," was originally published at InfoWorld.com. Follow the latest news in application development and HTML5 at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.