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 browsers
The changes and enhancements to the form tags are some of the most extensive amendments to the HTML5 standard, offering a wide variety of options that once required add-on libraries and a fair amount of tweaking. All of the hard work that went into building self-checking widgets and the libraries that ensure the data is of the correct format is now being poured into the browser itself. The libraries won't be necessary -- in theory -- because the work will be done seamlessly by all browsers that follow the standard. In practice, we'll probably continue to use small libraries that smooth over slight inconsistencies.
The new HTML specifications include input types that offer a number of new options for requesting just the right amount of data -- say, a form element that requests the time in different levels of granularity, such as month, week, or minute. Other new input types insist that the user type in only valid URLs or email addresses. All of these input fields will be tested to ensure that the text in them is valid and that the user's progress toward satisfying the data integrity police will be tracked by a series of events. There are even hooks for a value sanitization algorithm that checks the information and perhaps cleans it up with some AJAX.
[ Also on InfoWorld: "HTML5 in the browser: Canvas, video, audio, and graphics" | "HTML5 in the browser: Local data storage | "HTML5 in the browser: HTML5 data communications." ]
Compliance with these options is gradually appearing in the browsers. At the time of this writing, for instance, Chrome lets you pin the min and max for some dates, but you can't install a value sanitization function. The minimum and maximum values are, of course, the simplest controls to create. It's much harder to offer the deeper hooks.
Holes like this are sprinkled throughout the new options. Firefox, Safari, Opera, and Internet Explorer are all slowly rolling out the new form features, and they're pretty much done with the most important ones. Alas, not all of them support the new features in exactly the same way, so it's still a bit complicated to create content that uses them. But as these gaps close, the new form elements will make it much easier for Web developers to gather information and enforce a few rules that keep the users in line.
To find out if your browser supports the new input data types and controls, try my experimental HTML5 table at wayner.org.
