<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" />
</head>
<body>
<form>
<fieldset>
<legend>Main options</legend>
<label class="item">
<span class="fh">Enable autofill</span>
<input name="enable" id="enable" type="checkbox" />
</label>
<label class="item">
<span class="fh">Default action</span>
<select class="default_action" id="default_action">
<option value="">None</option>
<option value="delay">I arrived >60 min late</option>
<option value="nodep">I did not start the trip</option>
<option value="abort">I returned home</option>
</select>
</label>
</fieldset>
<button id="all-get-from-profile">Get my personal data from my profile</button>
<fieldset>
<legend>Ticket data</legend>
<label class="item">
<span class="fh">BahnCard 100 number</span><br />
<span class="sh">The number on the front of your card starting with <span class="ms">7081</span>.</span><br>
<input name="bcnum" id="bcnum" type="text" pattern="70814[0-9]{11}" required
title="Your BahnCard number is 16 digits long and starts with 7081." />
<button id="bcnum-get-from-profile">Get from profile</button>
</label>
<label class="item">
<span class="fh">Date of birth</span><br>
<input name="birthday" id="birthday" type="date" required />
</label>
</fieldset>
<fieldset>
<legend>Address data</legend>
<label class="item">
<span class="fh">Appellation</span>
<select name="title" id="title">
<option value="">Please choose</option>
<option value="HR">Mr</option>
<option value="FR">Ms</option>
<option value="NA">Neutral</option>
</select>
</label>
<label class="item">
<span class="fh">Title</span>
<select name="title_addl" id="title_addl">
<option value="">None</option>
<option value="DR">Dr.</option>
<option value="PD">Prof. Dr.</option>
<option value="DD">Dr. Dr.</option>
<option value="PDD">Prof. Dr. Dr.</option>
</select>
</label>
<label class="item">
<span class="fh">Given name</span><br>
<input name="firstname" id="firstname" placeholder="e.g. Erika" />
</label>
<label class="item">
<span class="fh">Surname</span><br>
<input name="surname" id="surname" placeholder="e.g. Mustermann" />
</label>
<label class="item">
<span class="fh">Email address</span><br>
<input name="email" id="email" type="email" />
</label>
<label class="item">
<span class="fh">Street address</span><br>
<input name="addr1" id="addr1" placeholder="e.g. Hauptstraße 1a">
</label>
<label class="item">
<span class="fh">Postcode</span><bR>
<input name="postcode" id="postcode" />
</label>
<label class="item">
<span class="fh">Place</span><br>
<input name="placename" id="placename" />
</label>
<label class="item">
<span class="fh">Country</span><br>
<select name="country" id="country">
<option value="">Please choose</option>
<!-- Update using:
- Open form on "Personal details" section
- Open country select dropdown
- Execute:
d="";document.querySelectorAll(".test-adresse-land ul li").forEach(e=>d=d.concat('<option value="',e.dataset.value,'">',e.textContent,'</option>\n'));
- Alt. data source: https://shop.deutschepost.de/api/efiliale/fetchHarmonizedDestinations -> json
-->
<option value="AFG">Afghanistan</option>
<option value="ALA">Åland Islands</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="ASM">American Samoa</option>
<option value="AND">Andorra</option>
<option value="AGO">Angola</option>
<option value="AIA">Anguilla</option>
<option value="ATA">Antarctica</option>
<option value="ATG">Antigua and Barbuda</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AUT">Austria</option>
<option value="AZE">Azerbaijan</option>
<option value="BHS">Bahamas</option>
<option value="BHR">Bahrain</option>
<option value="BGD">Bangladesh</option>
<option value="BRB">Barbados</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
<option value="BLZ">Belize</option>
<option value="BEN">Benin</option>
<option value="BMU">Bermuda</option>
<option value="BTN">Bhutan</option>
<option value="BOL">Bolivia (Plurinational State of)</option>
<option value="BES">Bonaire, Sint Eustatius and Saba (NL)</option>
<option value="BIH">Bosnia and Herzegovina</option>
<option value="BWA">Botswana</option>
<option value="BVT">Bouvet Island</option>
<option value="BRA">Brazil</option>
<option value="IOT">British Indian Ocean Territory</option>
<option value="VGB">British Virgin Islands</option>
<option value="BRN">Brunei Darussalam</option>
<option value="BGR">Bulgaria</option>
<option value="BFA">Burkina Faso</option>
<option value="BDI">Burundi</option>
<option value="KHM">Cambodia</option>
<option value="CMR">Cameroon</option>
<option value="CAN">Canada</option>
<option value="CPV">Cape Verde</option>
<option value="CYM">Cayman Islands</option>
<option value="CAF">Central African Republic</option>
<option value="TCD">Chad</option>
<option value="CHL">Chile</option>
<option value="CHN">China, People's Republic of</option>
<option value="CXR">Christmas Island</option>
<option value="CCK">Cocos (Keeling) Islands</option>
<option value="COL">Colombia</option>
<option value="COM">Comoros</option>
<option value="COD">Congo, Democratic Republic of (formerly Zaire)</option>
<option value="COG">Congo, Republic (formerly Brazzaville)</option>
<option value="COK">Cook Islands</option>
<option value="CRI">Costa Rica</option>
<option value="CIV">Côte d'Ivoire (Ivory Coast)</option>
<option value="HRV">Croatia</option>
<option value="CUB">Cuba</option>
<option value="CUW">Curacao</option>
<option value="CYP">Cyprus</option>
<option value="CZE">Czech Republic (Czechia)</option>
<option value="DNK">Denmark</option>
<option value="DJI">Djibouti</option>
<option value="DMA">Dominica</option>
<option value="DOM">Dominican Republic</option>
<option value="TLS">East Timor (Timor-Leste)</option>
<option value="ECU">Ecuador</option>
<option value="EGY">Egypt</option>
<option value="SLV">El Salvador</option>
<option value="GNQ">Equatorial Guinea</option>
<option value="ERI">Eritrea</option>
<option value="EST">Estonia</option>
<option value="SWZ">Eswatini, Kingdom of</option>
<option value="ETH">Ethiopia</option>
<option value="FLK">Falkland Islands</option>
<option value="FRO">Faroe Islands</option>
<option value="FJI">Fiji</option>
<option value="FIN">Finland</option>
<option value="FRA">France</option>
<option value="GUF">French Guiana</option>
<option value="PYF">French Polynesia</option>
<option value="ATF">French Southern and Antarctic Lands</option>
<option value="GAB">Gabon</option>
<option value="GMB">Gambia</option>
<option value="GEO">Georgia</option>
<option value="DEU">Germany</option>
<option value="GHA">Ghana</option>
<option value="GIB">Gibraltar</option>
<option value="GBR">Great Britain & Northern Ireland</option>
<option value="GRC">Greece</option>
<option value="GRL">Greenland</option>
<option value="GRD">Grenada</option>
<option value="GLP">Guadeloupe</option>
<option value="GUM">Guam</option>
<option value="GTM">Guatemala</option>
<option value="GGY">Guernsey (Channel Island)</option>
<option value="GIN">Guinea</option>
<option value="GNB">Guinea-Bissau</option>
<option value="GUY">Guyana</option>
<option value="HTI">Haiti</option>
<option value="HMD">Heard and McDonald Islands</option>
<option value="HND">Honduras</option>
<option value="HKG">Hong Kong</option>
<option value="HUN">Hungary</option>
<option value="ISL">Iceland</option>
<option value="IND">India</option>
<option value="IDN">Indonesia</option>
<option value="IRN">Iran, Islamic Republic of</option>
<option value="IRQ">Iraq</option>
<option value="IRL">Ireland</option>
<option value="IMN">Isle of Man</option>
<option value="ISR">Israel</option>
<option value="ITA">Italy</option>
<option value="JAM">Jamaica</option>
<option value="JPN">Japan</option>
<option value="JEY">Jersey (Channel Island)</option>
<option value="JOR">Jordan</option>
<option value="KAZ">Kazakhstan</option>
<option value="KEN">Kenya</option>
<option value="KIR">Kiribati</option>
<option value="PRK">Korea, Democratic People's Rep. of (North Korea)</option>
<option value="KOR">Korea, Republic of (South Korea)</option>
<option value="XKX">Kosovo</option>
<option value="KWT">Kuwait</option>
<option value="KGZ">Kyrgyzstan</option>
<option value="LAO">Lao People's Democratic Republic</option>
<option value="LVA">Latvia</option>
<option value="LBN">Lebanon</option>
<option value="LSO">Lesotho</option>
<option value="LBR">Liberia</option>
<option value="LBY">Libya</option>
<option value="LIE">Liechtenstein</option>
<option value="LTU">Lithuania</option>
<option value="LUX">Luxembourg</option>
<option value="MAC">Macao</option>
<option value="MDG">Madagascar</option>
<option value="MWI">Malawi</option>
<option value="MYS">Malaysia</option>
<option value="MDV">Maldives</option>
<option value="MLI">Mali</option>
<option value="MLT">Malta</option>
<option value="MHL">Marshall Islands</option>
<option value="MTQ">Martinique</option>
<option value="MRT">Mauritania</option>
<option value="MUS">Mauritius</option>
<option value="MYT">Mayotte</option>
<option value="MEX">Mexico</option>
<option value="FSM">Micronesia</option>
<option value="MDA">Moldova (Republic of Moldova)</option>
<option value="MCO">Monaco</option>
<option value="MNG">Mongolia</option>
<option value="MNE">Montenegro</option>
<option value="MSR">Montserrat</option>
<option value="MAR">Morocco</option>
<option value="MOZ">Mozambique</option>
<option value="MMR">Myanmar (Burma)</option>
<option value="NAM">Namibia</option>
<option value="NRU">Nauru</option>
<option value="NPL">Nepal</option>
<option value="NLD">Netherlands</option>
<option value="ANT">Netherlands Antilles</option>
<option value="NCL">New Caledonia</option>
<option value="NZL">New Zealand</option>
<option value="NIC">Nicaragua</option>
<option value="NER">Niger</option>
<option value="NGA">Nigeria</option>
<option value="NIU">Niue</option>
<option value="NFK">Norfolk Island</option>
<option value="MKD">North Macedonia</option>
<option value="MNP">Northern Mariana Islands</option>
<option value="NOR">Norway</option>
<option value="OMN">Oman</option>
<option value="PAK">Pakistan</option>
<option value="PLW">Palau</option>
<option value="PAN">Panama</option>
<option value="PNG">Papua New Guinea</option>
<option value="PRY">Paraguay</option>
<option value="PER">Peru</option>
<option value="PHL">Philippines</option>
<option value="PCN">Pitcairn Islands</option>
<option value="POL">Poland</option>
<option value="PRT">Portugal</option>
<option value="PRI">Puerto Rico</option>
<option value="QAT">Qatar</option>
<option value="TWN">Republic of China (Taiwan)</option>
<option value="REU">Réunion</option>
<option value="ROU">Romania</option>
<option value="RUS">Russian Federation</option>
<option value="RWA">Rwanda</option>
<option value="BLM">Saint Barthélemy</option>
<option value="MAF">Saint-Martin (French part)</option>
<option value="WSM">Samoa</option>
<option value="SMR">San Marino</option>
<option value="STP">Sao Tome and Principe</option>
<option value="SAU">Saudi Arabia</option>
<option value="SEN">Senegal</option>
<option value="SRB">Serbia</option>
<option value="SYC">Seychelles</option>
<option value="SLE">Sierra Leone</option>
<option value="SGP">Singapore</option>
<option value="SXM">Sint Maarten (Dutch part)</option>
<option value="SVK">Slovakia</option>
<option value="SVN">Slovenia</option>
<option value="SLB">Solomon Islands</option>
<option value="SOM">Somalia</option>
<option value="ZAF">South Africa</option>
<option value="SGS">South Georgia and the South Sandwich Islands</option>
<option value="SSD">South Sudan</option>
<option value="ESP">Spain</option>
<option value="LKA">Sri Lanka</option>
<option value="SHN">St. Helena</option>
<option value="KNA">St. Kitts and Nevis</option>
<option value="LCA">St. Lucia</option>
<option value="SPM">St. Pierre and Miquelon</option>
<option value="VCT">St. Vincent and the Grenadines</option>
<option value="PSE">State of Palestine</option>
<option value="SDN">Sudan</option>
<option value="SUR">Suriname</option>
<option value="SJM">Svalbard and Jan Mayen</option>
<option value="SWE">Sweden</option>
<option value="CHE">Switzerland</option>
<option value="SYR">Syrian Arab Republic</option>
<option value="TJK">Tajikistan</option>
<option value="TZA">Tanzania, United Republic of</option>
<option value="THA">Thailand</option>
<option value="TGO">Togo</option>
<option value="TKL">Tokelau</option>
<option value="TON">Tonga</option>
<option value="TTO">Trinidad and Tobago</option>
<option value="TUN">Tunisia</option>
<option value="TUR">Turkey</option>
<option value="TKM">Turkmenistan</option>
<option value="TCA">Turks and Caicos Islands</option>
<option value="TUV">Tuvalu</option>
<option value="VIR">U.S. Virgin Islands</option>
<option value="UGA">Uganda</option>
<option value="UKR">Ukraine</option>
<option value="ARE">United Arab Emirates</option>
<option value="USA">United States of America</option>
<option value="URY">Uruguay</option>
<option value="UMI">US Minor Outlying Islands</option>
<option value="UZB">Uzbekistan</option>
<option value="VUT">Vanuatu</option>
<option value="VAT">Vatican City</option>
<option value="VEN">Venezuela (Bolivarian Republic of)</option>
<option value="VNM">Vietnam</option>
<option value="WLF">Wallis and Futuna</option>
<option value="ESH">Western Sahara</option>
<option value="YEM">Yemen</option>
<option value="ZMB">Zambia</option>
<option value="ZWE">Zimbabwe</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Bank details</legend>
<em>Entering details here automatically chooses a <strong>bank transfer</strong> as compensation.</em>
<label class="item">
<span class="fh">IBAN</span><br>
<span class="sh">Please make sure to enter any letters in upper case.</span><br>
<input name="iban" id="iban" pattern="[A-Z]{2}\d{2}\s?[A-Z0-9\s]+" />
</label>
<label class="item">
<span class="fh">BIC</span><br>
<span class="sh">Bank Identifier Code for your bank. Can mostly be omitted.</span><br>
<input name="bic" id="bic" />
</label>
</fieldset>
<div class="item"><button type="submit">Save</button><span id="success"></span></div>
<p id="errors"></p>
</form>
<script src="script.js"></script>
</body>
</html>