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

    }

</script>


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

Comments

Gravatar

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 #
Gravatar

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. http://basejewellery.com

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

New Comment

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

Categories

Recent Tweets

  • Simon Ince's Blog: Hierarchies with HierarchyID in SQL 2008 http://t.co/xSDwiF6rRS.
  • Visual Studio 2010 WAS painfully slow - CodeProject http://t.co/Usba1x6CZy

Valid HTML5