20 قطعه کد مهم و حیاتی html5
1 – سازگاری مرورگر IE
IE8 از تعدادی زیادی از دستورات HTML5 پشتیبانی میکند، ورژن های قدیمی Firefox و Chrome و Safari از HTML5 پشتیبانی نمیکنند به همین دلیل برای این موارد JavaScript گزینه ی بهتری است تا بتوانید کدهای HTML5 خود را به خوبی در مرورگرهای قدیمی نشان دهید، قطعه کدی که توسط Remy Sharp به ما این قابلیت ها میدهد که در مرورگرIE تگ هایی مانند <article> خوبی قابل استفاده باشند.
استفاده از قطعه کد زیر در پروژه های خود باعث میشود ناسازگاری های بین HTML5 و IE تا حد بسیار زیادی از بین برود.
کد HTML:
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2 – قرار دادن شی های Flash
در زیر یک قطعه کد HTML برای دوست داران flash است، یک راه ساده است برای قرار دادن فایل های Flash در مرورگر خود تا بتوانید اینگونه فایل ها را به خوبی نمایش دهید.
کد HTML:
object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">
3 – اعتبار سنجی فرم با Regex
در زمان گذشته عموما از طریق جاوا اسکریپت فرم ها را در سمت کاربر اعتبار سنجی میکردیم، اکنون با استفاده از HTML5 و خاصیت pattern میتوانیم این کار را انجام دهیم، میتوانیم از عبارات باقاعده برای اعتبار سنجی فرم ها استفاده کنیم.
از قطعه کد زیر میتوانید برای اعتبار سنجی ایمیل استفاده کنید :
کد HTML:
<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
از قطعه کد زیر میتوانید برای شناسایی یک پسورد قوی استفاده کنید :
کد HTML:
<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 />
از قطعه کد زیر میتوانید برای اعتبار سنجی شماره تلفن استفاده کنید :
کد HTML:
<input type="text" required pattern="(+?d[- .]*){7,13}" title="international, national or local phone number"/>
4 – Prefetching در HTML5Prefetching در HTML5 یک تکنیک ساده است که با استفاده از آن میتوانید منابعی را در صفحه لود کنید که در صفحه قرار ندارند، از طریق این کار میتوانید منابعی که در صفحه توسط کاربر هنوز درخواست نشده اند را از قبل لود کنید :
کد HTML:
<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">
5 – گرفتن Direction از Google Mapمیتوانید فرم زیر را به راحتی در همه جا استفاده کنید، میتوانید به راحتی از این کد در صفحه های Contact استفاده کنید و بازدیدکنندگان را به جهتی که میخواهید هدایت کنید :
کد HTML:
<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>
6 – Datalist در HTML
هر فریمورک جاوا اسکریپتی ویجت های autocompltete مربوط به خودش را دارد، با استفاده از DATALIST در HTML5 میتوانید از قابلیت استفاده کنید :
کد HTML:
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
هربار که یک DATALIST را معرفی کنید، ID آن را در input قرار دهید تا به راحتی بتوانید از آن استفاده کنید :
کد HTML:
<input name="frameworks" list="frameworks" />
7 – Input Type های رایج در HTML5HTML5 نوع های جدید از input ها را معرفی کرده است، نوع هایی مانند sliders ، number spinners ، popup calendars ، color ، suggest boxed و ... به قطعه کد زیر توجه کنید :
کد HTML:
<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)
8 – خاصیت Context Menu در HTML5
خاصیت context menu در HTML5 باعث میشود بتوانید آپشن های متفاوتی به منوی کلیک راست مرورگر با چند خط کد HTML بدهید حتی زمانی که جاوا اسکریپت در مرورگر غیر فعال است، در حال حاضر این ویژگی به خوبی در فایرفاکس سازگار است.
کد HTML:
<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>
9 – Video در HTML5
یکی از ویژگی های خیلی خوب HTML5 این است که توسعه دهندگان میتوانند فایل های ویدئویی را توسط تگ <video> در وبسایت قرار بدهند.
کد HTML:
<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&image=__POSTER__.JPG&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>
10 – ساخت Google Map استاتیک
با استفاده از قطعه کد زیر میتوانید یک Google Map استاتیک بر اساس مکان مورد نظر خود بسازید.
کد HTML:
<!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>
11 – المنت Hidden در HTML5
HTML5 خاصیت hidden را معرفی کرده است، با این کار میتوانید المنت مورد نظرتان را پنهان کنید همانند کاری که مانند display:none در CSS انجام میدادید.
کد HTML:
<p hidden>This text will be hidden.</p>
12 – دسترسی به Camera در HTML5با معرفی IOS6 در دستگاه های اپل میتوانید از این قابلیت استفاده کنید، با استفاده از این قابلیت میتوانید عکس هایی که از Camera گوشی گرفته میشوند را مستقیما در سرور آپلود کنید
کد HTML:
<input type="file" accept="image/*" capture="camera">
13 – CSS Reset و HTML5با استفاده از کد زیر میتوانید از CSS Reset در HTML5 استفاده کنید
کد:
/* html5doctor.com Reset Stylesheet
(Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4
2009-07-27 | Authors: Eric Meyer & Richard
Clark 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, 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 */
14 – المنت با Autofocus
با استفاده از AutoFocus میتوانید به المنتی که میخواهید Focus بدهید، این قابلیت برای صفحاتی مثل Google.com و سرچ باکس آن استفاده میشود.
کد HTML:
<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
15 – اجرای فایل های Audio در HTML5
در زمان گذشته برای اجرای فایل های صوتی باید از جاوا اسکریپت استفاده میکردید اما HTML5 میتوانید این کار را با استفاده از تگ <audio> انجام دهید و فایل های mp3 را در صفحه ی خود پخش کنید.
کد HTML:
<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>
16 – Open Graph و Google Analytics در قسمت head فایل HTML
با استفاده از قطعه کد زیر میتوانید در قسمت header فایل HTML خود اطلاعات خود را قرار دهید
کد HTML:
<!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 -->
17 – داکیومنت HTML5 بر پایه semantic
HTML5 لایه های مختلفی را برای semantic بودن کدهای خود معرفی کرده است، در زیر یک ساختار کلی از حالت semantic کدهای HTML5 مشاهده میکنیم.
کد HTML:
<!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>
18 – فایل های قابل Download
در HTML5 میتوانید با استفاده از خاصیت download اجباری فایل های خود را محبور به دانلود کنید، در زیر یک قطعه کد استاندارد برای لینک دادن به فایل های دانلودی میبینید.
کد:
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
19 – لینک های Call و SMS در iPhone
با انتشار نسخه ی جدید iPhone با استفاده از تگ های زیر میتوانید یک Call یا SMS بفرستید.
کد:
<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
20 – فرم لیست کشور ها به صورت Drop Down
با استفاده از کد زیر میتوانید در زمان خود صرفه جویی کنید، یک لیست کامل از کشورها که میتوانید با تعمیم آن به موارد دیگر در پروژه های خود استفاده کنید.
کد HTML:
<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>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 2 – قرار دادن شی های Flash
در زیر یک قطعه کد HTML برای دوست داران flash است، یک راه ساده است برای قرار دادن فایل های Flash در مرورگر خود تا بتوانید اینگونه فایل ها را به خوبی نمایش دهید.object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">3 – اعتبار سنجی فرم با Regex
در زمان گذشته عموما از طریق جاوا اسکریپت فرم ها را در سمت کاربر اعتبار سنجی میکردیم، اکنون با استفاده از HTML5 و خاصیت pattern میتوانیم این کار را انجام دهیم، میتوانیم از عبارات باقاعده برای اعتبار سنجی فرم ها استفاده کنیم.
از قطعه کد زیر میتوانید برای اعتبار سنجی ایمیل استفاده کنید :<input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
از قطعه کد زیر میتوانید برای شناسایی یک پسورد قوی استفاده کنید :<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 />
از قطعه کد زیر میتوانید برای اعتبار سنجی شماره تلفن استفاده کنید :<input type="text" required pattern="(+?d[- .]*){7,13}" title="international, national or local phone number"/>
4 – Prefetching در HTML5
Prefetching در HTML5 یک تکنیک ساده است که با استفاده از آن میتوانید منابعی را در صفحه لود کنید که در صفحه قرار ندارند، از طریق این کار میتوانید منابعی که در صفحه توسط کاربر هنوز درخواست نشده اند را از قبل لود کنید :<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">
5 – گرفتن Direction از Google Map
میتوانید فرم زیر را به راحتی در همه جا استفاده کنید، میتوانید به راحتی از این کد در صفحه های Contact استفاده کنید و بازدیدکنندگان را به جهتی که میخواهید هدایت کنید :<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>
6 – Datalist در HTML
هر فریمورک جاوا اسکریپتی ویجت های autocompltete مربوط به خودش را دارد، با استفاده از DATALIST در HTML5 میتوانید از قابلیت استفاده کنید :<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
هربار که یک DATALIST را معرفی کنید، ID آن را در input قرار دهید تا به راحتی بتوانید از آن استفاده کنید :<input name="frameworks" list="frameworks" />
7 – Input Type های رایج در HTML5
HTML5 نوع های جدید از input ها را معرفی کرده است، نوع هایی مانند sliders ، number spinners ، popup calendars ، color ، suggest boxed و ... به قطعه کد زیر توجه کنید :<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)
8 – خاصیت Context Menu در HTML5
خاصیت context menu در HTML5 باعث میشود بتوانید آپشن های متفاوتی به منوی کلیک راست مرورگر با چند خط کد HTML بدهید حتی زمانی که جاوا اسکریپت در مرورگر غیر فعال است، در حال حاضر این ویژگی به خوبی در فایرفاکس سازگار است.<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>
9 – Video در HTML5
یکی از ویژگی های خیلی خوب HTML5 این است که توسعه دهندگان میتوانند فایل های ویدئویی را توسط تگ <video> در وبسایت قرار بدهند.<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&image=__POSTER__.JPG&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>
10 – ساخت Google Map استاتیک
با استفاده از قطعه کد زیر میتوانید یک Google Map استاتیک بر اساس مکان مورد نظر خود بسازید.<!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>
11 – المنت Hidden در HTML5
HTML5 خاصیت hidden را معرفی کرده است، با این کار میتوانید المنت مورد نظرتان را پنهان کنید همانند کاری که مانند display:none در CSS انجام میدادید.<p hidden>This text will be hidden.</p>
12 – دسترسی به Camera در HTML5
با معرفی IOS6 در دستگاه های اپل میتوانید از این قابلیت استفاده کنید، با استفاده از این قابلیت میتوانید عکس هایی که از Camera گوشی گرفته میشوند را مستقیما در سرور آپلود کنید<input type="file" accept="image/*" capture="camera">
13 – CSS Reset و HTML5
با استفاده از کد زیر میتوانید از CSS Reset در HTML5 استفاده کنید/* html5doctor.com Reset Stylesheet
(Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4
2009-07-27 | Authors: Eric Meyer & Richard
Clark 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, 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 */
14 – المنت با Autofocus
با استفاده از AutoFocus میتوانید به المنتی که میخواهید Focus بدهید، این قابلیت برای صفحاتی مثل Google.com و سرچ باکس آن استفاده میشود.<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
15 – اجرای فایل های Audio در HTML5
در زمان گذشته برای اجرای فایل های صوتی باید از جاوا اسکریپت استفاده میکردید اما HTML5 میتوانید این کار را با استفاده از تگ <audio> انجام دهید و فایل های mp3 را در صفحه ی خود پخش کنید.<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>
16 – Open Graph و Google Analytics در قسمت head فایل HTML
با استفاده از قطعه کد زیر میتوانید در قسمت header فایل HTML خود اطلاعات خود را قرار دهید<!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 -->
17 – داکیومنت HTML5 بر پایه semantic
HTML5 لایه های مختلفی را برای semantic بودن کدهای خود معرفی کرده است، در زیر یک ساختار کلی از حالت semantic کدهای HTML5 مشاهده میکنیم.<!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>
18 – فایل های قابل Download
در HTML5 میتوانید با استفاده از خاصیت download اجباری فایل های خود را محبور به دانلود کنید، در زیر یک قطعه کد استاندارد برای لینک دادن به فایل های دانلودی میبینید.<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
19 – لینک های Call و SMS در iPhone
با انتشار نسخه ی جدید iPhone با استفاده از تگ های زیر میتوانید یک Call یا SMS بفرستید.<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
20 – فرم لیست کشور ها به صورت Drop Down
با استفاده از کد زیر میتوانید در زمان خود صرفه جویی کنید، یک لیست کامل از کشورها که میتوانید با تعمیم آن به موارد دیگر در پروژه های خود استفاده کنید.<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>
