Currently seeking new career opportunities in web development, particularly with Laravel, Hire Me

HTML5 support for older browsers

David Carr

Tutorials HTML

Sitepoint released a great post today HTML5 Forms: The Markup</a> it explains the various input tags that can be used in HTML 5. Some of these are very useful such as range, date, datetime, datetime-local, week, color. Unfortunately most of these have mixed support across browsers IE is lacking the most.

I've come across a github repo <a href='https://github.com/zoltan-dulac/html5Forms.js'>html5Forms.js</a> that "Implements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more." meaning HTML 5 elements can be used, any browser that does not support the tags uses the js file to add support.

In order for this to work Modernizr must be used for feature detection. 
Here is an example for usage: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content=
        "text/html; utf-8">

        <title>HTML5 date time examples</title>

        <!-- Needed for Forms Feature Detection -->
        <script type="text/javascript" src="js/modernizr.com/Modernizr-2.5.3.forms.js">
        </script>
         
        <!-- Needed for Validation --> 
        <script type="text/javascript" src="js/html5Forms.js" data-webforms2-support="date" data-webforms2-force-js-validation="true" data-lang="qq">
        </script>    

    </head>

    <body id="myExample" class="html5Widgets-debug">

        <input type="datetime" name="DateTimeTest" value="">

    </body>
</html>

 

Laravel Modules Your Logo Your Logo Your Logo

Become a sponsor

Help support the blog so that I can continue creating new content!

Sponsor

My Latest Book

Modular Laravel Book - Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Learn Laravel with Laracasts

Faster Laravel Hosting

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.