20个你应该知道的有用HTML5代码段

jopen 11年前

让IE更好的兼容

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对象</b></span>

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


带正则表达式的表单验证</b></span>

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 非死book" onclick="window.location.href = 'http://非死book.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摄像机头访问

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


元素具有自动对焦

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


利用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


可下载的文件

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


国家下拉列表的Web表单

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