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: Input element type
The new options take on some of these chores. The compliant browser will now make a distinction between a wide range of data types, including dates, email addresses, numbers, and URLs. Each of these types has several more specific options. The date field may ask for a full date, a year and week alone, a year and month alone, or just the time of day. If you want to be very specific, you can mix together a date and time with the option of including or leaving off a time zone.
Some of these types seem like invitations to trouble. I'm happy I'm not responsible for implementing the code that will validate all of the different kinds of telephone numbers around the world. In America, it's a hassle because some folks will punctuate the number in odd ways, like wrapping the area code in parentheses. Freezing these rules in the browser standard will be problematic if the phone companies dream up new ways of using the numbers. Of course, if that day arrives we can always override the validation because there are attributes that allow specifying
HTML5 forms: Input element type attributes
Choosing the type is just the beginning of the fun when creating these new form elements. Each type may or may not have additional features that can be specified with additional attributes. Many of these attributes are straightforward. For example,
max can only be used with times and numbers, and not with unlikely items like email addresses, even though they're technically sortable.
By my quick count, there are 37 attributes and 14 different types. The current version of the HTML5 input element specs includes a table that shows which attributes are allowed (limiting the
max value of a number, for example) and which are ignored (limiting the
max value of an email address) for which types. I'm still a bit confused by why you can only specify a
placeholder for some types. This short suggestion (for example, "your email address") isn't available for times or colors. Most of the other pairs that are allowed or forbidden are easy to understand, but I think most will find one or two combinations that they wish were there.
The new mechanisms are meant to extend the status quo, and that means not changing some of the old patterns. To me, it might make sense to allow each type of input to be hidden with an attribute, but the new standard continues the old approach of making "hidden" a type that accepts generic text. That's the price of backward compatibility.
HTML5 forms: Client-side form validation
Specifying the type and attribute are just the beginning because the validation process is fairly transparent. While the form will handle most of the work for you, it will also allow a number of hooks for interrupting the process or replacing it.