One of the coolest aspects of HTML5 forms from a designers point of view is better selectors. Along with a slew of new input types and attributes, HTML5 also gives us a few new pseudo-selectors.

:required {}
:optional {}
:valid {}
:invalid {}
:default {}
:in-range {}
:out-of-range {}

We can use these pseudo-selectors along with attribute selectors (below) to really zero in on form elements.

[autofocus] {}
[autocomplete] {}
[list] {}
[placeholder] {}
[type=range] {}
[multiple] {}

The folks over at Wufoo maintain a page with this and more information on HTML5 forms, including helpful JavaScript libraries, browser compatibility, and testing information.

Full disclosure – I am a happy Wufoo customer. I use Wufoo for many forms on State Supply’s Website.

Posted by: John Dugan