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"/> 

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/>

3. 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
    }
</script>