HTML 5 Form Elements

Now that you have learnt about HTML form elements in versions prior to HTML5, it's time to learn what's new. And there are quite a lot of exciting new features you can implement. It doesn't make sense not to implement them right now, as in most cases you'll just get a plain old text box if a browser doesn't support the new element. The HTML 5 elements and attributes we'll explore are:

Placeholder
Required
Email
Url
Number
Range
Date/Time
Search
Color

In the examples that follow, it's better to create a new HTML page, rather than use the one you have. Save it with the name html5_forms.html. The best browser to use for these examples is Opera, as the latest version of this browser supports most of the new form elements. Internet Explorer is probably the worst, in terms of support for HTML 5 form elements (we tested with version 9 of IE). But the HTML 5 form elements were tested on the following browsers (or later versions):

Google's Chrome Version 12
Firefox Version 10
Internet Explorer Version 9
Opera Version 11
Safari Version 5

The first HTML 5 form elements we'll take a look at are Placeholder and Required, which are attributes rather than a real form element.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 9 (HTML5 and Forms)