Beautiful Forms using HTML5 and CSS

Even though HTML Forms are very boring & repetitive work requiring a lot of effort, they can be made really beautiful using the new features of HTML5 and a bit of advanced CSS.

First off, the Disclaimer:

• HTML5 is still a Draft and in the "Last Call" state in the WHAT Working Group.
• Not all browsers support HTML5 equally well - so expect varying results across browsers even for the same element
• Not all browsers support all elements/features yet
• Check out the list of differences between HTML4 and HTML5 here
• Check out the new features of HTML5 Forms here
• Wikipedia entry for HTML5 is here

Now that we have all those points out of our way, lets start with the actual stuff.
In this article on 24ways.org, Yaili explains in great detail how to use HTML5 and advanced CSS with CSS3 features to create really great looking forms.

Here are the most important points:

• Use fieldsets to for enclosing and grouping input elements.
• Use ordered lists to group each label+input pair of elements
• Use automatically generated counters using :before and :after psuedo-elements
• Dollops of CSS styling to make the form & its elements look really kewl

Here is the output as I see it in FF3.5.7 and IE7 on WinXP Pro - the differences are clearly noticeable. Also, the placeholder text does not show up at all!

FF 3.5.7	IE 7
Note the missing placeholder text, rounded edges and credit card images	Note the missing placeholder text, pointed edges and missing credit card images

Read the full article by Yaili on 24ways.org for the details and the code here.