HTML5 is definitely one of the hot and happening things in the web technologies arena. Many of the big names like Apple and Google are embracing HTML5 and are aggressively adding it on to their products. I have been following some of the new developments that are coming up in this version and also trying to learn it by building forms, layouts etc. There are many awesome tutorials out there in the design and coding blogs if you are looking to join the wagon.
Web Forms have always been an obsession for me and with HTML5 and CSS 3 they have got really pretty and usable. This post is a small exhibit of how easy is it to build a beautiful web form by using HTML5 and CSS3. There have been many input types for forms and this article from Dive into HTML5 sums it up nicely. The inline validation for the webform is performed using jQuery.
What’s good in this form?
- Meaningful HTML5 tags like required input, placeholder text, autofocus on pageload, new attribute types.
- A few CSS3 properties like border radius and text shadows.
- Regex based validity checking for the input fields. (part of the jQuery plugin). I did make a few modifications in the plugin to suit my needs but it is good to use in the way it comes.
This webform presents itself with all the HTML5 and CSS3 goodness when viewed on Chrome, Safari or Firefox 3.5. It makes use of some of the recently introduced HTML5 tags making the mark-up meaningful and also some nifty CSS3 properties to enhance the look and feel. The inline validation is made possible with the awesome jQuery plugin from Cedric Dugas
This was built using the examples from the W3C HTML5 forms page. The markup and design are very similar to the one illustrated in this fabulous tutorial by Inayaili de Leon for 24Ways.org. I did try it on my iphone and everything worked perfectly including the validation prompts.
