Showing angular expression at page load

angularIn my application I want to show a table data. I am showing a loading icon at first. At that time table will hidden. after data load that table will display. its working good. But some times some browsers showing angular expressions in table at page. After a 1/4 sec it will gone. But it shown 1/4 sec!!. I tried ng-show, ng-if, add a class,etc. everything failed. It is not fixed permanently. After that I tried with ng-cloak. It works!

I added the below code in my css file, and add a class to my table element.

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

Html

<table  class="ng-cloak">
....</table>

Bind angular scope to dynamically added html

angularSome times we need to integrate html contents to our angular application. some times we create contents from jQuery and integrate it to our application. like kendo UI in jQuery style, jQuery dataTables etc.
At that time the following snippet will useful.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>

<body ng-app="app">
<div ng-controller="ctrl" id="dvController">
        <test-dir></test-dir>
        <button onclick="addTemplate1()">Add template 1</button>
        <button onclick="addTemplate2()">Add template 2</button>
<div id="dvContainer"></div>
</div>
<script>
                         function addTemplate1() {
                             var template = "<test-dir></test-dir>";
                             $("#dvContainer").html(template);
                             bindAngular();
                         }

                         function addTemplate2() {
                             var template = "FirstName : {{FirstName}}
LastName : {{LastName}}";
                             $("#dvContainer").html(template);
                             bindAngular();
                         }
                         function bindAngular() {
                             var $controllerElement = angular.element('#dvController');
                             var $appElement = angular.element('body');

                             // compiling and applying / digesting the scope.
                             $appElement.injector().invoke(function ($compile) {
                                 var scope = $controllerElement.scope();
                                 $compile($controllerElement)(scope);
                                 scope.$apply();
                             });
                         }
                         angular.module('app', []).controller('ctrl', function ($scope) {
                             $scope.FirstName = "Musthaan";
                             $scope.LastName = "Majeed";
                         }).directive('testDir', function () {
                             return {
                                 template: "
<h1>From dir</h1>
"
                             };
                         })
    </script>
</body>

</html>

CSV To JSON Conversion


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSV to JSON</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
</head>
<body>
CSV to JSON Converter
<hr />

Paste Your CSV Here:

    <textarea id="csv" class="text" > </textarea>
    
    <button id="convert">Convert to JSON</button>
      
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>
    
	

<style>	.text{width: 100%;height: 250px;} button{margin:10px 0}	</style>

	<script>
	
	

function CSVToArray(strData, strDelimiter) {
    // Check to see if the delimiter is defined. If not,
    // then default to comma.
    strDelimiter = (strDelimiter || ",");
    // Create a regular expression to parse the CSV values.
    var objPattern = new RegExp((
    // Delimiters.
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
    // Quoted fields.
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
    // Standard fields.
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi");
    // Create an array to hold our data. Give the array
    // a default empty first row.
    var arrData = [[]];
    // Create an array to hold our individual pattern
    // matching groups.
    var arrMatches = null;
    // Keep looping over the regular expression matches
    // until we can no longer find a match.
    while (arrMatches = objPattern.exec(strData)) {
        // Get the delimiter that was found.
        var strMatchedDelimiter = arrMatches[1];
        // Check to see if the given delimiter has a length
        // (is not the start of string) and if it matches
        // field delimiter. If id does not, then we know
        // that this delimiter is a row delimiter.
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
            // Since we have reached a new row of data,
            // add an empty row to our data array.
            arrData.push([]);
        }
        // Now that we have our delimiter out of the way,
        // let's check to see which kind of value we
        // captured (quoted or unquoted).
        if (arrMatches[2]) {
            // We found a quoted value. When we capture
            // this value, unescape any double quotes.
            var strMatchedValue = arrMatches[2].replace(
            new RegExp("\"\"", "g"), "\"");
        } else {
            // We found a non-quoted value.
            var strMatchedValue = arrMatches[3];
        }
        // Now that we have our value string, let's add
        // it to the data array.
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    // Return the parsed data.
    return (arrData);
}

function CSV2JSON(csv) {
    var array = CSVToArray(csv);
    var objArray = [];
    for (var i = 1; i < array.length; i++) {
        objArray[i - 1] = {};
        for (var k = 0; k < array[0].length && k < array[i].length; k++) {
            var key = array[0][k];
            objArray[i - 1][key] = array[i][k]
        }
    }

    var json = JSON.stringify(objArray);
    var str = json.replace(/},/g, "},\r\n");

    return str;
}

$("#convert").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    $("#json").val(json);
});

$("#download").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    window.open("data:text/json;charset=utf-8," + escape(json))
});

</script>
</body>
</html>

HTML <base> Tag

The <base> tag specifies the base URL/target for all relative URLs in a document.

There can be at maximum one <base> element in a document, and it must be inside the <head> element.

Specific Attributes

The HTML <base> tag also supports following additional attributes:

Attribute Value Description
href URL Specifies the URL of a page or the name of the anchor that the link goes to.
target _blank
_parent
_self
_top
Where to open the target URL.
_blank – the target URL will open in a new window.
_self – the target URL will open in the same frame as it was clicked.
_parent – the target URL will open in the parent frameset
_top – the target URL will open in the full body of the window

Example
1.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/images/html.gif

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com/external" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/external/images/html.gif

2.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" target="_blank"/>
</head>
<body>
<a href="http://www.musthaan.com">musthaan </a>
<a href="http://www.500px.com">500px</a>
</body>
</html></pre>
<pre>

In this case both http://musthaan.com and http://www.500px.com will come in a new window. but we did’t mention it every time.

Browser Support

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes

As to browser compatibility, this causes only problems in IE. The tag is in HTML specified as not having an end tag , so it’s legit to just use without an end tag. However IE6 thinks otherwise and the entire content after the tag is in such case placed as child of the element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base (and head) in between.

A common IE6 fix is using an IE conditional comment to include the end tag:


If you don’t care about the W3 Validator, or when you’re on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:
Closing the tag also instantly fixes the insanity of IE6 on WinXP SP3 to request// <![CDATA[
resources with an relative URI in src in an infinite loop.

Another potential IE problem will manifest when you use a relative URI in the tag, such as or . This will fail in IE6/7/8. This is however not exactly browser’s fault; using relative URIs in the tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http:// or https:// scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the tag.
// ]]>

Preview an image before it is uploaded using JS

Hi,

My colleagues many times asked this question. So i am sharing a simple method to achieve this.

HTML

<form id="form1">
   <input id="filePic" type="file" />
   <img id="imgPic" src="#" alt="" />
</form>

Javascript

function SetImage(fileInput, imgCtrl) {
   if (fileInput.files && fileInput.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
           imgCtrl.attr('src', e.target.result);
       }
       reader.readAsDataURL(fileInput.files[0]); 
   } 
}

$("#filePic").change(function (e) {
   SetImage(this, $("#imgPic"));
});
 

Zen Coding

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

div#page>div.logo+ul#navigation>li*5>a
…can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Third-party supported editors

These plugins are using official Zen Coding engine and developed by third-party developers. Thus, no guarantee that they support all latest ZC features.

 

CheatSheets

Cheat sheets for Zen Coding syntax and abbreviations

Syntax


Child: >

nav>ul>li


            <nav>
            <ul>
            <li></li>
            </ul>
            </nav>
          

div+p+bq


            <div></div>
            <p></p>
            <blockquote></blockquote>
          

div+div>p>span+em^bq


            <div></div>
            <div>
            <p><span></span><em></em></p>
            <blockquote></blockquote>
            </div>
          

div+div>p>span+em^^bq


            <div></div>
            <div>
            <p><span></span><em></em></p>
            </div>
            <blockquote></blockquote>
          

div>(header>ul>li*2>a)+footer>p


            <div>
            <header>
            <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            </ul>
            </header>
            <footer>
            <p></p>
            </footer>
            </div>
          

(div>dl>(dt+dd)*3)+footer>p


            <div>
            <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
            </dl>
            </div>
            <footer>
            <p></p>
            </footer>
          

ul>li*5


            <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            </ul>
          

ul>li.item$*5


            <ul>
            <li class="item1"></li>
            <li class="item2"></li>
            <li class="item3"></li>
            <li class="item4"></li>
            <li class="item5"></li>
            </ul>
          

h$[title=item$]{Header $}*3


            <h1 title="item1">Header 1</h1>
            <h2 title="item2">Header 2</h2>
            <h3 title="item3">Header 3</h3>
          

ul>li.item$$$*5


            <ul>
            <li class="item001"></li>
            <li class="item002"></li>
            <li class="item003"></li>
            <li class="item004"></li>
            <li class="item005"></li>
            </ul>
          

ul>li.item$@-*5


            <ul>
            <li class="item5"></li>
            <li class="item4"></li>
            <li class="item3"></li>
            <li class="item2"></li>
            <li class="item1"></li>
            </ul>
          

ul>li.item$@3*5


            <ul>
            <li class="item3"></li>
            <li class="item4"></li>
            <li class="item5"></li>
            <li class="item6"></li>
            <li class="item7"></li>
            </ul>
          

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

p[title=”Hello world”]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

[a=’value1′ b=”value2″]

<div a="value1" b="value2"></div>

a{Click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class


            <ul>
            <li class="class"></li>
            </ul>
          

table>.row>.col


            <table>
            <tr class="row">
            <td class="col"></td>
            </tr>
            </table>
          

HTML


!


            Alias of html:5<!doctype html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

a


          <a href=""></a>
        

a:link


          <a href="http://"></a>
        

a:mail


          <a href="mailto:"></a>
        

abbr


          <abbr title=""></abbr>
        

acronym


          <acronym title=""></acronym>
        

base


          <base href="" />
        

basefont

<basefont />

br

<br />

frame

<frame />

hr

<hr />

bdo


          <bdo dir=""></bdo>
        

bdo:r


          <bdo dir="rtl"></bdo>
        

bdo:l


          <bdo dir="ltr"></bdo>
        

col

<col />

link


          <link rel="stylesheet" href="" />
        

link:css


          <link rel="stylesheet" href="style.css" />
        

link:print


          <link rel="stylesheet" href="print.css" media="print" />
        

link:favicon


          <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        

link:touch


          <link rel="apple-touch-icon" href="favicon.png" />
        

link:rss


          <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
        

link:atom


          <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
        

meta

<meta />

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp


          <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        

meta:compat


          <meta http-equiv="X-UA-Compatible" content="IE=7" />
        

style


          <style></style>
        

script


          <script></script>
        

script:src


          <script src=""></script>
        

img


          <img src="" alt="" />
        

iframe


          
        

embed


          
        

object


          
        

param


          <param name="" value="" />
        

map


          <map name=""></map>
        

area


          <area shape="" coords="" href="" alt="" />
        

area:d


          <area shape="default" href="" alt="" />
        

area:c


          <area shape="circle" coords="" href="" alt="" />
        

area:r


          <area shape="rect" coords="" href="" alt="" />
        

area:p


          <area shape="poly" coords="" href="" alt="" />
        

form


          <form action=""></form>
        

form:get


          <form action="" method="get"></form>
        

form:post


          <form action="" method="post"></form>
        

label


          <label for=""></label>
        

input


          <input type="text" />
        

inp


          <input type="text" name="" id="" />
        

input:hidden


            Alias of input[type=hidden name]<input type="hidden" name="" />
        

input:h


            Alias of input:hidden<input type="hidden" name="" />
        

input:text, input:t


            Alias of inp<input type="text" name="" id="" />
        

input:search


            Alias of inp[type=search]<input type="search" name="" id="" />
        

input:email


            Alias of inp[type=email]<input type="email" name="" id="" />
        

input:url


            Alias of inp[type=url]<input type="url" name="" id="" />
        

input:password


            Alias of inp[type=password]<input type="password" name="" id="" />
        

input:p


            Alias of input:password<input type="password" name="" id="" />
        

input:datetime


            Alias of inp[type=datetime]<input type="datetime" name="" id="" />
        

input:date


            Alias of inp[type=date]<input type="date" name="" id="" />
        

input:datetime-local


            Alias of inp[type=datetime-local]<input type="datetime-local" name="" id="" />
        

input:month


            Alias of inp[type=month]<input type="month" name="" id="" />
        

input:week


            Alias of inp[type=week]<input type="week" name="" id="" />
        

input:time


            Alias of inp[type=time]<input type="time" name="" id="" />
        

input:number


            Alias of inp[type=number]<input type="number" name="" id="" />
        

input:color


            Alias of inp[type=color]<input type="color" name="" id="" />
        

input:checkbox


            Alias of inp[type=checkbox]<input type="checkbox" name="" id="" />
        

input:c


            Alias of input:checkbox<input type="checkbox" name="" id="" />
        

input:radio


            Alias of inp[type=radio]<input type="radio" name="" id="" />
        

input:r


            Alias of input:radio<input type="radio" name="" id="" />
        

input:range


            Alias of inp[type=range]<input type="range" name="" id="" />
        

input:file


            Alias of inp[type=file]<input type="file" name="" id="" />
        

input:f


            Alias of input:file<input type="file" name="" id="" />
        

input:submit


          <input type="submit" value="" />
        

input:s


            Alias of input:submit<input type="submit" value="" />
        

input:image


          <input type="image" src="" alt="" />
        

input:i


            Alias of input:image<input type="image" src="" alt="" />
        

input:button


          <input type="button" value="" />
        

input:b


            Alias of input:button<input type="button" value="" />
        

isindex

<isindex />

input:reset


            Alias of input:button[type=reset]<input type="reset" value="" />
        

select


          <select name="" id=""></select>
        

option


          <option value=""></option>
        

textarea


          <textarea name="" id="" cols="30" rows="10"></textarea>
        

menu:context


            Alias of menu[type=context]><menu type="context"></menu>
        

menu:c


            Alias of menu:context<menu type="context"></menu>
        

menu:toolbar


            Alias of menu[type=toolbar]><menu type="toolbar"></menu>
        

menu:t


            Alias of menu:toolbar<menu type="toolbar"></menu>
        

video


          <video src=""></video>
        

audio


          <audio src=""></audio>
        

html:xml


          <html xmlns="http://www.w3.org/1999/xhtml"></html>
        

keygen

<keygen />

command

<command />

bq


            Alias of blockquote<blockquote></blockquote>
        

acr


            Alias of acronym<acronym title=""></acronym>
        

fig


            Alias of figure<figure></figure>
        

figc


            Alias of figcaption<figcaption></figcaption>
        

ifr


            Alias of iframe
        

emb


            Alias of embed
        

obj


            Alias of object
        

src


            Alias of source<source></source>
        

cap


            Alias of caption<caption></caption>
        

colg


            Alias of colgroup<colgroup></colgroup>
        

fst, fset


            Alias of fieldset<fieldset></fieldset>
        

btn


            Alias of button<button></button>
        

btn:b


            Alias of button[type=button]<button type="button"></button>
        

btn:r


            Alias of button[type=reset]<button type="reset"></button>
        

btn:s


            Alias of button[type=submit]<button type="submit"></button>
        

optg


            Alias of optgroup<optgroup></optgroup>
        

opt


            Alias of option<option value=""></option>
        

tarea


            Alias of textarea<textarea name="" id="" cols="30" rows="10"></textarea>
        

leg


            Alias of legend<legend></legend>
        

sect


            Alias of section<section></section>
        

art


            Alias of article<article></article>
        

hdr


            Alias of header<header></header>
        

ftr


            Alias of footer<footer></footer>
        

adr


            Alias of address<address></address>
        

dlg


            Alias of dialog<dialog></dialog>
        

str


            Alias of strong<strong></strong>
        

prog


            Alias of progress<progress></progress>
        

datag


            Alias of datagrid<datagrid></datagrid>
        

datal


            Alias of datalist<datalist></datalist>
        

kg


            Alias of keygen<keygen />
        

out


            Alias of output<output></output>
        

det


            Alias of details<details></details>
        

cmd


            Alias of command<command />
        

doc


            Alias of html>(head>meta[charset=UTF-8]+title{${1:Document}})+body<html>
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

doc4


            Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})+body<html>
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:4t


            Alias of !!!4t+doc4[lang=${lang}]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:4s


            Alias of !!!4s+doc4[lang=${lang}]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:xt


            Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:xs


            Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:xxs


            Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

html:5


            Alias of !!!+doc[lang=${lang}]<!doctype html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
        

ol+


            Alias of ol>li<ol>
          <li></li>
          </ol>
        

ul+


            Alias of ul>li<ul>
          <li></li>
          </ul>
        

dl+


            Alias of dl>dt+dd<dl>
          <dt></dt>
          <dd></dd>
          </dl>
        

map+


            Alias of map>area<map name="">
          <area shape="" coords="" href="" alt="" />
          </map>
        

table+


            Alias of table>tr>td<table>
          <tr>
          <td></td>
          </tr>
          </table>
        

colgroup+, colg+


            Alias of colgroup>col<colgroup>
          <col />
          </colgroup>
        

tr+


            Alias of tr>td<tr>
          <td></td>
          </tr>
        

select+


            Alias of select>option<select name="" id="">
          <option value=""></option>
          </select>
        

optgroup+, optg+


            Alias of optgroup>option<optgroup>
          <option value=""></option>
          </optgroup>
        

!!!

<!doctype html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c


          <!-- ${child} -->
        

cc:ie6


          <!--[if lte IE 6]>
          ${child}
          <![endif]-->
        

cc:ie


          <!--[if IE]>
          ${child}
          <![endif]-->
        

cc:noie


          <!--[if !IE]><!-->
          ${child}
          <!--<![endif]-->
        

CSS


Visual Formatting


pos


            position:relative;
          

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t


            top:;
          

t:a

top:auto;

r


            right:;
          

r:a

right:auto;

b


            bottom:;
          

b:a

bottom:auto;

l


            left:;
          

l:a

left:auto;

z


            z-index:;
          

z:a

z-index:auto;

fl


            float:left;
          

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

cl


            clear:both;
          

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

d


            display:block;
          

d:n

display:none;

d:b

display:block;

d:i

display:inline;

d:ib

display:inline-block;

d:li

display:list-item;

d:ri

display:run-in;

d:cp

display:compact;

d:tb

display:table;

d:itb

display:inline-table;

d:tbcp

display:table-caption;

d:tbcl

display:table-column;

d:tbclg

display:table-column-group;

d:tbhg

display:table-header-group;

d:tbfg

display:table-footer-group;

d:tbr

display:table-row;

d:tbrg

display:table-row-group;

d:tbc

display:table-cell;

d:rb

display:ruby;

d:rbb

display:ruby-base;

d:rbbg

display:ruby-base-group;

d:rbt

display:ruby-text;

d:rbtg

display:ruby-text-group;

v


            visibility:hidden;
          

v:v

visibility:visible;

v:h

visibility:hidden;

v:c

visibility:collapse;

ov


            overflow:hidden;
          

ov:v

overflow:visible;

ov:h

overflow:hidden;

ov:s

overflow:scroll;

ov:a

overflow:auto;

ovx


            overflow-x:hidden;
          

ovx:v

overflow-x:visible;

ovx:h

overflow-x:hidden;

ovx:s

overflow-x:scroll;

ovx:a

overflow-x:auto;

ovy


            overflow-y:hidden;
          

ovy:v

overflow-y:visible;

ovy:h

overflow-y:hidden;

ovy:s

overflow-y:scroll;

ovy:a

overflow-y:auto;

ovs


            overflow-style:scrollbar;
          

ovs:a

overflow-style:auto;

ovs:s

overflow-style:scrollbar;

ovs:p

overflow-style:panner;

ovs:m

overflow-style:move;

ovs:mq

overflow-style:marquee;

zoo, zm

zoom:1;

cp


            clip:;
          

cp:a

clip:auto;

cp:r


            clip:rect(toprightbottomleft);
          

rsz


            resize:;
          

rsz:n

resize:none;

rsz:b

resize:both;

rsz:h

resize:horizontal;

rsz:v

resize:vertical;

cur

cursor:${pointer};

cur:a

cursor:auto;

cur:d

cursor:default;

cur:c

cursor:crosshair;

cur:ha

cursor:hand;

cur:he

cursor:help;

cur:m

cursor:move;

cur:p

cursor:pointer;

cur:t

cursor:text;

m


            margin:;
          

m:a

margin:auto;

mt


            margin-top:;
          

mt:a

margin-top:auto;

mr


            margin-right:;
          

mr:a

margin-right:auto;

mb


            margin-bottom:;
          

mb:a

margin-bottom:auto;

ml


            margin-left:;
          

ml:a

margin-left:auto;

p


            padding:;
          

pt


            padding-top:;
          

pr


            padding-right:;
          

pb


            padding-bottom:;
          

pl


            padding-left:;
          

bxz


            box-sizing:border-box;
          

bxz:cb

box-sizing:content-box;

bxz:bb

box-sizing:border-box;

bxsh


            box-shadow:inset hoffvoffblurcolor;
          

bxsh:r


            box-shadow:inset hoffvoffblurspread rgb(0, 0, 0);
          

bxsh:ra


            box-shadow:inset hvblurspread rgba(0, 0, 0, .5);
          

bxsh:n

box-shadow:none;

w


            width:;
          

w:a

width:auto;

h


            height:;
          

h:a

height:auto;

maw


            max-width:;
          

maw:n

max-width:none;

mah


            max-height:;
          

mah:n

max-height:none;

miw


            min-width:;
          

mih


            min-height:;
          

f


            font:;
          

f+


            font:1emArial,sans-serif;
          

fw


            font-weight:;
          

fw:n

font-weight:normal;

fw:b

font-weight:bold;

fw:br

font-weight:bolder;

fw:lr

font-weight:lighter;

fs

font-style:${italic};

fs:n

font-style:normal;

fs:i

font-style:italic;

fs:o

font-style:oblique;

fv


            font-variant:;
          

fv:n

font-variant:normal;

fv:sc

font-variant:small-caps;

fz


            font-size:;
          

fza


            font-size-adjust:;
          

fza:n

font-size-adjust:none;

ff


            font-family:;
          

ff:s

font-family:serif;

ff:ss

font-family:sans-serif;

ff:c

font-family:cursive;

ff:f

font-family:fantasy;

ff:m

font-family:monospace;

ff:a

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

fef


            font-effect:;
          

fef:n

font-effect:none;

fef:eg

font-effect:engrave;

fef:eb

font-effect:emboss;

fef:o

font-effect:outline;

fem


            font-emphasize:;
          

femp


            font-emphasize-position:;
          

femp:b

font-emphasize-position:before;

femp:a

font-emphasize-position:after;

fems


            font-emphasize-style:;
          

fems:n

font-emphasize-style:none;

fems:ac

font-emphasize-style:accent;

fems:dt

font-emphasize-style:dot;

fems:c

font-emphasize-style:circle;

fems:ds

font-emphasize-style:disc;

fsm


            font-smooth:;
          

fsm:a

font-smooth:auto;

fsm:n

font-smooth:never;

fsm:aw

font-smooth:always;

fst


            font-stretch:;
          

fst:n

font-stretch:normal;

fst:uc

font-stretch:ultra-condensed;

fst:ec

font-stretch:extra-condensed;

fst:c

font-stretch:condensed;

fst:sc

font-stretch:semi-condensed;

fst:se

font-stretch:semi-expanded;

fst:e

font-stretch:expanded;

fst:ee

font-stretch:extra-expanded;

fst:ue

font-stretch:ultra-expanded;

va


            vertical-align:top;
          

va:sup

vertical-align:super;

va:t

vertical-align:top;

va:tt

vertical-align:text-top;

va:m

vertical-align:middle;

va:bl

vertical-align:baseline;

va:b

vertical-align:bottom;

va:tb

vertical-align:text-bottom;

va:sub

vertical-align:sub;

ta


            text-align:left;
          

ta:l

text-align:left;

ta:c

text-align:center;

ta:r

text-align:right;

ta:j

text-align:justify;

ta-lst


            text-align-last:;
          

tal:a

text-align-last:auto;

tal:l

text-align-last:left;

tal:c

text-align-last:center;

tal:r

text-align-last:right;

td


            text-decoration:none;
          

td:n

text-decoration:none;

td:u

text-decoration:underline;

td:o

text-decoration:overline;

td:l

text-decoration:line-through;

te


            text-emphasis:;
          

te:n

text-emphasis:none;

te:ac

text-emphasis:accent;

te:dt

text-emphasis:dot;

te:c

text-emphasis:circle;

te:ds

text-emphasis:disc;

te:b

text-emphasis:before;

te:a

text-emphasis:after;

th


            text-height:;
          

th:a

text-height:auto;

th:f

text-height:font-size;

th:t

text-height:text-size;

th:m

text-height:max-size;

ti


            text-indent:;
          

ti:-

text-indent:-9999px;

tj


            text-justify:;
          

tj:a

text-justify:auto;

tj:iw

text-justify:inter-word;

tj:ii

text-justify:inter-ideograph;

tj:ic

text-justify:inter-cluster;

tj:d

text-justify:distribute;

tj:k

text-justify:kashida;

tj:t

text-justify:tibetan;

to


            text-outline:;
          

to+


            text-outline:00#000;
          

to:n

text-outline:none;

tr


            text-replace:;
          

tr:n

text-replace:none;

tt


            text-transform:uppercase;
          

tt:n

text-transform:none;

tt:c

text-transform:capitalize;

tt:u

text-transform:uppercase;

tt:l

text-transform:lowercase;

tw


            text-wrap:;
          

tw:n

text-wrap:normal;

tw:no

text-wrap:none;

tw:u

text-wrap:unrestricted;

tw:s

text-wrap:suppress;

tsh


            text-shadow:hoffvoffblur#000;
          

tsh:r


            text-shadow:hvblur rgb(0, 0, 0);
          

tsh:ra


            text-shadow:hvblur rgba(0, 0, 0, .5);
          

tsh+


            text-shadow:000#000;
          

tsh:n

text-shadow:none;

lh


            line-height:;
          

lts


            letter-spacing:;
          

whs


            white-space:;
          

whs:n

white-space:normal;

whs:p

white-space:pre;

whs:nw

white-space:nowrap;

whs:pw

white-space:pre-wrap;

whs:pl

white-space:pre-line;

whsc


            white-space-collapse:;
          

whsc:n

white-space-collapse:normal;

whsc:k

white-space-collapse:keep-all;

whsc:l

white-space-collapse:loose;

whsc:bs

white-space-collapse:break-strict;

whsc:ba

white-space-collapse:break-all;

wob


            word-break:;
          

wob:n

word-break:normal;

wob:k

word-break:keep-all;

wob:l

word-break:loose;

wob:bs

word-break:break-strict;

wob:ba

word-break:break-all;

wos


            word-spacing:;
          

wow


            word-wrap:;
          

wow:nm

word-wrap:normal;

wow:n

word-wrap:none;

wow:u

word-wrap:unrestricted;

wow:s

word-wrap:suppress;

wow:b

word-wrap:break-word;

bg


            background:;
          

bg+


            background:#fff url() 00no-repeat;
          

bg:n

background:none;

bgc


            background-color:#fff;
          

bgc:t

background-color:transparent;

bgi


            background-image:url();
          

bgi:n

background-image:none;

bgr


            background-repeat:;
          

bgr:n

background-repeat:no-repeat;

bgr:x

background-repeat:repeat-x;

bgr:y

background-repeat:repeat-y;

bgr:sp

background-repeat:space;

bgr:rd

background-repeat:round;

bga


            background-attachment:;
          

bga:f

background-attachment:fixed;

bga:s

background-attachment:scroll;

bgp


            background-position:00;
          

bgpx


            background-position-x:;
          

bgpy


            background-position-y:;
          

bgbk


            background-break:;
          

bgbk:bb

background-break:bounding-box;

bgbk:eb

background-break:each-box;

bgbk:c

background-break:continuous;

bgcp


            background-clip:padding-box;
          

bgcp:bb

background-clip:border-box;

bgcp:pb

background-clip:padding-box;

bgcp:cb

background-clip:content-box;

bgcp:nc

background-clip:no-clip;

bgo


            background-origin:;
          

bgo:pb

background-origin:padding-box;

bgo:bb

background-origin:border-box;

bgo:cb

background-origin:content-box;

bgsz


            background-size:;
          

bgsz:a

background-size:auto;

bgsz:ct

background-size:contain;

bgsz:cv

background-size:cover;

c


            color:#000;
          

c:r


            color:rgb(0, 0, 0);
          

c:ra


            color:rgba(0, 0, 0, .5);
          

op


            opacity:;
          

cnt


            content:'';
          

cnt:n, ct:n

content:normal;

cnt:oq, ct:oq

content:open-quote;

cnt:noq, ct:noq

content:no-open-quote;

cnt:cq, ct:cq

content:close-quote;

cnt:ncq, ct:ncq

content:no-close-quote;

cnt:a, ct:a


            content:attr();
          

cnt:c, ct:c


            content:counter();
          

cnt:cs, ct:cs


            content:counters();
          

ct


            content:;
          

q


            quotes:;
          

q:n

quotes:none;

q:ru

quotes:'\00AB' '\00BB' '\201E' '\201C';

q:en

quotes:'\201C' '\201D' '\2018' '\2019';

coi


            counter-increment:;
          

cor


            counter-reset:;
          

ol


            outline:;
          

ol:n

outline:none;

olo


            outline-offset:;
          

olw


            outline-width:;
          

ols


            outline-style:;
          

olc


            outline-color:#000;
          

olc:i

outline-color:invert;

tbl


            table-layout:;
          

tbl:a

table-layout:auto;

tbl:f

table-layout:fixed;

cps


            caption-side:;
          

cps:t

caption-side:top;

cps:b

caption-side:bottom;

ec


            empty-cells:;
          

ec:s

empty-cells:show;

ec:h

empty-cells:hide;

bd


            border:;
          

bd+


            border:1pxsolid#000;
          

bd:n

border:none;

bdbk


            border-break:close;
          

bdbk:c

border-break:close;

bdcl


            border-collapse:;
          

bdcl:c

border-collapse:collapse;

bdcl:s

border-collapse:separate;

bdc


            border-color:#000;
          

bdc:t

border-color:transparent;

bdi


            border-image:url();
          

bdi:n

border-image:none;

bdti


            border-top-image:url();
          

bdti:n

border-top-image:none;

bdri


            border-right-image:url();
          

bdri:n

border-right-image:none;

bdbi


            border-bottom-image:url();
          

bdbi:n

border-bottom-image:none;

bdli


            border-left-image:url();
          

bdli:n

border-left-image:none;

bdci


            border-corner-image:url();
          

bdci:n

border-corner-image:none;

bdci:c

border-corner-image:continue;

bdtli


            border-top-left-image:url();
          

bdtli:n

border-top-left-image:none;

bdtli:c

border-top-left-image:continue;

bdtri


            border-top-right-image:url();
          

bdtri:n

border-top-right-image:none;

bdtri:c

border-top-right-image:continue;

bdbri


            border-bottom-right-image:url();
          

bdbri:n

border-bottom-right-image:none;

bdbri:c

border-bottom-right-image:continue;

bdbli


            border-bottom-left-image:url();
          

bdbli:n

border-bottom-left-image:none;

bdbli:c

border-bottom-left-image:continue;

bdf


            border-fit:repeat;
          

bdf:c

border-fit:clip;

bdf:r

border-fit:repeat;

bdf:sc

border-fit:scale;

bdf:st

border-fit:stretch;

bdf:ow

border-fit:overwrite;

bdf:of

border-fit:overflow;

bdf:sp

border-fit:space;

bdlen


            border-length:;
          

bdlen:a

border-length:auto;

bdsp


            border-spacing:;
          

bds


            border-style:;
          

bds:n

border-style:none;

bds:h

border-style:hidden;

bds:dt

border-style:dotted;

bds:ds

border-style:dashed;

bds:s

border-style:solid;

bds:db

border-style:double;

bds:dtds

border-style:dot-dash;

bds:dtdtds

border-style:dot-dot-dash;

bds:w

border-style:wave;

bds:g

border-style:groove;

bds:r

border-style:ridge;

bds:i

border-style:inset;

bds:o

border-style:outset;

bdw


            border-width:;
          

bdt, bt


            border-top:;
          

bdt+


            border-top:1pxsolid#000;
          

bdt:n

border-top:none;

bdtw


            border-top-width:;
          

bdts


            border-top-style:;
          

bdts:n

border-top-style:none;

bdtc


            border-top-color:#000;
          

bdtc:t

border-top-color:transparent;

bdr, br


            border-right:;
          

bdr+


            border-right:1pxsolid#000;
          

bdr:n

border-right:none;

bdrw


            border-right-width:;
          

bdrst


            border-right-style:;
          

bdrst:n

border-right-style:none;

bdrc


            border-right-color:#000;
          

bdrc:t

border-right-color:transparent;

bdb, bb


            border-bottom:;
          

bdb+


            border-bottom:1pxsolid#000;
          

bdb:n

border-bottom:none;

bdbw


            border-bottom-width:;
          

bdbs


            border-bottom-style:;
          

bdbs:n

border-bottom-style:none;

bdbc


            border-bottom-color:#000;
          

bdbc:t

border-bottom-color:transparent;

bdl, bl


            border-left:;
          

bdl+


            border-left:1pxsolid#000;
          

bdl:n

border-left:none;

bdlw


            border-left-width:;
          

bdls


            border-left-style:;
          

bdls:n

border-left-style:none;

bdlc


            border-left-color:#000;
          

bdlc:t

border-left-color:transparent;

bdrs


            border-radius:;
          

bdtrrs


            border-top-right-radius:;
          

bdtlrs


            border-top-left-radius:;
          

bdbrrs


            border-bottom-right-radius:;
          

bdblrs


            border-bottom-left-radius:;
          

lis


            list-style:;
          

lis:n

list-style:none;

lisp


            list-style-position:;
          

lisp:i

list-style-position:inside;

lisp:o

list-style-position:outside;

list


            list-style-type:;
          

list:n

list-style-type:none;

list:d

list-style-type:disc;

list:c

list-style-type:circle;

list:s

list-style-type:square;

list:dc

list-style-type:decimal;

list:dclz

list-style-type:decimal-leading-zero;

list:lr

list-style-type:lower-roman;

list:ur

list-style-type:upper-roman;

lisi


            list-style-image:;
          

lisi:n

list-style-image:none;

pgbb


            page-break-before:;
          

pgbb:au

page-break-before:auto;

pgbb:al

page-break-before:always;

pgbb:l

page-break-before:left;

pgbb:r

page-break-before:right;

pgbi


            page-break-inside:;
          

pgbi:au

page-break-inside:auto;

pgbi:av

page-break-inside:avoid;

pgba


            page-break-after:;
          

pgba:au

page-break-after:auto;

pgba:al

page-break-after:always;

pgba:l

page-break-after:left;

pgba:r

page-break-after:right;

orp


            orphans:;
          

wid


            widows:;
          

!

!important

@f


            @font-face {
            font-family:;
            src:url(|);
            }
          

@f+


            @font-face {
            font-family: 'FontName';
            src: url('FileName.eot');
            src: url('FileName.eot?#iefix') format('embedded-opentype'),
            url('FileName.woff') format('woff'),
            url('FileName.ttf') format('truetype'),
            url('FileName.svg#FontName') format('svg');
            font-style: normal;
            font-weight: normal;
            }
          

@i, @import


            @import url();
          

@kf


            @-webkit-keyframes identifier {
            from {  }to {  }
            }
            @-o-keyframes identifier {
            from {  }to {  }
            }
            @-moz-keyframes identifier {
            from {  }to {  }
            }
            @keyframes identifier {
            from {  }to {  }
            }
          

@m, @media


            @media screen {
            
            }
          

anim


            animation:;
          

anim-


            animation:namedurationtiming-functiondelayiteration-countdirectionfill-mode;
          

animdel


            animation-delay:time;
          

animdir


            animation-direction:normal;
          

animdir:a

animation-direction:alternate;

animdir:ar

animation-direction:alternate-reverse;

animdir:n

animation-direction:normal;

animdir:r

animation-direction:reverse;

animdur


            animation-duration:0s;
          

animfm


            animation-fill-mode:both;
          

animfm:b

animation-fill-mode:backwards;

animfm:bt, animfm:bh

animation-fill-mode:both;

animfm:f

animation-fill-mode:forwards;

animic


            animation-iteration-count:1;
          

animic:i

animation-iteration-count:infinite;

animn


            animation-name:none;
          

animps


            animation-play-state:running;
          

animps:p

animation-play-state:paused;

animps:r

animation-play-state:running;

animtf


            animation-timing-function:linear;
          

animtf:cb


            animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
          

animtf:e

animation-timing-function:ease;

animtf:ei

animation-timing-function:ease-in;

animtf:eio

animation-timing-function:ease-in-out;

animtf:eo

animation-timing-function:ease-out;

animtf:l

animation-timing-function:linear;

ap

appearance:${none};

bg:ie


            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
          

cm


            /* ${child} */
          

colm


            columns:;
          

colmc


            column-count:;
          

colmf


            column-fill:;
          

colmg


            column-gap:;
          

colmr


            column-rule:;
          

colmrc


            column-rule-color:;
          

colmrs


            column-rule-style:;
          

colmrw


            column-rule-width:;
          

colms


            column-span:;
          

colmw


            column-width:;
          

mar


            max-resolution:res;
          

mir


            min-resolution:res;
          

op:ie

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

ori


            orientation:;
          

ori:l

orientation:landscape;

ori:p

orientation:portrait;

tov

text-overflow:${ellipsis};

tov:c

text-overflow:clip;

tov:e

text-overflow:ellipsis;

trf


            transform:;
          

trf:r


            transform: rotate(angle);
          

trf:sc


            transform: scale(x, y);
          

trf:scx


            transform: scaleX(x);
          

trf:scy


            transform: scaleY(y);
          

trf:skx


            transform: skewX(angle);
          

trf:sky


            transform: skewY(angle);
          

trf:t


            transform: translate(x, y);
          

trf:tx


            transform: translateX(x);
          

trf:ty


            transform: translateY(y);
          

trfo


            transform-origin:;
          

trfs


            transform-style:preserve-3d;
          

trs


            transition:proptime;
          

trsde


            transition-delay:time;
          

trsdu


            transition-duration:time;
          

trsp


            transition-property:prop;
          

trstf


            transition-timing-function:tfunc;
          

us

user-select:${none};

wfsm

-webkit-font-smoothing:${antialiased};

wfsm:a

-webkit-font-smoothing:antialiased;

wfsm:n

-webkit-font-smoothing:none;

wfsm:s, wfsm:sa

-webkit-font-smoothing:subpixel-antialiased;

XSL


tm


          <xsl:template match="" mode=""></xsl:template>
        

tmatch


            Alias of tm<xsl:template match="" mode=""></xsl:template>
        

tn


          <xsl:template name=""></xsl:template>
        

tname


            Alias of tn<xsl:template name=""></xsl:template>
        

call


          <xsl:call-template name="" />
        

ap


          <xsl:apply-templates select="" mode="" />
        

api

<xsl:apply-imports />

imp


          <xsl:import href="" />
        

inc


          <xsl:include href="" />
        

ch


          <xsl:choose></xsl:choose>
        

xsl:when


          <xsl:when test=""></xsl:when>
        

wh


            Alias of xsl:when<xsl:when test=""></xsl:when>
        

ot


          <xsl:otherwise></xsl:otherwise>
        

if


          <xsl:if test=""></xsl:if>
        

par


          <xsl:param name=""></xsl:param>
        

pare


          <xsl:param name="" select="" />
        

var


          <xsl:variable name=""></xsl:variable>
        

vare


          <xsl:variable name="" select="" />
        

wp


          <xsl:with-param name="" select="" />
        

key


          <xsl:key name="" match="" use="" />
        

elem


          <xsl:element name=""></xsl:element>
        

attr


          <xsl:attribute name=""></xsl:attribute>
        

attrs


          <xsl:attribute-set name=""></xsl:attribute-set>
        

cp


          <xsl:copy select="" />
        

co


          <xsl:copy-of select="" />
        

val


          <xsl:value-of select="" />
        

each


          <xsl:for-each select=""></xsl:for-each>
        

for


            Alias of each<xsl:for-each select=""></xsl:for-each>
        

tex


          <xsl:text></xsl:text>
        

com


          <xsl:comment></xsl:comment>
        

msg


          <xsl:message terminate="no"></xsl:message>
        

fall


          <xsl:fallback></xsl:fallback>
        

num


          <xsl:number value="" />
        

nam


          <namespace-alias stylesheet-prefix="" result-prefix="" />
        

pres


          <xsl:preserve-space elements="" />
        

strip


          <xsl:strip-space elements="" />
        

proc


          <xsl:processing-instruction name=""></xsl:processing-instruction>
        

sort


          <xsl:sort select="" order="" />
        

choose+


            Alias of xsl:choose>xsl:when+xsl:otherwise<xsl:choose>
          <xsl:when test=""></xsl:when>
          <xsl:otherwise></xsl:otherwise>
          </xsl:choose>
        

xsl


            Alias of 
              !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{
              |}
            <?xml version="1.0" encoding="UTF-8"?>
          <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
          </xsl:stylesheet>
        

!!!

<?xml version="1.0" encoding="UTF-8"?>

HTML5 Form Validation Examples

The option of using pure HTML (sometimes with a dab of CSS) for form validation was until recently unthinkable. Sure there have been all kinds of whacky JavaScript plug-ins over the years aimed at achieving something similar, but never a single standard that we could work towards.

For a more detailed introduction to HTML5 form validation you can find some great articles linked under References below. In this article we intend to present only a number of simple examples to get you started.

Before you ask, and someone always does, these examples will currently work only in the following browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the iPhone/iPad. Also each browser has a slightly different default behaviour.

1. The ‘required’ attribute

The simplest change you can make to your forms is to mark a text input field as ‘required’:

Your Name: <input type=”text” name=”name” required>

Your Name:
This informs the (HTML5-aware) web browser that the field is to be considered mandatory. Different browsers may mark the input box in some way (Firefox 4 Beta adds a red box-shadow by default), display a warning (Opera) or even prevent the form from being submitted if this field has no value. Hopefully these behaviours will converge in future releases.

We have actually created our own valid/invalid formatting using CSS to override the browser default, but more on that later. That’s why you may see something like the following in the example above:

HTML5 required example

Before you type anything into the box a red marker is shown. As soon as a single character has been entered this changes to a green marker to indicate that the input is ‘valid’.

Using CSS you can place markers inside or alongside the input box, or simply use background colours and borders as some browsers do by default.

2. Different INPUT types

This is where HTML5 really gets interesting and more useful. Along with the text input type, there are now a host of other options, including email, url, number, tel, date and many others.

On the iPhone/iPad the different input types are associated with different keyboards, making it easier for people to complete your online forms. In other web browsers they can be used in combination with the required attribute to limit or give advice on allowable input values.

INPUT type=”email”

By changing the input type to email while also using the required attribute, the browser can be used to validate (in a limited fashion) email addresses:

Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

Note that for this example we’ve made use of another HTML5 attribute placeholder which lets us display a prompt or instructions inside the field – something that previously had to be implemented using messy onfocus and onblur events.

The above code displays an input box as follows:

Email Address:
Again, different browsers implement this differently. In Opera it’s sufficient to enter just *@* for the input to be accepted. In Safari, Chrome and Firefox you need to enter at least *@-.-. Obviously neither example is very limiting, but it will prevent people from entering completely wrong values, or even spaces.

Here is how it appears in Safari:

HTML5 email required example

INPUT type=”url”

In a similar fashion to the email input type above, this one is designed to accept only properly-formatted URLs. Of course it currently does nothing of the kind, but later you will see how to improve it’s behaviour using the pattern attribute.

Website: <input type="url" name="website" required>

Again, the input box appears as normal:

Website:
This time the minimum requirement for most browsers is one or more letters followed by a colon. Again, not very helpful, but it will stop people trying to input their email address or other such nonsense.

As mentioned above, we can improve on this by making use of the pattern attribute which accepts a JavaScript regular expression. So the code above becomes:

Website: <input type="url" name="website" required pattern="https?://.+">

Now our input box will only accept text starting with http:// or https:// and at least one additional character:

Website: starting with http
If you’re not yet familiar with regular expressions, you really should make it a priority to learn. For those already familiar, note that the ^ and $ are already implicit so the input has to match the entire expression. Pattern modifiers are not supported.

If anyone wants to contribute a more ‘thorough’ expression to test for valid email or url format, feel free to post it usin the Feedback form.

INPUT type=”number” and type=”range”

The number and range input types also accept parameters for min, max and step. In most cases you can leave out step as it defaults to 1.

Here you see an example including both a number input, typically displayed as a ‘roller’ and a range input displayed as a ‘slider’:

Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

As with other HTML5 input types, browsers that don’t recognise the new options will default to simple text inputs. For that reason it’s a good idea to include a size for the input box.

AgeSatisfaction (1-5)
The slider option is a bit bizarre in that no values are displayed, but may be useful for more ‘analog’ inputs. There are some bugs with the number input in that if you don’t set a max value, clicking ‘down’ with the input blank will result in a very large number.

Here is how the two inputs are displayed in Safari:

HTML5 number and range example

and in Opera:

HTML5 number and range example

They are currently not supported in Firefox 4 Beta.

If you want to restrict the input of a text field to numbers without having the up/down arrows associated with the input box, you can always just set the input type to text and use a pattern of “\d+” (one or more numbers).

3. Other HTML5 INPUT types

Other valid HTML5 input types include:

  • color
  • date
  • datetime
  • datetime-local
  • month
  • search
  • tel
  • time
  • week

The search input will, in some browsers, change the styles to match the browser or operating system default search field format. You can see this demonstrated in the Search input above.

The tel input type is handy for the iPhone as it selects a different input keyboard. There is no pattern-matching set by default so you would have to implement that yourself using the pattern attribute to accept only certain characters.

The color input is meant to let you select a hex-code from a colour wheel – or similar – but as yet doesn’t appear to have been implemented in the wild.

The other date– and time-related options do have an effect at least in Opera, with pop-up calendars and other devices appearing to assist with input. While it would be great to see something like this in every browser, for now you probably need to stick with the ubiquitous JavaScript plugins.

4. Styling valid/invalid inputs using CSS

While the code we’re using is slightly more complicated, this should get you started:

input:required:invalid, input:focus:invalid { /* insert your own styles for invalid form input */ -moz-box-shadow: none; }

The first set of styles can be used to mark an input box as ‘invalid’, by adding an icon, colouring the text or borders or similar. It will apply to inputs that are required but empty, or to inputs that have a required format/pattern which hasn’t yet been met.

The -moz-box-shadow style is there just to prevent Firefox 4 Beta from adding it’s default red border.

For inputs that are both required and ‘valid’ you can use the following:

input:required:valid { /* insert your own styles for valid form input */ }

Some of the articles below, particularly the first two, provide other style/scripting options and solutions for supporting older browsers.

5. Sample styling using images and sprites

As shown above, once you’ve added HTML5 attributes to your form elements, they can be easily styled using CSS so that each input field is clearly marked as valid or invalid.

input:required:invalid, input:focus:invalid { background-image: url(/images/invalid.png); background-position: right top; background-repeat: no-repeat; } input:required:valid { background-image: url(/images/valid.png); background-position: right top; background-repeat: no-repeat; }

Here you can see the above styles applied to a required input field:

Your Name: (required)
This solution is still more complicated than it needs to be as it requires two extra images to be loaded. Fortunately, we can assume that all browsers supporting HTML5 form validation techniques will also support images being replaced in the CSS by ‘Base64 encoded datasets’.

Using a service such as Spritebaker or other techniques, the above style settings become:

<style type="text/css"> input:required:invalid, input:focus:invalid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC'); background-position: right top; background-repeat: no-repeat; -moz-box-shadow: none; } input:required:valid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII='); background-position: right top; background-repeat: no-repeat; } </style>

The above code can now be copied directly to your CSS style sheet. There’s no need to copy any images and, especially if your style-sheets are gzip-compressed, there will be next to no impact on load times. In a few minutes you could have your whole website updated.

For the browser-impaired, this is how the input field appears in Safari with either the image or the ‘sprite’ backgrounds (there is no difference between the two options):

HTML5 required example 2

The same styling can be extended to textarea elements, but won’t work for checkboxes, select elements, etc. For the latter you might want to place the valid/invalid markers alongside the element or format those input elements using borders, background colours, etc.

6. Fallback for the placeholder attribute

The following JavaScript, placed or included at the end of the page, should enable support for the placeholder attribute in INPUT fields at least for Internet Explorer 8+, Firefox and Opera:

<script type="text/javascript"> // ref: http://diveintohtml5.org/detect.html function supports_input_placeholder() { var i = document.createElement('input'); return 'placeholder' in i; } if(!supports_input_placeholder()) { var fields = document.getElementsByTagName('INPUT'); for(var i=0; i < fields.length; i++) { if(fields[i].hasAttribute('placeholder')) { fields[i].defaultValue = fields[i].getAttribute('placeholder'); fields[i].onfocus = function() { if(this.value == this.defaultValue) this.value = ''; } fields[i].onblur = function() { if(this.value == '') this.value = this.defaultValue; } } } } </script>

7. INPUT patterns for different data types

URL input pattern:

input type="url" pattern="https?://.+"

IPv4 Address input pattern:

input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"

Date input pattern (dd/mm/yyyy or mm/dd/yyyy):

input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"

Price input pattern:

input type="text" pattern="\d+(\.\d{2})?"

Latitude/Longitude input pattern:

input type="text" pattern="-?\d{1,3}\.\d+"

ref : http://www.the-art-of-web.com/