16 Very Useful Smarty Scripting Tips and Techniques to Make Templates Smarter

PHP Programming

A compilation of useful Smarty template scripting tips and techniques to help build smarter dynamic templates for PHP programmers and template designers. Great practical resource for people who are learning to script Smarty templates. Saves valuable time on research.

1. HTML Code Reuse

   Use {capture} tags to assign any output it generates into a variable that you can use to display the captured content multiple times throughout your templates.
   
   Assign the output to the variable "nav":

   {capture name='nav'}
   <ul>
   {section name=item loop=$nav}
     <li><a href="{$nav[item].url}" title="{$nav[item].title}">{$nav[item].label}</a></li>
   {/section}
   </ul>
   {/capture}

   Show the captured content.

   {$smarty.capture.nav}

   You can also assign the output to a template variable.

   {capture name='nav' assign='navmenu'}

   Then display the content using the variable.

   {$navmenu}

   When name is not specified, "default" is used and can be displayed like this:

   {$smarty.capture.default}

2. Passing Variables from Sub-Templates

   While using $GLOBALS array via {php} would do the trick, using {capture} is neat and recommended considering most template designers don't want to get their hands dirty on PHP. After all, smarty template files are not meant for PHP codes.
   
   In header.tpl:

   {capture name='columns'}3{/capture}

   Then, in index.tpl:

   {include file='header.tpl'}
   {if $smarty.capture.columns == '3'}
   . . .
   {/if}
   {include file='footer.tpl'}

   Can even access the variable inside footer.tpl:

   {if $smarty.capture.columns == '3'}
   . . .
   {/if}

3. Including Sub-Templates using Custom Delimiters

   To include a sub-template that inserts values of template variables in embedded JavaScript or CSS rules, use {php} tags, instantiate a new Smarty object, assign values to template variables, and finally, display the sub-template.
   
   main.tpl

   {php}
   $smarty = new Smarty;
   $smarty->left_delimiter = '<!--{';
   $smarty->right_delimiter = '}-->';
   $smarty->assign('size', '36px');
   $smarty->assign('pre', 'Great');
   $smarty->assign('post', 'Templates');
   $smarty->display(message.tpl');
   {/php}

   message.tpl

   <style type="text/css">
   <!--
   h2 {font-size: <!--{$size}-->}
   -->
   </style>
   <h2>Welcome to the World of <!--{$pre|capitalize}--> Smarty  <!--{$post|capitalize}--></h2>
   <script language="javascript" type="text/javascript" >
   <!--
   function welcome(){
     alert('Welcome to the World of <!--{$pre|capitalize}--> Smarty  <!--{$post|capitalize}-->');
   }
   welcome();
   -->
   </script>

   Above code will display "Welcome to the World of Great Smarty Templates" with font size 36px and pops up an alert with same message.
   

4. Debugging Smarty Templates

   Smarty has a debugging console that allows you to easily examine assigned template variables, included templates and config file variables for the current template.
   To enable the debugging console:
   
   1. Set Smarty $debugging property to true.

      <?php
      $smarty = new Smarty;
      $smarty->debugging = true;
      ...
      ?>

   2. If the debug console window does not pop up when you load the page, set $debug_tpl property to the path of your debug template. By default, Smarty will look for the "debug.tpl" in SMARTY_DIR. This file is included in Smarty distributions and can be found in library "libs/" folder.
      
   The easiest and quickest way to enable debugging console is by placing a {debug} tag in your templates. It works regardless of the $debugging settings in the php script. However, it only allows you to see all the available variables within the scope of the current template.
   
   Example usage:

   <h1>{$title}</h1>
   {debug}
   <p>{$description}</p>

5. Accessing Request Variables from Smarty Templates

   Request variables available in PHP scripts can be accessed from your Smarty templates through the reserved template variable {$smarty}. Request variables include $_GET, $_POST, $_COOKIE, $_SERVER, $_ENV, and $_SESSION.
   Examples:
   
   Output the value of $_GET['page'] from the url "http://www.jampmark.com/index.php?page=about"

   {$smarty.get.page}

   Output the value of $_POST['page'] from a posted form

   {$smarty.post.page}

   Output a cookie variable, $_COOKIE['status'] from request header

   {$smarty.cookies.status}

   Output a server variable, $_SERVER['SERVER_NAME']

   {$smarty.server.SERVER_NAME}

   Output a system environment variable, $_ENV['PATH']

   {$smarty.env.PATH}

   Output a session variable, $_SESSION['id']

   {$smarty.session.id}

   Output the value of "username" from merged get/post/cookies/server/env

   {$smarty.request.username}

6. Accessing Template Variables from PHP script

   You can access template variables using Smarty method get_template_vars() in PHP scripts. However, template variables are only available after or during template execution. The latter can be achieved by embedding PHP code directly into the smarty template using {php} tags or by including a php file using the built-in function {include_php} tag.
   
   Consider the template code:

   {assign var='title' value='Smarty Templates'}

   Accessing variables after template execution:

   // execute the template and return the result to a variable
   $page = $smarty->fetch('index.tpl');
    
   // will output "Smarty Templates"
   echo $smarty->get_template_vars('title');
    
   // assign value to the variable
   $smarty->assign('title', 'The Great Smarty Templates');
    
   // this will output "The Great Smarty Templates"
   echo $smarty->get_template_vars('title');
    
   // this will dump all variables assigned in the template
   var_dump($smarty->get_template_vars());

   There are two (2) ways to access variables during template execution from inside {php} tags.

   {php}
   // using $this->_tpl_vars
   echo $this->_tpl_vars['title'];
    
   // using $this->get_template_vars() method
   // the variable $this, is a smarty object
   echo $this->get_template_vars('title');
   {/php}

7. Variable Substitution in String with Double Quotes

   This works similar to that of PHP where variables embedded in a double quoted string are expanded to their values.
   

   • Simple substitution:

     With $filename having a value of "footer", the file attribute below will have a value of "templates/footer.tpl".

     {include file="templates/$filename.tpl"}

     Code below won't work because string is surrounded by single quotes.

     {include file='templates/$filename.tpl'}

   • Array indexes

     Assuming $module[1] contains "user_menu":
     
     The $module[1] below will be replaced with “user_menu” and will translate into "user_menu.tpl".

     {include file="$module[1].tpl"}

     With $index value equal to 1, code below will do the same thing as above. In this case, enclose with backticks.

     {include file="`$module[$index]`.tpl"}

   • Associative Arrays

     Let's put $item['name'] equals ""Computer":
     
     The variable $item.name below will be replaced with "Computer" so value will be "Computer unit".

     {assign var=’label’ value="`$item.name` unit"}

     With $prop value equals to "name", the following is equivalent to the above.

     {assign var='label' value="`$item.$prop` unit"}

   • Objects

     Say, we have an object variable where $book->title contains "Smarty Templates".
     
     The $book->title below will be replaced with "Smarty Templates" so $msg will have value of "My Smarty Templates book".

     {assign var='msg' value="My `$book->title` book"}

     With $property equal to "title", $msg will have same value as above.

     {assign var='name' value="`$book->$property`"}

     Note: Always enclose variable names with backticks (`) when they contain dots (.), object references (->), or when using index variables for arrays.

8. Handling Blank Template Variables

   Blank template variables may break your HTML table layout. It may also cause <img> tags to load your web page in the background and generate multiple entries in the access log for every single visit due to src attribute being empty.
   Use {if} tag to output a default value when a variable is empty. Or use the shortcut, the "default" variable modifier.
   
   Consider the following code that outputs &nbsp; inside HTML table cell:

   <table><tr><td>
   {if $user eq ''}
     &nbsp;
   {else}
     {$user}
   {/if}
   </td></tr></table>

   The shortcut:

   <table><tr><td>{$user|default:'&nbsp;'}</td></tr></table>

   Here is a code that handles <img> src properly:

   <img src="{if $image_url eq ''}/images/default.png{else}{$image_url}{/if}" />

   Or simply:

   <img src="{$image_url|default:'/images/default.png'}" />

   The shortcut makes a cleaner code but using it throughout your templates can be a bit ugly.
   
   Consider the code below:

   <a href="{$image_url|default:'/images/default.png'}">
   <img src="{$image_url|default:'/images/default.png'}" />
   </a>
   <p>Path: {$image_url|default:'/images/default.png'}</p>

   Here is a much cleaner version using {assign} tag with  default .

   {assign var='image_url' value=$image_url|default:'/images/default.png'}
   <a href="{$image_url}">
   <img src="{$image_url}" />
   </a>
   <p>Path: {$image_url}</p>

9. Passing Variables to Sub-Templates

   It is common for web developers and web designers to place repetitive contents into separate template files and {include} them where needed. One typical example is header.tpl which includes the html title tag. Suppose need it to show different page titles depending on which page included it. You can do that by placing "title" as attribute of {include} tag and this is how we pass parameters to sub-templates in Smarty
   
   Example template code that includes header.tpl with parameter "title".

   {include file='header.tpl' title='Welcome!'}
   {include file='footer.tpl'}

   In header.tpl

   <html>
   <head>
   <title>{$title|default:'Smarty World'}</title>
   </head>
   <body>

   In footer.tpl

   </body>
   </html>

10. Formatting Numeric Outputs

    You don't need to assign multiple variables with same values in different formats because there is a variable modifier in Smarty that allows you to format output. "string_format" uses same formatting syntax in sprintf() function in PHP.
    
    Example:

    {$number}
    {$number|string_format:’%.2f’}
    {$number|string_format:’%d’}

    With $number equal to 23.5787446, the code above will output:

    23.5787446
    23.58
    24

11. Handling Dates

    As a rule of thumb, PHP coders should always pass dates to Smarty templates as timestamps. This allows template designers to use the "date_format" modifier for full control over date formatting. You also make it easy to compare dates if necessary.
    
    Default date format:

    {$createDate|date_format}

    Will output:

    Feb 28, 2009

    Custom date format:

    {$createDate|date_format:'%Y/%m/%d'}

    Will output:

    2009/02/28

    Comparing dates:

    {if $startDate < $endDate}
      . . . do something . .
    {/if}

    To convert {html_select_date} output into timestamp format in PHP, use the function below:

    <?php
    function makeTimeStamp($year='', $month='', $day='')
    {
       if(empty($year)) {
           $year = strftime('%Y');
       }
       if(empty($month)) {
           $month = strftime('%m');
       }
       if(empty($day)) {
           $day = strftime('%d');
       }
     
       return mktime(0, 0, 0, $month, $day, $year);
    }
    ?>

12. Obfuscating E-mail Addresses

    When showing e-mail addresses on your web pages, make sure they are obfuscated to somehow hide them from spam bots. In Smarty, you can use {mailto} tag to obfuscate an e-mail address. It works by scrambling the e-mail address using Javascript and embeds it in the HTML source. The e-mail address will still be readable by humans while giving spamming bots hard time to read.
    
    Example:

    <div id="contact">Contact us at 
    {mailto address=$emailAddress encode='javascript' subject='Hi Smarty'}
    </div>

13. Alternating CSS Styles

    Displaying rows of information in alternating background colors is a great way to improve readability. In Smarty, you can use the {cycle} tag to set alternating CSS styles.
    
    Here is a sample code that sets "odd" or "even" css class to tags in alternates.

    <table>
    {section name=item loop=$items}
      <tr class="{cycle values='odd,even'}">
        <td>{$items[item].title}</td>
        <td>{$items[item].description}</td>
      </tr>
    {/section}
    </table>

    Then set CSS "background-color" property with different colors for each CSS class.
    

14. Fetch and Display Contents on Demand

    Traditionally, inserting new components into your templates would require adding data collection logic to the PHP script. On the reverse, removing components from your templates would also require removal of data collection logic from PHP script to optimize its performance.
    This can be a maintenance nightmare for large and complex projects especially when PHP programmer and template designer are two different people.
    The solution is to write component functions that are executed on demand when triggered by the template.
    There are 2 ways to write on demand scripts:
    

    1. Use the {insert} tag

       It works by calling a user-defined php function that begins with "insert_" and inserts the return value on the template where the {insert} tag was placed. The tag is useful for displaying dynamic contents because its output is never cached regardless of the template cache settings.
       
       The PHP code:

       <?php
       require 'Smarty.class.php';
       $smarty = new Smarty;
       $smarty->display('index.tpl');
        
       function insert_getNews($params)
       {
         if ($params['type'] == 'latest') {
           // retrieve news items and process
         }
         // return the result
         return $html;
       }
       ?>

       The template code in "index.tpl":

       <div class="news">
       <h3>Latest Smarty News</h3>
       {insert name='getNews' type='latest'}
       </div>

    2. Write your components as plugins

       Plugin is a module in its own file that contains PHP script for fetching necessary data and assigns them to template variables. It is always loaded on demand that you don't have to worry about adding and removing lines of logic from your PHP scripts.
       As an example, here is a simple Smarty news plugin.
       
       function.news.php – observe naming convention and put in plugins directory usually "smarty/libs/plugins" otherwise set the $plugins_dir.

       <?php
       // function for fetching news items
       function fetch_news($symbol)
       {
         // the news items could be queried from a database
         // but for this example we just create and return an array of items.
         $items = array(
         array('title'=>'Smarty News', 'description'=>'Great Smarty Templates'),
         array('title'=>'PHP News', 'description'=>'Smarty Templating Engine'),
         );
         return $items;
       }
        
       function smarty_function_news($params, &$smarty)
       {
         // call our custom function
         $news = fetch_news($params['symbol']);
        
         // assign template variable
         $smarty->assign($params['assign'], $news);
       }

       To use Smarty news in your index.tpl for display,

       {news symbol='SMARTY' assign='items'}
       <ul>
       {section name=item loop=$items}
         <li><h3>{$items[item].title}</h3><p>{$items[item].description}</p></li>
       {/section}
       </ul>

15. Using CSS and Javascript Codes in a Smarty Template

    By default, Smarty parses anything that is inside { and } characters including those used in CSS rules and Javascript functions. Without proper coding and escaping techniques, your page will render into a disaster.
    There are four (4) ways to escape from Smarty parsing:
    
    1. Separate your CSS and Javascript codes into their own files and include them into your template using standard HTML methods.
       
       Linking a CSS file:

       <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">

       Including a Javascript file:

       <script type="text/javascript" src="popup.js"></script>

    2. Enclose embedded CSS and Javascript code with {literal} and {/literal} tags so Smarty engine would leave them alone.
       
       Embedding CSS:

       <style type="text/css">
       <!--
       {literal}
       p {text-indent: 10pt}
       body {margin:0; padding:0;}
       {/literal}
       -->
       </style>

       Declaring embedded Javascript function:

       <script language="javascript" type="text/javascript" >
       <!--
       {literal}
       function hello_world(){
         alert('Hello Smarty World');
       }
       {/literal}
       -->
       </script>

    3. Change Smarty's $left_delimiter and $right_delimiter to custom delimiter strings so you can use curly braces in your templates. In addition, it would allow you to insert template variable values into your CSS and Javascript codes to make them dynamic on the fly at server side.
       
       The PHP code:

       <?php
       require 'Smarty.class.php';
        
       $smarty = new Smarty;
        
       $smarty->left_delimiter = '<!--{';
       $smarty->right_delimiter = '}-->';
        
       $smarty->assign('title', 'The Smarty Template Engine');
       $smarty->assign('element', 'h1');
       $smarty->assign('size', '36px');
       $smarty->assign('popup', 'alert');
       $smarty->display('index.tpl');
       ?>

       The Smarty Template "index.tpl":

       <head>
       <style type=”text/css”>
       <!--
       <!--{$element}--> {font-size: <!--{$size}-->}
       -->
       </head>
       <body>
       <<!--{$element}-->><!--{$title}--></<!--{$element}-->>
       <script language="javascript" type="text/javascript" >
       <!--
       function show_popup()
       {
         <!--{$popup}-->('<!--{$title}-->');
       }
       //-->
       </script>
       </body>

       The code above will output:

       <head>
       <style type="text/css">
       <!--
       h1 {font-size: 36px}
       -->
       </head>
       <body>
       <h1>The Smarty Template Engine</h1>
       <script language="javascript" type="text/javascript" >
       <!--
       function show_popup()
       {
         alert('The Smarty Template Engine');
       }
       //-->
       </script>
       </body>

    4. Use {ldelim} and {rdelim} tags in place of { and } in defining your CSS rules and JavaScript functions assuming the default delimiters are set. This is not practical for real-world use and it will break when delimiters are set to other strings.
       
       Define CSS rules:

       <style type="text/css">
       <!--
       p {ldelim}text-indent: 10pt;{rdelim}
       body {ldelim}margin:0; padding:0;{rdelim}
       -->
       </style>

       Will output:

       <style type="text/css">
       <!--
       p {text-indent: 10pt;}
       body {margin:0; padding:0;}
       -->
       </style>

16. Caching Smarty Templates

    Caching speeds up calls to display() and fetch() methods by saving its output to a file. This file is then displayed instead of regenerating the output. Use caching if your content does not change very often. Set $caching = 2 and use $cache_lifetime to control how much time you want to keep the cache enough to display fresh changes on your contents.
    
    Set caching on:

    <?php
    require 'Smarty.class.php';
    $smarty = new Smarty;
     
    // When $caching = 1,
    //   $cache_lifetime = 1 will force the cache to never expire
    //   $cache_lifetime = 0 will cause the cache to always regenerate
    // When $caching = 2,
    //   $cache_lifetime sets the cache expiry which can also be set for individual template.
    $smarty->caching = 2; // lifetime is per cache
     
    // Regenerates cached content if any templates or config files that are part of this cache are changed 
    $smarty->compile_check = true;
     
    // $smarty->force_compile = true; will force the cache to always regenerate
     
    // set the cache_lifetime for index.tpl to 5 minutes
    $smarty->cache_lifetime = 300;
    $smarty->display('index.tpl');
     
    // set the cache_lifetime for home.tpl to 1 hour
    $smarty->cache_lifetime = 3600;
    $smarty->display('home.tpl');
    ?>

    2 things to consider seriously when implementing caching:
    
    1. It is not recommended to put the cache directory under the web server document root. Set $cache_dir to a directory not accessible from the web.
    2. Make sure the cache directory is writeable by the web server.

There you have it. The 16 Smarty scripting tips and techniques to help you build smarter templates for your Smarty web projects.
For anything else, visit the official web site of Smarty Template Engine for PHP
Got Smarty tips not included here? Feel free to post them below.

cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets

Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets

July 27th, 2010 by zoltan · 23 Comments

Updates:

• Sept. 10, 2010: This webforms2 script in the link below has been modified to fix validation issues with the newer versions of Safari and Chrome.
• Aug. 6, 2010: This article has been translated into Korean.
• May 12, 2011: html5Widgets has been updated to support the oninput event.

Range:
Placeholder:
Color:

Working example HTML5 Form using Modernizr, webforms2 and my new script, html5Widgets. Go ahead … try them out. You know you wanna!

Calendars, colour swatches, sliding widgets, client side validation: this is the nirvana that the HTML5 forms module promises. Some would say “So what? I’ve seen this on the web for years!”, and they’d be right. There have been some really brilliant people coding some really interesting widget and validation frameworks, so why should we change?

• Ease the markup learning curve: HTML5 form widgets and validation have been built to be as dead simple to markup as a select box with no JavaScript knowledge required
• It’s a W3C standard: so you know that it’ll work for years to come and if you have problems, you could always ask almost anyone in the web development community for help.
• Cellular phone support: HTML5 form fields will have optimized user interfaces appropriate for the type of device. Blackberry already has optimized versions of the date/time and color widgets and, according to Mark Pilgrim’s article A Form of Madness, the virtual keyboards that appear when using HTML5 form fields are optimized for the data being input.
• Web development tools will have to support it: It’s a safe bet that Aptana, Dreamweaver, and all the other IDEs out there will have HTML5 support.
• It’s HTML5: when you tell your non-techie co-workers that you use it, you will be the envy of all — after all, it must be five times better than regular HTML, right? Your boss will be so impressed that you are now a guru in this futuristic technology with a cool numbered acronym that he or she will give you a big fat raise!!! (Okay, okay. Don’t try to laugh too hard … your co-workers will start to worry).

The Support Dilemma

Unfortunately, today’s support for the HTML5 Form Module is spotty with each browser supporting different parts of the specification. Take a look at Wikipedia’s HTML5 Forms comparison chart. You’ll see each browser supporting a different set of features, but the lowest common denominator they all support is rather small.

But I Want To Use It Now!!!

HTML5 Forms started off as WebForms 2.0 back in 2004, so I wasn’t surprised to see that a few developers had already coded some JavaScript implementations. Weston Ruter’s cross browser library, webforms2.js, implements a huge chunk of it, including parts that didn’t make the transition from WebForms 2.0 to HTML5 forms (e.g. Webform 2.0′s Repetition Model).
Since widgets weren’t implemented in webforms2, I created html5Widgets.js. This interface library is independent of webforms2 – if all you want is a cross-browser HTML5 form with validation, then all you need is the original webforms2.js. If you want special widgets that are not available for all browsers, include html5Widgets.js. Since I did not want to re-invent the wheel by creating widgets from scratch, html5Widgets.js uses some really nice third party JavaScript libraries to create them (more on that below). It also uses Modernizr to detect if there is native support for each of the HTML5 form widgets – if not, html5Widgets steps in to put the right widget in place. To save bandwidth, developers only need to include the third party libraries for the widgets they need.
In the rest of this article, I will go over different parts of the HTML5 specification and show how you can use them in your applications today, step-by-step. Each section will state which browser natively supports that part of the specification, and what is needed for browsers that don’t. Eventually, when the browser manufacturers catch up with the standard, you won’t need to use any JavaScript at all.

Form Validation Using the required and pattern Attributes

The required attribute makes an input field mandatory and forces the user to enter in a value in order to submit the form data. The markup is simple

(Note:, you can also just use required on its own if you aren’t trying to be XHTML compliant.)
The pattern attribute forces the user to enter in a value using a specified format. It uses regular expressions to define this format. For example, if you want to force the user to input a U.S. Zip Code inside a form field, you would use the following markup.

<--
     zip code regular expression from
     http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256F6B005294C2
-->

Note that required and pattern are independent from each other. You can have a pattern set on a form field without it being mandatory (i.e. the pattern would only be checked if the user enters in data into the field).
Opera 10+ (mobile and desktop editions) is the only browser that supports the validation routines natively. To use this in all other browsers, all you need is to include the following script tags in the head of your document.

Let’s take a look at how this looks visually:

Opera 10+ Windows	Firefox 3.6 with webforms2.js

Note the “starred” style of the form field — this is not the default look and feel of the required fields, but something I added with a simple amount of CSS:

input[required], select[required] {
 background: #ffffee url("../images/asterix.gif")  no-repeat left 2px;
 padding-left: 1.5em;
 width: 13.5em !important;
}

(This CSS does not work in Internet Explorer 6. Given that everything else in this article does, I hope the reader will overlook this one oversight considering that this browser should have entered retirement years ago (and have its driving license taken away, and shipped off to some really horrible nursing home watching really crappy talk shows all day and eating bad food …)
See an example of pattern and required in action.
Note that the same validation framework checks the values of inputs of type email, url and number to ensure that the values are in their respective valid formats. As an added bonus, if you are using the iPhone or iPad version of Safari, the virtual keyboard that appears will be optimized for these type of form fields (e.g. when editing a number field, the keyboard that appears contains only digits and the “+”, “-”, and “.” keys. This is native behaviour for iOS, and I hope other mobile browsers, such the Android’s, follow suit.

The autofocus Attribute

The autofocus attribute allows developers to choose which element has focus when the page is loaded. The Google front page has done this via JavaScript, and now, 12 years later, there is finally an HTML attribute to easily handle this.

Safari, Chrome and Opera support it natively. To make it work in other browsers, include the webforms2.js library, as we did in the required and pattern examples.
See an example of autofocus in action

The placeholder Attribute

A placeholder is a great visual cue to communicate any special information about a field (e.g. a description
of the data to be input, if the field is required, etc).

An example of placeholder text. The text disappears when the field has focus or if the user types information into the field.

Syntax is simple:

Safari, Chrome and Firefox support this attribute natively. To make it work in other browsers, it is necessary to load the html5Widgets library, with the necessary supporting libraries:

What do these libraries do?

• modernizr is used to detect which HTML5 attributes and tags are supported by the users’ browser
• html5Widgets is what actually does the placeholder logic, with EventHelpers.js providing cross-browser event-handling routines.

See an example of the HTML5 placeholder
tag in action.

The range Input Type and output Tag

Easily my favourite of the HTML5 widgets, range gives developers a sliding control to put inside their forms.
The syntax is simple:

The min and max attributes contain the minimum and maximum values, and step denotes by what increments the range slider increments by when moved. Note that you can use these attributes with the number input type as well, but instead of having the fancy interface, it will use the validation engine to ensure the value follows what these attributes dictate.
At the time of this writing, Opera and WebKit based browsers (like Safari and Chrome), support it natively, and html5Widgets uses the Frequency Decoder Slider Widget to implement it in unsupported browsers. To ensure cross-browser HTML5 range element goodness, place the following script tags in your document:

Take a look at the screenshots below. You will see that the way a range field varies among the browsers that natively support it, and even in some of the browsers that use html5Widgets:

	Explorer 6.x+ (html5Widgets support)	Firefox 3.5+ (html5Widgets support)	Safari 4.0+ (native support)	Chrome 3.0+ (native support)	Opera 10.0+ (native support)
Windows
Mac	Not Applicable
Linux	Not Applicable		Not Applicable

The output tag can be used to show the value of a field, or the result of an operation performed on a number of fields, using JavaScript expressions. Although the output tag may calculate fomulas referencing any form fields, it is useful especially for the range input type so users can see what value the range element is pointing to:

-

The contents of the output tag is the default value. Note the this.value syntax – I am not sure why the W3C HTML5 working group decided it was needed (why not just have the formula?), but it is. If there are other types of expressions supported in the final specification, they are not supported by html5Widgets at this time. Note that in order to apply CSS to the output tag in IE, it is necessary to use Remy Sharp’s HTML5 Enabling Script.
See an example of the range input being used with the output tag.
See an example of the output tag being used without a range field.

Update (May 12. 2011):

Since this article was written, the onforminput event has been deprecated in favor of the oninput. I have updated html5Widgets to support oninput, and have written article about its oninput support. I encourage you to see the different between the above to examples and the oninput method of using the output tag with range and without range

The datetime, datetime-local, date, week and week Input Types

At the time of this writing, Opera is the only desktop browser that supports HTML5 date fields. To support the other browsers, html5Widgets uses a slightly modified version of DynArch.com‘s Ex-”Coolest” DHTML Calendar (I decided not to use the coolest one because the Ex-Coolest has a more permissive license and it works really well). Now all browsers can support the datetime, datetime-local, date, month and week input fields, and submit these values in a consistent format.
Here are the scripts needed for the browsers that need it:

Note that the calendar widget uses language packs and that I am using the English one (calendar-en.js. Other language packs are included.
Below is a comparison between Opera’s native date widget vs. the one provided by the DynArch/HTML5Widget combo:

	DateTime Widget	Month Widget
Opera Windows
Opera Mac
Firefox 3.5+ Windows (html5Widgets support)

It looks like the native calendar for Opera for Mac is a smaller than the Windows version – hopefully this is just on my copy of the browser.
The display formats, and they values that they submit to the server, are pretty much the same

Input type	Format displayed on page	Format sent to server
datetime	yyyy-mm-dd HH:MM	yyyy-mm-ddTHH:MMZ
datetime-local	yyyy-mm-dd HH:MM	yyyy-mm-ddTHH:MM
date	yyyy-mm-dd	yyyy-mm-dd
month	yyyy-mm	yyyy-mm
week	yyyy-mmW	yyyy-mmW

See the HTML5 date widgets in action.
Note: In this example, The Opera Mobile Windows Emulator incorrectly displays the datetime and datetime-local calendars in the upper left-hand corner of the screen, but not the other ones. Since this is Opera’s own calendar widget, and not html5Widgets’, this bug will have to fixed by Opera.

Screenshot of Opera Mobile bug

The color Input Type

Currently none of the desktop browser manufacturers support the color input type (although the new WebKit based Blackberry browser seems to have a neat implementation). While we wait to see how the major browser manufacturers decide to implement color, you can use html5Widgets’ implementation which uses Jan Odvarko‘s jscolor. The script has been configured to allow only allow lower case hexadecimal rgb values to be entered, and that a blank value not be allowed, as per the W3C spec.
Here are the script tags needed to implement this in all browsers:

Below is a comparison between the Blackberry’s implementation (grabbed from the Blackberry Development Blog) and HTML5Widget/jscolor’s.

Blackberry Web Browser	Firefox 3.5 with html5Widgets.js

See HTML5Widget’s implementation of the
color input type.
Note: Like other HTML syntax, color uses the unfortunate American spelling instead of the Queen’s Proper English (i.e. colour). Ensure you spell it incorrectly in order to make this work. ;-)

How Well Do These Libraries Handle the Official Specification?

I have done some testing on some existing examples that use HTML5 forms to ensure that it works the way developers expect. Here are a few examples that I have taken, with the necessary JavaScript added:

• A cool looking payment form by Inayaili de León (originally from her HTML5 forms tutorial)
• An HTML5 Form Demo by Richard Bradshaw (originally from his Fancy Forms: HTML5 + CSS3 – JS article)
• Another cool Example by Anne van Kesteren (originally from his article Improve your forms using HTML5! on the The Opera Developer Community Website).

However, the HTML5 Forms specification is large, and unfortunately, the webforms2 and html5Widgets libraries don’t implement everything … yet!!!! Since I am really motivated with what HTML5 forms can do, I am committed to completing support to most, if not all, of the HTML5 Forms specification. The version of webforms2 in this blog post has been modified from Weston Ruter’s original verison, but it will be merged with the official Google Code version in the next week or so and will include compressed versions of all the library. The html5Widgets library will also have a permanent home there.
Things that I will be working on in the near future are:

• Support for other HTML5 form elements, among other things, datalist, number, keygen, progress, time and meter
• Support for CSS styling of HTML5 form widgets as well as the ability to style form fields according to their validation state (e.g. :valid and :invalid psudo-classes). Opera seems to be the only browser currently supporting this.
• Default styling for some of the new input types, like tel, email, url. Opera for Mac and Opera Mobile are the only browsers I know of that support this for email and url.
  
  
  

  email and url form fields in Opera Mac
• Support for customizing the validation look and feel. This is one I would love to do, since I’m sure a lot of developers would want to change how validation errors appear on the screen. Unfortunately, the HTML5 specification doesn’t describe a standard way of doing this. It will be interesting to see how the browser manufacturers deal with this issue (To any browser developer reading this is working on the display form validation errors: I would love to know how you are doing this if you are willing to share. Hint, HINT! ;-))
• In Internet Explorer 7 and lower, the ability to style input types it doesn’t support natively with CSS code like input[type="range"]
• Enabling HTML5 forms validation on the server side to ensure data integrity for browser that don’t support HTML5 forms that have JavaScript disabled.
• Support for internationalization of the error messages used in webforms2. If anyone wants to help in the translation of these error messages, please drop me a line — I need help!

Below is a modified version of the Wikipedia’s HTML5 forms compatibility table and see what how things the support situation stands today.

	Trident	Gecko	WebKit	Presto
Attributes
autocomplete	Yes	Yes	Yes	2.0
list	No	No	No	2.0
required	Yes (with webforms2)	Yes (with webforms2)	Yes (with webforms2)	2.0
multiple	No	1.9.2	526	No
pattern	Yes (with webforms2)	Yes (with webforms2)	Yes (with webforms2, and natively in Nightly build)	2.0
min, max	Yes (with webforms2)	Yes (with webforms2)	Yes (with webforms2)	2.0
step	Yes (with webforms2)	Yes (with webforms2)	Yes (with webforms2 and Nightly build natively)	2.0
placeholder	Yes (with webforms2)	1.9.3	Yes	Yes (with webforms2)
form	No	1.9.3	No	2.0
autofocus	Yes (with html5Widgets)	1.9.3	Yes (with html5Widgets and Nightly build natively)	2.0
maxlength	No	1.9.3	Nightly build	2.0
novalidate	No	No	Nightly build	No
control	No	1.9.3	No	No
accept	No	1.9.3	No	No
formtarget	No	No	No	No
formaction	No	No	No	No
Elements
datalist	No	No	No	2.0
keygen	No	1.0	125	1.0
output	No	1.9.3	No	2.0
progress	No	No	Nightly build	No
meter	No	No	No	No
Input types
search	No	1.9.3	312	No
tel	No	1.9.3	Nightly build	No
url	No	No	Nightly build	2.0
email	No	No	Nightly build	2.0
datetime	Yes (with html5Widgets)	Yes (with html5Widgets)	Yes (with html5Widgets and Nightly build natively)	2.0
date
month
week
time
datetime-local
number	No	No	Nightly build	2.0
range	Yes (with html5Widgets)	Yes (with html5Widgets)	Yes	2.0
color	Yes (with html5Widgets)	Yes (with html5Widgets)	Yes (with html5Widgets and Nightly build natively)	Yes (with html5Widgets)

Integrating With visibleIf To Make Even Cooler Looking Forms

The webforms2 and html5Widgets libraries are designed to co-exist well with visibleIf to create interactive forms with fields that only validate the ones that visibleIf is displaying.
See an example of HTML5 validation working with the visibleIf JavaScript library

Acknowledgments, Shout-outs and Kudos

• Faruk Ates and Paul Irish for the definitive HTML5 and CSS3 feature detector, modernizr.
• Weston Ruter for doing the insane amount of work on webforms2 years ago.
• Brian McAllister: for making the excellent Unobtrusive slider control which I used for the range element.
• Mihai Bazon for keeping the The Ex-“Coolest” DHTML Calendar around even though he has a paid product.
• Jan Odvárko for his rocking jscolor widget.
• Remy Sharp for his fine HTML5 Enabling Script so we can force IE to style things like the output tag.
• Inayaili de Leon, Anne van Kesteren and Richard Bradshaw for allowing me to show how easy it is to make their original HTML5 Form demos work with html5Widgets.

Further Reading

• The W3C HTML5 Forms Specification Working Draft: The Working Draft is in “Last call for comments” status, so there may be some last minute changes.
• A Form of Madness: Chapter 10 of Mark Pilgrim’s great reference on HTML5.
• Web Forms 2.0 Working Draft: The WHATWG spec that the W3C spec is based on. It includes the repetition model which didn’t make it into the W3C spec

Download

This archive is the temporary home for html5Widgets. It will soon be hosted at the webforms2 Google Code page.
Both html5Widgets and webforms2 both have permanent homes at github (however, the html5Widgets github page contains a copy of webforms2 in it for your convenience). Weston Ruter has been kind to give me deciding rights over the destiny of this code. I will be updating webforms2 in the near future.
Download the latest version of html5Widgets, which includes webforms2, from github.

Tags: Forms · HTML5 · JavaScript · Polyfills

How To Attach Files For Downloads On Blogspot

It’s not possible to attach files with your blog posts on blogger except you’re only dealing with images and videos. Unlike wordpress where you can freely attach files of all formats with your blog posts, you have to find an external file host to do this on blogspot. Maybe you have some games, softwares, zip files or some files in an uncommon format you intend to share with your blog readers, there are still alternative sites to use that provide free space to host these files.

There are so many file sharing/hosting sites you can use and these include hotfile, mediafire, rapidshare, megaupload and so on. I do use hotfile because they allow remote uploading. This means uploading files through file URL. With hotfile, I only need to have the download link of the file i intend to upload and the file gets copied to my hotfile file manager. Below is a complete list of file sharing sites I found you can use on your blog:

-Hotfile
-4shared
-Mediafire
-DropBox
-Box
-BigUpload
-Sendspace
-Files2U
-WikiUpload
-Filehosting

Though the service provided by these sites are free, there are certain conditions you must adhere to and if you fail to do this, your files will be deleted without informing you.

Hosting Your Files On Google
Unknown to many, everyone with a google account is entitled to a free space to upload files which can be used on their blogs. Just like the picassa web album which is linked to your blogger account to upload pictures to be used on your blog, Google sites can also be used to host files on blogspot. The space you’re allocated (100MB) is quite very small unlike the file sharing sites listed above but you still have control over your files and you can be rest assured no one is going to delete your files. It’s quite useful if you’re hosting some light weight files and javascripts to use on your blog.

Another added advantage is that your file can be hotlinked, this means you can link directly to the file on your blog without showing your visitor any download page.

How To Upload Files To Google Sites
I wasn’t used to google sites at first and it took me some time to figure out how to upload files there and use it here on blogger. You need to create a Google Sites account account and create your first site.
-After this, go to the created site and click on the drop down menu at the top right of the page.


-Click on Manage Site

-Select Attachment from the links on the left side of the page

-Click on Upload, select the file and that’s it.

- When you’re done uploading, right click on the download link to copy it our. It might look like this:

https://sites.google.com/site/capriofiles/DonCaprioBloggerTemplate.zip?attredirects=0&d=1


Just delete the rest stuff after the file name to make it look like this.

https://sites.google.com/site/capriofiles/DonCaprioBloggerTemplate.zip

You can as well mask the link as shown below:

Download Here

You can now attach the direct link to the file with your blog posts. Like I said, Google Sites file hosting is only for small files. if you intend to host large files, try using the file sharing sites earlier mentioned.