Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

20 Useful HTML5 Code Snippets You Should Know

Users expect to get to information anywhere, anytime and expect it to be fast. Meeting all those expectations and providing users with what they want is the single best way to keep clients focused on your product, service or website.

HTML5 is the latest iteration of HTML addressing modern needs and expectations of websites. It deals with things like semantic markup, providing information about content it describes, it is becoming new standard for all good web developers and browser vendors love it as it does its magic on.



There are lots of articles touting the use of HTML5 and praising the benefits of it. Likewise, developers are sharing useful code snippets to polish your website. Guess you have missed them? This article has brought 20 most useful HTML5 snippets to your table. Enjoy!


Make IE Better Compatible

Since IE8 currently supports much of HTML5, but unlike older version of popular browsers like Firefox, Chrome, and Safari, which does not support HTML5. JavaScript is a better alternatives, just in case your HTML5 code is being viewed in an older browser. A great thanks to Remy Sharp, who put together a mini script that helps IE to acknowledge the new elements, such as <article>.

Using the code snippet below will solve most non-compatibility problems between HTML5 and Internet Explorer.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Source


Flash Object Embed

A valid HTML code snippet for flash lovers. It's a nice and clean way to embed Flash music in (X)HTML. Likewise, preventing crashing of flash objects.

<object type="application/x-shockwave-flash"
  data="your-flash-file.swf"
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Source


Form Validation With Regex

I could remember when we usually use JavaScript to create a front-side validation. Now with HTML5 and the pattern attribute, you can define a regular expression pattern to validate the data.

Use the following snippet is for validating email addresses:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

This is for strong passwords:

<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

And this is for validating phone numbers:

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

Source


HTML5 Prefetching

HTML5 introduces prefetching, a simple technique to prefetch and load a resource which is not included in the current page. Prefetching can definitely improve the user experience by loading pages before the user actually requested them.

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Source


Get Directions from (Google Maps)

You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

Source


HTML5 Datalist

Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced. A frequently used functionality has been moved from a JavaScript-only utility to HTML via the new DATALIST element.

<datalist id="frameworks">
 <option value="MooTools">
 <option value="Moobile">
 <option value="Dojo Toolkit">
 <option value="jQuery">
 <option value="YUI">
</datalist>

Once the DATALIST element is in place, a list attribute gets added to an INPUT element which refers to the list ID:

<input name="frameworks" list="frameworks" />

Source


Common HTML5 Input Types

HTML5 defines a variety of new input types: sliders, number spinners, popup calendars, color,suggest boxes, and more. For browsers that don’t support a particular input type, there is automatic fallback to standard textfields.

<input type="number"/> (Spinner)
<input type="range"/> (Slider)
<input type="date"/> (Popup Calendar)
<input type="color"/> (Color Chooser)
<input type="email"/> (Email Entry)
<input type="url"/> (URL Entry)
<input type="tel"/> (Telephone Input)
<input type="search"/> (Search Query Input)


HTML5 Context Menu Attribute

HTML5 context menu allow you to add different options to a browsers ‘right-click menu’ with just a few lines of HTML and will even work with Javascript disabled. As at now, these feature in compatible with Firefox only, hopefully other browsers will support this feature.

<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>


Source


HTML5 Video With Flash Fallback

One of the greatest feature of HTML5 is giving developers the ability to embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing.

<video width="640" height="360" controls>
    <source src="__VIDEO__.MP4"  type="video/mp4" />
    <source src="__VIDEO__.OGV"  type="video/ogg" />
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>

Source


Creating a Static Google Map

This snippet is design purposely for creating a static Google map with a marker based on a user’s geographical location.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
 <title>Geo Location</title>

 <style type="text/css" media="screen">
  html{ height: 100%; }
  body{ height: 100%; margin: 0; padding: 0; }
  #map{ width: 100%; height: 100%; }
 </style>

  <!-- jQuery Min -->
  <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

  <!-- Google Maps -->
  <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

  <script charset="utf-8" type="text/javascript">
  mapWidth = screen.width;
  mapHeight = screen.height;

  $(document).ready(function(){
   var geo = navigator.geolocation;
   if( geo ){
    //Used for Static Maps
    geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
   }

   function createStaticMarker( markerColor, markerLabel, lat, lng ){
    return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
   }

   function createStaticMap( position ){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var zoom = 20;
    var sensor = true;

    var img = $("<img>");
     img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
        "center=" +
        lat + "," +
        lng +
        "&zoom=" + zoom +
        "&size=" + mapWidth + "x" + mapHeight +
        createStaticMarker( "blue", "1", lat, lng ) +
        "&sensor=" + sensor } );
     return img;
   }

   function showLocation( position ){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var latlng = new google.maps.LatLng( lat, lng );

    $("#map").html( createStaticMap( position ) )

   }

   function mapError( e ){
    var error;
    switch( e.code ){
     case 1:
      error = "Permission Denied";
     break;
     case 2:
      error = "Network or Satellites Down";
     break;
     case 3:
      error = "GeoLocation timed out";
     break;
     case 0:
      error = "Other Error";
     break;
    }
    $("#map").html( error );
   }

  });
  </script>

 </head>
 <body>
  <div id="map">

  </div>
 </body>
</html>


Source


Hidden Elements Using HTML5

HTML5 introduce the hidden attribute, which allow you to hide a specific element, as you would do it in CSS using display:none;.

<p hidden>This text will be hidden.</p>

Source


HTML5 Camera Access

With the launch of IOS6 on apple devices, support for new HTML5 features has increased. One feature that was the missing link in mobile browsing, that is included in IOS6 is the ability to upload an image directly taken from the in-built camera.

<input type="file" accept="image/*" capture="camera">

Source


HTML5 Ready CSS Reset

This snippet provides with the CSS reset which is compatible with HTML5.

/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Source


Element With Autofocus

Another simple functionality HTML now allows us is auto-focusing on elements upon page load; this is accomplished using the autofocus attribute. Useful for search pages such as Google.com homepage.

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

Source


Playing Audio Files With HTML5

Flash has been the tool of choice for anyone who wanted to play sounds on a website. But HTML5 is going to change the way developers can play sounds online. You can load an mp3 files using <audio> tag.

<audio id="player" src="sound.mp3"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div> 

Source


HTML5 head with Open Graph and Google Analytics

A code snippet with open graph elements added in the header tag and Google analytic replaceable code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <title>Title</title>

        <!-- Meta Information starts -->
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <meta name="robots" content="index,follow">
        <meta name="copyright" content="">
        <!-- Meta Information ends -->

        <!-- Open graph starts -->
        <meta property="og:title" content="">
        <meta property="og:type" content="">
        <meta property="og:url" content="">
        <meta property="og:image" content="">
        <meta property="og:site_name" content="">
        <meta property="fb:admins" content="USER_ID">
        <meta property="og:description"
              content="">
        <!-- Open graph ends -->


        <!-- Style Sheets starts -->
        <!--[if IE]><![endif]-->
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
        <!-- Style Sheets ends -->

        <!-- Javascript starts -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Javascript ends -->

        <!-- Google's analytics -->
        <script>
            var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
            (function(d, t) {
            var g = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            g.async = true;
            g.src = '//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s);
            })(document, 'script');
        </script>
        <!-- Google analytics ends-->



    </head>
    
    <body>

    <!-- Your content -->

    </body>
</html>

Source


HTML5 Document with Basic Semantics

HTML5 has several new layers, including a new set of semantic tags. There are two types of semantic tags introduced by html5, text-level and structural. Below, is the code for HTML5 document with basic semantics.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Sample HTML5 Document with Basic Semantics</title>
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img
                src="image.png"
                alt="RealcomBiz" />
            <figcaption>RealcomBiz</figcaption>
        </figure>
    </aside>
    <footer>Copyright 2011 RealcomBiz</footer>
</body>
</html>

Source


Downloadable Files

HTML5 allows you to force download of files using the download attribute. Here is a standard link to a downloadable file.

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Source


iPhone Calling & SMS Links

With the release of the iPhone, Apple introduced a quick way to create call and sms links. Here is a sample code to keep in your snippet library.

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Source


Country Drop Down List for Web Forms

Here’s another time saver: A comprehensive ready-to-use dropdown list with all countries, which you can use for your web forms.

<select>
    <option value="  " selected>(please select a country)</option>
    <option value="--">none</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
    <option value="BS">Bahamas</option>
    <option value="BH">Bahrain</option>
    <option value="BD">Bangladesh</option>
    <option value="BB">Barbados</option>
    <option value="BY">Belarus</option>
    <option value="BE">Belgium</option>
    <option value="BZ">Belize</option>
    <option value="BJ">Benin</option>
    <option value="BM">Bermuda</option>
    <option value="BT">Bhutan</option>
    <option value="BO">Bolivia</option>
    <option value="BA">Bosnia and Herzegowina</option>
    <option value="BW">Botswana</option>
    <option value="BV">Bouvet Island</option>
    <option value="BR">Brazil</option>
    <option value="IO">British Indian Ocean Territory</option>
    <option value="BN">Brunei Darussalam</option>
    <option value="BG">Bulgaria</option>
    <option value="BF">Burkina Faso</option>
    <option value="BI">Burundi</option>
    <option value="KH">Cambodia</option>
    <option value="CM">Cameroon</option>
    <option value="CA">Canada</option>
    <option value="CV">Cape Verde</option>
    <option value="KY">Cayman Islands</option>
    <option value="CF">Central African Republic</option>
    <option value="TD">Chad</option>
    <option value="CL">Chile</option>
    <option value="CN">China</option>
    <option value="CX">Christmas Island</option>
    <option value="CC">Cocos (Keeling) Islands</option>
    <option value="CO">Colombia</option>
    <option value="KM">Comoros</option>
    <option value="CG">Congo</option>
    <option value="CD">Congo, the Democratic Republic of the</option>
    <option value="CK">Cook Islands</option>
    <option value="CR">Costa Rica</option>
    <option value="CI">Cote d'Ivoire</option>
    <option value="HR">Croatia (Hrvatska)</option>
    <option value="CU">Cuba</option>
    <option value="CY">Cyprus</option>
    <option value="CZ">Czech Republic</option>
    <option value="DK">Denmark</option>
    <option value="DJ">Djibouti</option>
    <option value="DM">Dominica</option>
    <option value="DO">Dominican Republic</option>
    <option value="TP">East Timor</option>
    <option value="EC">Ecuador</option>
    <option value="EG">Egypt</option>
    <option value="SV">El Salvador</option>
    <option value="GQ">Equatorial Guinea</option>
    <option value="ER">Eritrea</option>
    <option value="EE">Estonia</option>
    <option value="ET">Ethiopia</option>
    <option value="FK">Falkland Islands (Malvinas)</option>
    <option value="FO">Faroe Islands</option>
    <option value="FJ">Fiji</option>
    <option value="FI">Finland</option>
    <option value="FR">France</option>
    <option value="FX">France, Metropolitan</option>
    <option value="GF">French Guiana</option>
    <option value="PF">French Polynesia</option>
    <option value="TF">French Southern Territories</option>
    <option value="GA">Gabon</option>
    <option value="GM">Gambia</option>
    <option value="GE">Georgia</option>
    <option value="DE">Germany</option>
    <option value="GH">Ghana</option>
    <option value="GI">Gibraltar</option>
    <option value="GR">Greece</option>
    <option value="GL">Greenland</option>
    <option value="GD">Grenada</option>
    <option value="GP">Guadeloupe</option>
    <option value="GU">Guam</option>
    <option value="GT">Guatemala</option>
    <option value="GN">Guinea</option>
    <option value="GW">Guinea-Bissau</option>
    <option value="GY">Guyana</option>
    <option value="HT">Haiti</option>
    <option value="HM">Heard and Mc Donald Islands</option>
    <option value="VA">Holy See (Vatican City State)</option>
    <option value="HN">Honduras</option>
    <option value="HK">Hong Kong</option>
    <option value="HU">Hungary</option>
    <option value="IS">Iceland</option>
    <option value="IN">India</option>
    <option value="ID">Indonesia</option>
    <option value="IR">Iran (Islamic Republic of)</option>
    <option value="IQ">Iraq</option>
    <option value="IE">Ireland</option>
    <option value="IL">Israel</option>
    <option value="IT">Italy</option>
    <option value="JM">Jamaica</option>
    <option value="JP">Japan</option>
    <option value="JO">Jordan</option>
    <option value="KZ">Kazakhstan</option>
    <option value="KE">Kenya</option>
    <option value="KI">Kiribati</option>
    <option value="KP">Korea, Democratic People's Republic of</option>
    <option value="KR">Korea, Republic of</option>
    <option value="KW">Kuwait</option>
    <option value="KG">Kyrgyzstan</option>
    <option value="LA">Lao People's Democratic Republic</option>
    <option value="LV">Latvia</option>
    <option value="LB">Lebanon</option>
    <option value="LS">Lesotho</option>
    <option value="LR">Liberia</option>
    <option value="LY">Libyan Arab Jamahiriya</option>
    <option value="LI">Liechtenstein</option>
    <option value="LT">Lithuania</option>
    <option value="LU">Luxembourg</option>
    <option value="MO">Macau</option>
    <option value="MK">Macedonia, The Former Yugoslav Republic of</option>
    <option value="MG">Madagascar</option>
    <option value="MW">Malawi</option>
    <option value="MY">Malaysia</option>
    <option value="MV">Maldives</option>
    <option value="ML">Mali</option>
    <option value="MT">Malta</option>
    <option value="MH">Marshall Islands</option>
    <option value="MQ">Martinique</option>
    <option value="MR">Mauritania</option>
    <option value="MU">Mauritius</option>
    <option value="YT">Mayotte</option>
    <option value="MX">Mexico</option>
    <option value="FM">Micronesia, Federated States of</option>
    <option value="MD">Moldova, Republic of</option>
    <option value="MC">Monaco</option>
    <option value="MN">Mongolia</option>
    <option value="MS">Montserrat</option>
    <option value="MA">Morocco</option>
    <option value="MZ">Mozambique</option>
    <option value="MM">Myanmar</option>
    <option value="NA">Namibia</option>
    <option value="NR">Nauru</option>
    <option value="NP">Nepal</option>
    <option value="NL">Netherlands</option>
    <option value="AN">Netherlands Antilles</option>
    <option value="NC">New Caledonia</option>
    <option value="NZ">New Zealand</option>
    <option value="NI">Nicaragua</option>
    <option value="NE">Niger</option>
    <option value="NG">Nigeria</option>
    <option value="NU">Niue</option>
    <option value="NF">Norfolk Island</option>
    <option value="MP">Northern Mariana Islands</option>
    <option value="NO">Norway</option>
    <option value="OM">Oman</option>
    <option value="PK">Pakistan</option>
    <option value="PW">Palau</option>
    <option value="PA">Panama</option>
    <option value="PG">Papua New Guinea</option>
    <option value="PY">Paraguay</option>
    <option value="PE">Peru</option>
    <option value="PH">Philippines</option>
    <option value="PN">Pitcairn</option>
    <option value="PL">Poland</option>
    <option value="PT">Portugal</option>
    <option value="PR">Puerto Rico</option>
    <option value="QA">Qatar</option>
    <option value="RE">Reunion</option>
    <option value="RO">Romania</option>
    <option value="RU">Russian Federation</option>
    <option value="RW">Rwanda</option>
    <option value="KN">Saint Kitts and Nevis</option>
    <option value="LC">Saint LUCIA</option>
    <option value="VC">Saint Vincent and the Grenadines</option>
    <option value="WS">Samoa</option>
    <option value="SM">San Marino</option>
    <option value="ST">Sao Tome and Principe</option>
    <option value="SA">Saudi Arabia</option>
    <option value="SN">Senegal</option>
    <option value="SC">Seychelles</option>
    <option value="SL">Sierra Leone</option>
    <option value="SG">Singapore</option>
    <option value="SK">Slovakia (Slovak Republic)</option>
    <option value="SI">Slovenia</option>
    <option value="SB">Solomon Islands</option>
    <option value="SO">Somalia</option>
    <option value="ZA">South Africa</option>
    <option value="GS">South Georgia and the South Sandwich Islands</option>
    <option value="ES">Spain</option>
    <option value="LK">Sri Lanka</option>
    <option value="SH">St. Helena</option>
    <option value="PM">St. Pierre and Miquelon</option>
    <option value="SD">Sudan</option>
    <option value="SR">Suriname</option>
    <option value="SJ">Svalbard and Jan Mayen Islands</option>
    <option value="SZ">Swaziland</option>
    <option value="SE">Sweden</option>
    <option value="CH">Switzerland</option>
    <option value="SY">Syrian Arab Republic</option>
    <option value="TW">Taiwan, Province of China</option>
    <option value="TJ">Tajikistan</option>
    <option value="TZ">Tanzania, United Republic of</option>
    <option value="TH">Thailand</option>
    <option value="TG">Togo</option>
    <option value="TK">Tokelau</option>
    <option value="TO">Tonga</option>
    <option value="TT">Trinidad and Tobago</option>
    <option value="TN">Tunisia</option>
    <option value="TR">Turkey</option>
    <option value="TM">Turkmenistan</option>
    <option value="TC">Turks and Caicos Islands</option>
    <option value="TV">Tuvalu</option>
    <option value="UG">Uganda</option>
    <option value="UA">Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
    <option value="UM">United States Minor Outlying Islands</option>
    <option value="UY">Uruguay</option>
    <option value="UZ">Uzbekistan</option>
    <option value="VU">Vanuatu</option>
    <option value="VE">Venezuela</option>
    <option value="VN">Viet Nam</option>
    <option value="VG">Virgin Islands (British)</option>
    <option value="VI">Virgin Islands (U.S.)</option>
    <option value="WF">Wallis and Futuna Islands</option>
    <option value="EH">Western Sahara</option>
    <option value="YE">Yemen</option>
    <option value="YU">Yugoslavia</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
</select>

Source



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

259 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hello,
    thanks for these snippets. I didn't know about prefetching : cool !

    ReplyDelete
    Replies
    1. Hi JP,
      You are welcome. Glad that you find one snippet useful.

      Delete
  2. Thanks for the snippest, just one should be changed.

    Please stop to suggest email verification with regex at all.
    From my experience they (nearly) all wrong implemented (also your example).

    From RFC-5322 it say a mail like the following would be valid:

    pete(his account)@silly.test(his host)

    http://tools.ietf.org/html/rfc5322#page-49

    ReplyDelete
    Replies
    1. That's a great suggestion. But i think giving users access with there custom email address will be a better practice.

      Delete
  3. Thanks a lot very useful post

    ReplyDelete
  4. These are epidermis professionals who can provide outstanding Jacksonville Corporate Video Production advice on anything to do with healthy epidermis care and they do an outstanding job. Dermatologists also agree to most plans.

    ReplyDelete
  5. Website Designing is a way of creation, planning and updating of website. Website design company in Delhi also works for website architecture,structure, navigation and user interface.

    ReplyDelete
  6. Sir,
    Very Very Use full.. very great.. Thank you..

    ReplyDelete
  7. Having read such an awesome piece of writing I am very delighted, will come back soon to visit this webpage. Thanks recommended auto insurance deductibles

    ReplyDelete

  8. Delhi packers and movers @ http://b2bad.in/Packers-and-Movers-in-Delhi/
    Packers and movers in Delhi @ http://b2bad.in/Packers-and-Movers-in-Delhi/
    Movers and packers in Delhi @ http://b2bad.in/Packers-and-Movers-in-Delhi/
    Packers and movers Delhi @ http://b2bad.in/Packers-and-Movers-in-Delhi/

    ReplyDelete
  9. Lets Go to The Indian Festival Celebration with Following Given Below Stuff. Keep Visiting, Keep reading and Enjoy your Life.
    Raksha Bandhan Sister Wishes 2015
    Raksha Bandhan Images 2015
    Raksha Bandhan Handmade Rakhi 2015
    Raksha Bandhan Whatsapp Profile Dp
    Images Of Raksha Bandhan 2015
    Raksha bandhan Thali Decoration
    Rakshabandhan 2015 Shubh Muhurat
    Raksha Bandhan 2015 Wishes
    Raksha bandhan 2015 Cards
    Rakshabandhan 2015 Sms
    Rakshabandhan 2015 Wishes FOr Sister
    Rakshabandhan 2015 Images
    Rakshabandhan 2015 Greeting Cards
    Rakhi Gift For Sister
    Raksha Bandhan Ascii SMs
    Raksha Bandhan Songs
    Happy Raksha Bandhan Sms
    Happy Raksha Bandhan Gifts
    Raksha Bandhan Video Songsa




    http://rakshabandhan2015images.in/raksha-bandhan-2015-text-sms-ascii-messages-140-words/
    http://rakshabandhan2015images.in/rakhi-raksha-bandhan-2015-online-gifts-offers-for-small-sister/
    http://rakshabandhan2015images.in/happy-raksha-bandhan-2015-cards-greetings-pictures-by-sister/
    http://rakshabandhan2015images.in/raksha-bandhan-2015-images-for-facebook-whatsapp/
    http://rakshabandhan2015images.in/raksha-bandhan-2015-wishes-messages-sms-status-for-whatsapp/
    http://rakshabandhan2015images.in/raksha-bandhan-sms-wishes-messages-for-whatsapp/
    http://rakshabandhan2015images.in/happy-raksha-bandhan-2015-profile-dp-pics-for-whatsapp-2/
    http://rakshabandhan2015images.in/raksha-bandhan-2015-handmade-rakhi-images-for-brother/

    ReplyDelete
  10. Hi, thanks for the snippets, I've spent a lot of time on your website! Perhaps you could take the time (if you have any!) to remove the spam comments, they really detract from your site. Thanks again!

    ReplyDelete
  11. Happy Teachers Day 2015 Quotes Speech hindi English students Tamil Kids Messages images pictures status DP fb cover shayari poems cards essay wishes india greetings about song madam sir guru Shikshak Diwas



    Happy Teachers Day
    Happy Teachers Day
    Happy Teachers Day
    Happy Teachers Day
    Happy Teachers Day
    Happy Teachers Day 2015
    Teachers Day quotes
    Teachers Day speech

    ReplyDelete
  12. Hello Yeah your blog is really awesome and loved it. Also have a look on my blog and comment on this and tell how u liked it.
    November 2015 Calendar. Hope you Liked it.
    Thanks.

    ReplyDelete
  13. Thanks for all your information, Website is very nice and informative content.
    Feliz Año nuevo 2016
    Feliz Año 2016

    ReplyDelete
  14. http://singhisbliingcollection.in/singh-is-bling-critics-reviews-public-response-on-movie-singh-is-bliing
    http://singhisbliingcollection.in/1st-day-collection-of-singh-is-bling-movie-akshay-kumar-box-office-report
    http://singhisbliingcollection.in/singh-is-bling-1st-friday-box-office-collection-opening-day-2nd-oct-income
    http://singhisbliingcollection.in/singh-is-bling-advance-booking-bookes-ticket-bookmyshow
    http://premratandhanpayo2015.in/watch-prem-ratan-dhan-paayo-trailer-official-video-teaser-youtube/
    http://premratandhanpayo2015.in/prem-ratan-dhan-payo-1st-poster-salman-khan-sonam-kapoor/

    ReplyDelete
  15. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói

    Dùng kiếm…kỹ xảo là chính, lực lượng là phụ…

    Bên trong ý thức Sở Dương, Kiếm linh từ từ ngâm nga.

    Sở Dương như rõ ràng cái gì, lại như không rõ, bên trong ý nghĩ đột nhiên cảm giác một trận ngẩn ngơ: Ngay sau đó, đột nhiên trong đầu phát ra một trận đau đớn bén nhọn, thật lâu không thôi.

    Sở Dương cái đầu như muốn vỡ ra! Nhịn không được hai tay ôm đầu, ngửa mặt lên trời cuồng tê!

    Một đạo khí lưu từ trong miệng hắn phát ra, tựa như một cột thủy lưu bắn lên

    “Đau… nhịn xuống! Đây là thời khắc tối khó khăn Cửu kiếp kiếm nhận chủ, cũng là lúc gian nan nhất. Bởi vì đã tìm được ba đoạn chủ sát phạt! Từ hôm nay trở đi, toàn bộ Cửu trùng thiên, sát phạt không ngừng!”

    Kiếm linh từ từ nói: “Mà Cửu kiếp kiếm từ hôm nay cũng tình dậy, đem nhân gian tinh phong huyết vũ, đem vong hồn dưới kiếm vĩnh không siêu sinh, dưới kiếm cũng sẽ không chảy ra một giọt máu!” Nói cách khác, Cửu kiếp kiếm từ hôm nay có thêm một cái thủ đoạn tự thân Cửu kiếp kiếm tu bổ, coi như là phúc lợi cho Kiếm chủ! Cắn nuốt sinh linh lực!”

    “Đây là ác ma lực lượng! Cũng là điểm cuối của thế gian luân hồi …”

    Kiếm linh thanh âm quàng quạc mà chỉ: Nhưng Sở Dương rốt cuộc cũng đã biết lai lịch trận đau đớn này!

    Hắn cắn chặt răng, lạnh lùng hừ một tiếng, từ hàm răng nói: “Chẳng lẽ cái thế gian này, còn có khổ sở gì Sở Dương ta chịu không nổi? Chân chính chê cười!”

    ReplyDelete
  16. soo great information. i like your article so much and this article is so useful for us. thanks for sharing.
    latest happy new year 2016 HD wallpaper's


    ReplyDelete
  17. HAPPY KARVA CHAUTH 2015 IMAGES

    ReplyDelete
  18. Thanks for all your information, Website is very nice and informative content.

    feliz ano novo 2016
    mensagem para 2016
    imagens de feliz ano novo 2016
    frases de feliz ano novo 2016



    Thanks for all your information, Website is very nice and informative content.

    Saint Valentin 2016
    st valentin 2016
    san valentin 2016






    dia de san valentin 2016,valentines day 2016,valentinstag 2016

    Thanks for all your information, Website is very nice and informative content.
    valentines day 2016
    valentines gift 2016
    happy valentines day 2016
    whens valentines day 2016
    valentines day images 2016
    valentine day sms 2016


    Thanks for all your information, Website is very nice and informative content.
    dia de san valentin 2016
    san valentin 2016
    st valentin 2016
    Saint Valentin 2016


    Thanks for all your information, Website is very nice and informative content.
    valentinstag
    valentinstag 2016
    valentinstag 2016 geschenke

    Thanks for all your information, Website is very nice and informative content.

    new year wishes 2016
    new year greetings 2016
    happy new year wishes 2016
    happy new year images 2016
    new year 2016
    new years eve 2016

    ReplyDelete
  19. nice and really relevant post, thanks for this relevant post.

    https://www.reddit.com/r/resumes/comments/3pwj5a/free_resume_templates_for_freshers_professionals/

    ReplyDelete
  20. I like this a lot. Thank you for sharing. I'm always looking for upcycles like this. In the end, you don't know it was a shipping pallet to begin with!
    indian super league 2016 Live Streaming Score
    indian super league 2016 Live Streaming

    Score

    ipl 9 Schedule time table

    ReplyDelete
  21. Appreciate it, an exceptionally helpful little information for all free cover letter templatesYour ideas within this subject are perfect as well as I know these concepts will certainly sign up for all kinds of other people available.
    http://imgur.com/gallery/dgwxzbS/new
    https://www.reddit.com/r/resumes/comments/3pwj5a/free_resume_templates_for_freshers_professionals/

    ReplyDelete
  22. This is great . sharing useful content i liked it and loved to check in your website
    Mobile Updates
    Mobile Updates
    Mobile Updates
    Mobile Updates

    ReplyDelete
  23. http://www.feliznavidad2015-anonuevo.es/

    http://www.feliznavidad2015-anonuevo.es/2015/12/felicitaciones-de-feliz-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/villancicos-de-feliz-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/mejores-mensajes-tarjeta-de-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/11-la-pesadilla-antes-de-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/canciones-de-feliz-navidad-2015-song.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/frases-de-feliz-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/recetas-de-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/cestas-de-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/manualidades-de-feliz-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/mensajes-de-feliz-navidad-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/feliz-navidad-imagenes-fotos-fondos-2015.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/felicitaciones-de-navidad-graciosas.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/regalos-de-navidad-2015-novio.html

    http://www.feliznavidad2015-anonuevo.es/2015/12/peliculas-de-navidad-2015.html

    ReplyDelete
  24. New Year is the time at which a new calendar year begins and the calendar’s year count increments by one. coloring pages of happy new year Many cultures celebrate the event in some manner.

    ReplyDelete
  25. Images is one of the best ways to impress anyone. So what you think about valentines day images? Do you need best valentines day images 2016 for your lover? I think its a great idea to download ans hare such kind of special images. It will increase the value of your wish and surely you will rock in your lover’s heart. Feeling happy.
    Valentines Day Quotes 2016
    Happy Valentines Day Quotes 2016
    Valentines Day Quotes 2016 | Funny Valentines Love Quotes
    Valentines Day Cards 2016
    Valentines Day Cards 2016 |Happy Valentines Day Cards 2016 Ideas, funny, printable
    Valentines Day Images 2016
    Valentines Day Images 2016 | Valentine Pictures, Photos, Wallpapers
    Valentines Day Wishes 2016
    Valentines Day 2016 | Happy Valentines Day 2016
    Valentines Day Gifts 2016
    Valentines Day Gifts Idea 2016 | Happy Valentines Gift Ideas For Her/Him
    Valentines Day Ideas 2016
    Valentines Day Ideas 2016 | For Him | For Her | Gift Ideas
    Valentines Day Poems 2016
    Valentines Day Poems 2016 | Romantic Love Poems For Valentine's Day
    Valentines Day Wishes 2016 | Happy Valentines day Messages 2016, Greetings, SMS
    Happy Valentines Day 2016 Whatsapp Status
    Happy Valentines Day 2016 Messages
    Happy Valentines Day 2016 SMS
    Happy Valentines Day 2016 Gifts
    Rose Day Images 2016 | Happy Rose Day SMS Messages, Wishes, Quotes
    Happy Valentines Day 2016
    Anti Valentines Day Quotes Wishes SMS
    Happy Valentines Day 2016 Images
    Valentines Day Wishes For Boyfriend
    Cheap Valentines Day Cards
    Cute Valentines Day Quotes
    Short Poems For Valentines Day

    ReplyDelete
  26. I stumbled upon this I have discovered It positively useful and it has aided me out loads. I am hoping to contribute & aid different users like its helped me. Great job.

    happy father's day
    father's day 2016
    happy father's day 2016


    Fathers Day Greetings
    Fathers Day Messages
    Happy Fathers Day Sayings

    ReplyDelete
  27. These are very nice snippets, and even they are also useful to me at for my logo design company.

    ReplyDelete
  28. I’ve a project that I am simply now working on, and I’ve been at
    the look out for such information.
    T20 World Cup Schedule 2016

    ReplyDelete

  29. check out..! Here you get the Sp Flash Tools or Sp Flash Tools Links For Download

    Sp Flash Tools OR Sp Flash Tool Links for Download

    http://www.spflashtooldownload.com/

    ReplyDelete
  30. Hello dear .You put really very helpful information.
    It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the web will be a lot more useful than ever before.
    ipl live streaming
    IPL 2016 Live Streaming
    ipl t20 live streaming
    ipl cricket live streaming
    ipl Highlights
    ipl live streaming
    IPL 2016 Live Streaming
    ipl t20 live streaming
    ipl cricket live streaming
    ipl Highlights

    ReplyDelete