@moreonion/foundist 2.1.2 → 3.0.1

package/src/html/includes/accordion.html

@@ -1,31 +1,31 @@
 <ul class="accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
-  <li class="accordion-item is-active" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 1</a>
+    <li class="accordion-item is-active" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 1</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 1. Lorem ipsum dolor</p>
-      <p>Starts in the open state due to using the <code>is-active</code> state class.</p>
-    </div>
-  </li>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 1. Lorem ipsum dolor</p>
+            <p>Starts in the open state due to using the <code>is-active</code> state class.</p>
+        </div>
+    </li>
 
-  <li class="accordion-item" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 2 has a very long and not very interesting title (but it wraps the line to see how it is wrapping)</a>
+    <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 2 has a very long and not very interesting title (but it wraps the line to see how it is wrapping)</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 2. Lorem ipsum dolor</p>
-      <a href="#">Nowhere to Go</a>
-    </div>
-  </li>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 2. Lorem ipsum dolor</p>
+            <a href="#">Nowhere to Go</a>
+        </div>
+    </li>
 
-  <li class="accordion-item" data-accordion-item>
-    <a href="#" class="accordion-title">Accordion 3</a>
+    <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 3</a>
 
-    <div class="accordion-content" data-tab-content>
-      <p>Panel 3. Lorem ipsum dolor</p>
-      <ol>
-        <li>This is an ordered list</li>
-        <li>It is the last item in the accordion container</li>
-      </ol>
-    </div>
-  </li>
-</ul>
+        <div class="accordion-content" data-tab-content>
+            <p>Panel 3. Lorem ipsum dolor</p>
+            <ol>
+                <li>This is an ordered list</li>
+                <li>It is the last item in the accordion container</li>
+            </ol>
+        </div>
+    </li>
+</ul>

package/src/html/includes/basic-form-with-errors.html

@@ -1,28 +1,30 @@
+{% from "./form-items/_macros.html" import input, select, button %}
+
 <div id="form">
-  <!-- serverside error -->
-  <div class="callout alert" data-closable="">
-    <h2 class="show-for-sr">Error message</h2>
-    <ul>
-      <li>First name field is required.</li>
-      <li>Last name field is required.</li>
-      <li>Email address field is required.</li>
-      <li>Do you want to receive our newsletter? field is required.</li>
-    </ul>
-    <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
-  </div>
-  <!-- client side error that’s not displayed on the field -->
-  <div class="messages error clientside-error">
-    <ul>
-      <li>
-        <label for="email" generated="true" class="error">The value in Email address is not a valid email address.</label>
-      </li>
-    </ul>
-  </div>
-  <!-- form with clientside validation errors on individual fields -->
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/text-with-error.html"></include>
-    <include src="form-items/select-with-error.html"></include>
-    <include src="form-items/radios-with-error.html"></include>
-    <include src="form-items/submit-button.html" locals='{"value": "Take action now!"}'></include>
-  </form>
+    <!-- serverside error -->
+    <div class="callout alert" data-closable="">
+        <h2 class="show-for-sr">Error message</h2>
+        <ul>
+            <li>First name field is required.</li>
+            <li>Last name field is required.</li>
+            <li>Email address field is required.</li>
+            <li>Do you want to receive our newsletter? field is required.</li>
+        </ul>
+        <button class="close-button" aria-label="Dismiss alert" type="button" data-close=""></button>
+    </div>
+    <!-- client side error that’s not displayed on the field -->
+    <div class="messages error clientside-error">
+        <ul>
+            <li>
+                <label for="email" generated="true" class="error">The value in Email address is not a valid email address.</label>
+            </li>
+        </ul>
+    </div>
+    <!-- form with clientside validation errors on individual fields -->
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {{ input("Textfield", error="Some error message for this field.") }}
+        {{ select("Country", error="That’s not right.", hide_label=true) }}
+        {% include "./form-items/radios-with-error.html" %}
+        {{ button("Take action now!", class="expanded primary button large")}}
+    </form>
 </div>

package/src/html/includes/basic-form.html

@@ -1,9 +1,13 @@
+{% from "./form-items/_macros.html" import input, select, hidden, button %}
+
 <div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/first-name.html"></include>
-    <include src="form-items/email.html"></include>
-    <include src="form-items/country-select.html"></include>
-    <include src="form-items/opt-in-radios.html"></include>
-    <include src="form-items/submit-button.html" locals='{"value": "Take action now!"}'></include>
-  </form>
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {{ input("First name", {size: 60, maxlength: 128, placeholder: "First name"}) }}
+        {{ input("Last name", {size: 60, maxlength: 128}) }}
+        {{ input("Email address", {type: "email", id: "email", size: 60, required: "required"}) }}
+        {{ select("Country", hide_label=true) }}
+        {% include "./form-items/opt-in-radios.html" %}
+        {{ hidden("token") }}
+        {{ button("Take action now!", class="expanded primary button large") }}
+    </form>
 </div>

package/src/html/includes/cookiebar.html

@@ -1,7 +1,7 @@
 <section id="cookiebar">
-  <div class="grid-container">
-    <p>Cats can’t have cookies! Says who? <a href="#">More info</a></p>
-    <button data-block class="small secondary button">Meow</button>
-    <button data-accept class="small button">OK</button>
-  </div>
+    <div class="grid-container">
+        <p>Cats can’t have cookies! Says who? <a href="#">More info</a></p>
+        <button data-block class="small secondary button">Meow</button>
+        <button data-accept class="small button">OK</button>
+    </div>
 </section>

package/src/html/includes/donate-form.html

@@ -1,12 +1,13 @@
-<div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/donation-interval.html"></include>
-    <include src="form-items/donation-amount.html"></include>
-    <br>
-    <include src="form-items/paymethod-selector.html"></include>
-
-    <include src="form-items/submit-button.html" locals='{"value": "Donate now"}'></include>
+{% from "./form-items/_macros.html" import button %}
 
-    <include src="form-items/payment-icons.html"></include>
-  </form>
+<div id="form">
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {% include "./form-items/donation-interval.html" %}
+        {% include "./form-items/donation-amount.html" %}
+        {% include "./form-items/giftaid.html" %}
+        <br>
+        {% include "./form-items/paymethod-selector.html" %}
+        {{ button("Donate now!", class="expanded primary button large") }}
+        {% include "./form-items/payment-icons.html" %}
+    </form>
 </div>

package/src/html/includes/e2t-single-form.html

@@ -1,33 +1,35 @@
+{% from "./form-items/_macros.html" import button %}
+
 <div id="form">
-  <form method="post" accept-charset="UTF-8" novalidate="novalidate">
-    <include src="form-items/webform-steps.html"></include>
+    <form method="post" accept-charset="UTF-8" novalidate="novalidate">
+        {% include "./form-items/webform-steps.html" %}
 
-    <div class="form-item">
-      <div class="email-to-target-selector-wrapper webform-prefill-exclude form-wrapper">
-        <div class="email-to-target-target email-to-target-single form-wrapper">
-          <p class="target">Rt Hon Mary Field MP </p>
-          <div class="form-item">
-            <label for="subject">Subject</label>
-            <input type="text" id="subject" name="subject" value="Give cats a chance" size="60" maxlength="128" class="form-text">
-          </div>
-          <pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
-          <div class="form-item">
-            <label for="message">Your message</label>
-            <div class="form-textarea-wrapper">
-              <textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
-            </div>
-          </div>
-          <!-- linthtml-configure preset="none" -->
-          <pre class="email-to-target-footer">I look forward to hearing from you.
+        <div class="form-item">
+            <div class="email-to-target-selector-wrapper webform-prefill-exclude form-wrapper">
+                <div class="email-to-target-target email-to-target-single form-wrapper">
+                    <p class="target">Rt Hon Mary Field MP </p>
+                    <div class="form-item">
+                        <label for="subject">Subject</label>
+                        <input type="text" id="subject" name="subject" value="Give cats a chance" size="60" maxlength="128" class="form-text">
+                    </div>
+                    <pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
+                    <div class="form-item">
+                        <label for="message">Your message</label>
+                        <div class="form-textarea-wrapper">
+                            <textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
+                        </div>
+                    </div>
+                    <!-- linthtml-configure preset="none" -->
+                    <pre class="email-to-target-footer">I look forward to hearing from you.
 
-  Kind regards,
-  Jane Smith
-  100, Somewhere Road
-  A12 34B</pre>
+Kind regards,
+Jane Smith
+100, Somewhere Road
+A12 34B</pre>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <include src="form-items/submit-button.html" locals='{"value": "Send message"}'></include>
-  </form>
+        {{ button("Send message", class="expanded primary button large") }}
+    </form>
 </div>

package/src/html/includes/form-items/_macros.html

@@ -0,0 +1,76 @@
+{# Macros for re-use accross templates %}
+
+{# Macro for buttons #}
+{% macro button(value, type="submit", class="button") %}
+    <input type="{{ type }}" value="{{ value }}" class="{{ class }}" />
+{% endmacro %}
+
+{# Macro for generating labels #}
+{% macro label(label, id, required=false, error=false, hide_label=false) %}
+    <label
+        for="{{ id }}"
+        {% if hide_label %}
+            class="show-for-sr"
+        {% elif error %}
+            class="is-invalid-label"
+        {% endif %}
+    >
+        {{ label }}
+        {% if props.required %}
+            <span class="form-required" title="This field is required.">*</span>
+        {% endif %}
+    </label>
+{% endmacro %}
+
+{# Macro for simple inputs #}
+{% macro input(label_text, props={}, description="", error="", hide_label=false) %}
+    {% set id = props.id | default(label_text | lower | replace(" ", "-")) %}
+    <div class="form-item">
+        {{ label(label_text, id, props.required, error, hide_label) }}
+        <input
+            {% if not props.id %}id="{{ id }}"{% endif %}
+            {% if not props.name %}name="{{ id | replace('-', '_') }}"{% endif %}
+            {% if not props.type %}type="text"{% endif %}
+            {% for property, value in props %}
+                {{ property }}="{{ value }}"
+            {% endfor %}
+            {% if error %}class="is-invalid-input"{% endif %}
+        />
+        {% if error %}
+            <label for="{{ id }}" class="form-error is-visible">{{ error }}</label>
+        {% endif %}
+        {% if description %}
+            <div class="help-text">{{ description }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{# Macro for example select #}
+{% macro select(label_text, props={}, description="", error="", hide_label=false) %}
+    {% set id = props.id | default(label_text | lower | replace(" ", "-")) %}
+    <div class="form-item">
+        {{ label(label_text, id, props.required, error, hide_label) }}
+        <select
+            data-select-two="select-two"
+            {% if not props.id %}id="{{ id }}"{% endif %}
+            {% if not props.name %}name="{{ id | replace('-', '_') }}"{% endif %}
+            {% for property, value in props %}
+                {{ property }}="{{ value }}"
+            {% endfor %}
+            {% if error %}class="is-invalid-input"{% endif %}
+        >
+            {% include "./country-select-options.html" %}
+        </select>
+        {% if error %}
+            <label for="{{ id }}" class="form-error is-visible">{{ error }}</label>
+        {% endif %}
+        {% if description %}
+            <div class="help-text">{{ description }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
+{# Macro for hidden input #}
+{% macro hidden(value) %}
+    <input type="hidden" value="{{ value }}" />
+{% endmacro %}

package/src/html/includes/form-items/checkboxes.html

@@ -1,21 +1,21 @@
 <div class="form-item extra-spacing">
-  <label for="checkboxes-1">Which topics would interest you?</label>
-  <div id="checkboxes" class="form-checkboxes">
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-1" name="checkboxes-1" value="1" class="form-checkbox">
-      <label class="option" for="checkboxes-1">Global warming</label>
+    <label for="checkboxes-1">Which topics would interest you?</label>
+    <div id="checkboxes" class="form-checkboxes">
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-1" name="checkboxes-1" value="1" class="form-checkbox">
+            <label class="option" for="checkboxes-1">Global warming</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-2" name="checkboxes-2" value="2" class="form-checkbox">
+            <label class="option" for="checkboxes-2">Biodiversity</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-3" name="checkboxes-3" value="3" class="form-checkbox">
+            <label class="option" for="checkboxes-3">Fair trade</label>
+        </div>
+        <div class="form-item form-type-checkbox">
+            <input type="checkbox" id="checkboxes-4" name="checkboxes-4" value="4" class="form-checkbox">
+            <label class="option" for="checkboxes-4">Something quite complicated with a very long label</label>
+        </div>
     </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-2" name="checkboxes-2" value="2" class="form-checkbox">
-      <label class="option" for="checkboxes-2">Biodiversity</label>
-    </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-3" name="checkboxes-3" value="3" class="form-checkbox">
-      <label class="option" for="checkboxes-3">Fair trade</label>
-    </div>
-    <div class="form-item form-type-checkbox">
-      <input type="checkbox" id="checkboxes-4" name="checkboxes-4" value="4" class="form-checkbox">
-      <label class="option" for="checkboxes-4">Something quite complicated with a very long label</label>
-    </div>
-  </div>
 </div>

package/src/html/includes/form-items/country-select-options.html

@@ -0,0 +1,253 @@
+<option value="no_selection" selected="selected">—Select a country—</option>
+<option value="AF">Afghanistan</option>
+<option value="AX">Aland Islands</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 Herzegovina</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="VG">British Virgin Islands</option>
+<option value="BN">Brunei</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="BQ">Caribbean Netherlands</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 (Brazzaville)</option>
+<option value="CD">Congo (Kinshasa)</option>
+<option value="CK">Cook Islands</option>
+<option value="CR">Costa Rica</option>
+<option value="HR">Croatia</option>
+<option value="CU">Cuba</option>
+<option value="CW">Curaçao</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="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</option>
+<option value="FO">Faroe Islands</option>
+<option value="FJ">Fiji</option>
+<option value="FI">Finland</option>
+<option value="FR">France</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="GG">Guernsey</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 Island and McDonald Islands</option>
+<option value="HN">Honduras</option>
+<option value="HK">Hong Kong S.A.R., China</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</option>
+<option value="IQ">Iraq</option>
+<option value="IE">Ireland</option>
+<option value="IM">Isle of Man</option>
+<option value="IL">Israel</option>
+<option value="IT">Italy</option>
+<option value="CI">Ivory Coast</option>
+<option value="JM">Jamaica</option>
+<option value="JP">Japan</option>
+<option value="JE">Jersey</option>
+<option value="JO">Jordan</option>
+<option value="KZ">Kazakhstan</option>
+<option value="KE">Kenya</option>
+<option value="KI">Kiribati</option>
+<option value="XK">Kosovo</option>
+<option value="KW">Kuwait</option>
+<option value="KG">Kyrgyzstan</option>
+<option value="LA">Laos</option>
+<option value="LV">Latvia</option>
+<option value="LB">Lebanon</option>
+<option value="LS">Lesotho</option>
+<option value="LR">Liberia</option>
+<option value="LY">Libya</option>
+<option value="LI">Liechtenstein</option>
+<option value="LT">Lithuania</option>
+<option value="LU">Luxembourg</option>
+<option value="MO">Macao S.A.R., China</option>
+<option value="MK">Macedonia</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</option>
+<option value="MD">Moldova</option>
+<option value="MC">Monaco</option>
+<option value="MN">Mongolia</option>
+<option value="ME">Montenegro</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="KP">North Korea</option>
+<option value="NO">Norway</option>
+<option value="OM">Oman</option>
+<option value="PK">Pakistan</option>
+<option value="PW">Palau</option>
+<option value="PS">Palestinian Territory</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">Russia</option>
+<option value="RW">Rwanda</option>
+<option value="BL">Saint Barthélemy</option>
+<option value="SH">Saint Helena</option>
+<option value="KN">Saint Kitts and Nevis</option>
+<option value="LC">Saint Lucia</option>
+<option value="MF">Saint Martin (French part)</option>
+<option value="PM">Saint Pierre and Miquelon</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="RS">Serbia</option>
+<option value="SC">Seychelles</option>
+<option value="SL">Sierra Leone</option>
+<option value="SG">Singapore</option>
+<option value="SX">Sint Maarten</option>
+<option value="SK">Slovakia</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="KR">South Korea</option>
+<option value="SS">South Sudan</option>
+<option value="ES">Spain</option>
+<option value="LK">Sri Lanka</option>
+<option value="SD">Sudan</option>
+<option value="SR">Suriname</option>
+<option value="SJ">Svalbard and Jan Mayen</option>
+<option value="SZ">Swaziland</option>
+<option value="SE">Sweden</option>
+<option value="CH">Switzerland</option>
+<option value="SY">Syria</option>
+<option value="TW">Taiwan</option>
+<option value="TJ">Tajikistan</option>
+<option value="TZ">Tanzania</option>
+<option value="TH">Thailand</option>
+<option value="TB">Tibet</option>
+<option value="TL">Timor-Leste</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="VI">U.S. Virgin Islands</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="VA">Vatican</option>
+<option value="VE">Venezuela</option>
+<option value="VN">Vietnam</option>
+<option value="WF">Wallis and Futuna</option>
+<option value="EH">Western Sahara</option>
+<option value="YE">Yemen</option>
+<option value="ZM">Zambia</option>
+<option value="ZW">Zimbabwe</option>