86 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			86 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!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>
 | 
						|
    <label class="item">
 | 
						|
      <span class="fh">Enable autofill</span>
 | 
						|
      <input name="enable" id="enable" type="checkbox" />
 | 
						|
    </label>
 | 
						|
    <label class="item">
 | 
						|
      <span class="fh">Your 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 (experimental)</button>
 | 
						|
    </label>
 | 
						|
    <label class="item">
 | 
						|
      <span class="fh">Your date of birth</span><br>
 | 
						|
      <input name="birthday" id="birthday" type="date" required />
 | 
						|
    </label>
 | 
						|
    <label class="item">
 | 
						|
      <span class="fh">Skip questionnaire</span><br>
 | 
						|
      <span class="sh">Automatically answer "I was delayed, by more than 60 minutes."</span><br>
 | 
						|
      <input name="autocontinue" id="autocontinue" type="checkbox" />
 | 
						|
    </label>
 | 
						|
    <fieldset>
 | 
						|
      <legend>Address data</legend>
 | 
						|
      <label class="item">
 | 
						|
        <span class="fh">Title</span>
 | 
						|
        <select name="title" id="title">
 | 
						|
          <option value="">Please choose</option>
 | 
						|
          <option value="mr">Mr</option>
 | 
						|
          <option value="ms">Ms</option>
 | 
						|
        </select>
 | 
						|
      </label>
 | 
						|
      <label class="item">
 | 
						|
        <span class="fh">Name</span><br>
 | 
						|
        <input name="firstname" id="firstname" />
 | 
						|
      </label>
 | 
						|
      <label class="item">
 | 
						|
        <span class="fh">Surname</span><br>
 | 
						|
        <input name="surname" id="surname" />
 | 
						|
      </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>
 | 
						|
    </fieldset>
 | 
						|
    <fieldset>
 | 
						|
      <legend>Bank details</legend>
 | 
						|
      <label class="item">
 | 
						|
        <span class="fh">IBAN</span><br>
 | 
						|
        <span class="sh">Please make sure to enter any letters in upper case.</span>
 | 
						|
        <input name="iban" id="iban" pattern="[A-Z]{2}\d{2}[A-Z0-9]+" />
 | 
						|
      </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> |