How you can use HTML5 Web Forms 2.0?

Webforms 2.0 (HTML5) introduces many useful features. Things that are usually done using javascript now are built 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

  1. 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

  1. A form’s 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 the browser’ autocomplete.

So, some browsers support new attributes, some don’t. Is there an easy way to find out? Here is a little snippet that can help you to find if a 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 October 2, 2010 by


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

Very nice coding…I liked it.

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

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