<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Form Autofill Demo Page with autocomplete set to off on inputs within form elements</title>
</head>
<body>
  <h1>Form Autofill Demo Page with autocomplete set to off on inputs within form elements</h1>
  <form id="form">
    <p><label>organization: <input type="text" id="organization" name="organization" autocomplete="off" /></label></p>
    <p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="off" /></label></p>
    <p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="off" /></label></p>
    <p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="off" /></label></p>
    <p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="off" /></label></p>
    <p><label>country: <input type="text" id="country" name="country" autocomplete="off" /></label></p>
    <p><label>tel: <input type="text" id="tel" name="tel" autocomplete="off" /></label></p>
    <p><label>email: <input type="text" id="email" name="email" autocomplete="off" /></label></p>
    <p><input type="submit" /></p>
    <p><button type="reset">Reset</button></p>
  </form>

  <form id="formB">
    <p><label>Organization: <input type="text" autocomplete="off" /></label></p>
    <p><label><input type="text" id="B_address-line1" autocomplete="off" /></label></p>
    <p><label><input type="text" name="address-line2" autocomplete="off" /></label></p>
    <p><label><input type="text" id="B_address-line3" name="address-line3" autocomplete="off" /></label></p>
    <p><label>City: <input type="text" name="address-level2" autocomplete="off" /></label></p>
    <p><label>State: <select id="B_address-level1" autocomplete="off" ></select></label></p>
    <p><input type="text" id="B_postal-code" name="postal-code" autocomplete="off" /></p>
    <p><label>Country: <select multiple id="B_country" name="country" autocomplete="off" ></select></label></p>
    <p><label>Telephone: <input id="B_tel" name="tel" autocomplete="off" /></label></p>
    <p><label>Email: <input type="text" id="B_email" name="email" autocomplete="off" /></label></p>
    <hr>
    <p><label>cc-number <input type="text" id="B_cc-number" autocomplete="off" /></label></p>
    <p><label>cc-name <input type="text" id="B_cc-name" autocomplete="off" /></label></p>
    <p><label>cc-exp-month <input type="text" id="B_cc-exp-month" autocomplete="off" /></label></p>
    <p><label>cc-exp-year <input type="text" id="B_cc-exp-year" autocomplete="off" /></label></p>
    <hr>
    <p><input type="submit" /></p>
    <p><button type="reset">Reset</button></p>
  </form>

  <form id="formC">
    <p><label><input type="text" name="someprefixAddrLine1" autocomplete="off" /></label></p>
    <p><label>City: <input type="text" name="address-level2" autocomplete="off" /></label></p>
    <p><label><input type="text" name="someprefixAddrLine2" autocomplete="off" /></label></p>
    <p><label>Organization: <input type="text" name="organization" autocomplete="off" /></label></p>
    <p><label><input type="text" name="someprefixAddrLine3" autocomplete="off" /></label></p>
  </form>

  <form id="formD">
    <!--
      Ensure heuristics can correctly identify fields when there are
      autocomplete="off" fields as well as missing autocomplete attributes
    -->
    <p><label>Organization: <input type="text" autocomplete="organization" /></label></p>
    <p><label><input type="text" id="B_address-line1" autocomplete="off" /></label></p>
    <p><label><input type="text" name="address-line2" /></label></p>
    <p><label><input type="text" id="B_address-line3" name="address-line3" autocomplete="off" /></label></p>
    <p><label>City: <input type="text" name="address-level2" /></label></p>
    <p><label>State: <select id="B_address-level1" autocomplete="address-level1" ></select></label></p>
    <p><input type="text" id="B_postal-code" name="postal-code" /></p>
    <p><label>Country: <select multiple id="B_country" name="country" autocomplete="off" ></select></label></p>
    <p><label>Telephone: <input id="B_tel" name="tel" autocomplete="tel" /></label></p>
    <p><label>Email: <input type="text" id="B_email" name="email" autocomplete="off" /></label></p>
    <hr>
    <p><label>cc-number <input type="text" id="B_cc-number" autocomplete="off" /></label></p>
    <p><label>cc-name <input type="text" id="B_cc-name" autocomplete="cc-name" /></label></p>
    <p><label>cc-exp-month <input type="text" id="B_cc-exp-month" /></label></p>
    <p><label>cc-exp-year <input type="text" id="B_cc-exp-year" /></label></p>
    <hr>
    <p><input type="submit" /></p>
    <p><button type="reset">Reset</button></p>
  </form>

</body>
</html>
