How you can use HTML5 Web Forms 2.0?

Webforms 2.0 (HTML5) introduces many useful features. Things that usually done using javascript now are build in a browser.

1. Textbox watermark. Supported by FireFox 3.7+, Safari 4.0+, Chrome 4.0+, iPhone 4.0+

<label for="txtUserName">User Name:</label>

<input id="txtUserName" name="txtUserName" type="text" placeholder="Your Name"/> 

Placeholder Example

2. Default form element autofocus. See Google search as an example. Supported by Safari 4.0+,Chrome 3.0+, Opera 10.0+

<label for="txtSearch">Search:</label>

<input id="txtSearch" name="txtSearch" type="text" autofocus/>

Search autofocus

3. Form / input autocomplete is partially implemented by all current browsers.

<form autocomplete="off">

<input type="text" id="txtSearch" autocomplete="off"/>

If you ever tried to implement custom autocomplete, just like google has, then you know, first of all you need to turn off browser's autocomplete.

So, some browsers support new attributes, some doesn't. Is there an easy way to find out? Here is a little snippet that can help you to find if certain attribute is supported.

<script type="text/javascript" language="javascript">

    String.prototype.hasProperty = function(property)


        return property in document.createElement(this);


    if (!'input'.hasProperty('autofocus'))


        // Custom implementation for autofocus



Posted on Saturday, October 2, 2010 by | Comments (2) | Add Comment



Re:How you can use HTML5 Web Forms 2.0?

Very nice coding...I liked it.

Posted on 10/5/2010 5:05:13 AM by web design USA #

Re:How you can use HTML5 Web Forms 2.0?

This is excellent, just sucks we will have to code fallbacks for older browsers for many years into the future.

Posted on 10/14/2010 7:01:27 AM by BaseJ #

New Comment

Your Name:
Email (for internal use only):
Code above:


Valid HTML5