autocomplete attribute tokens

autocomplete-attribute-tokens.markdown

autocomplete attribute tokens

A Pen by Gijs Veyfeyken on CodePen.

License.

index.html

<p>Add your contact details to the browser first. For Chrome go to "Preferences > Adresses and more" or typ "chrome://settings/autofill" in the URL-bar.</p>

<p>Give focus to one of the fields below and press down arrow or spacebar to activate the autocomplete suggestions.</p>

<p><a href="https://www.w3.org/TR/html52/sec-forms.html#autofill-field">HTML5 specification: autofill field keywords</a></p>

<ol>
  <li>
    <label for="1">Name</label>
    <input id="1" autocomplete="name" type="text" />
  </li>
  <li>
    <label for="2">Honorific Prefix</label>
    <input id="2" autocomplete="honorific-prefix" type="text" />
  </li>
  <li>
    <label for="3">Given Name</label>
    <input id="3" autocomplete="given-name" type="text" />
  </li>
  <li>
    <label for="4">Additional Name</label>
    <input id="4" autocomplete="additional-name" type="text" />
  </li>
  <li>
    <label for="5">Family name</label>
    <input id="5" autocomplete="family-name" type="text" />
  </li>
  <li>
    <label for="6">Honorific Suffix</label>
    <input id="6" autocomplete="honorific-suffix" type="text" />
  </li>
  <li>
    <label for="7">Nickname</label>
    <input id="7" autocomplete="nickname" type="text" />
  </li>
  <li>
    <label for="8">Username</label>
    <input id="8" autocomplete="username" type="text" />
  </li>
  <li>
    <label for="9">New Password</label>
    <input id="9" autocomplete="new-password" type="text" />
  </li>
  <li>
    <label for="10">Current Password</label>
    <input id="10" autocomplete="current-password" type="text" />
  </li>
  <li>
    <label for="11">Organizational Title</label>
    <input id="11" autocomplete="organization-title" type="text" />
  </li>
  <li>
    <label for="12">Organization</label>
    <input id="12" autocomplete="organization" type="text" />
  </li>
  <li>
    <label for="13">Street Address</label>
    <input id="13" autocomplete="street-address" type="text" />
  </li>
  <li>
    <label for="14">Address Line1</label>
    <input id="14" autocomplete="address-line1" type="text" />
  </li>
  <li>
    <label for="15">Address Line2</label>
    <input id="15" autocomplete="address-line2" type="text" />
  </li>
  <li>
    <label for="16">Address Line3</label>
    <input id="16" autocomplete="address-line3" type="text" />
  </li>
  <li>
    <label for="17">Address Level4</label>
    <input id="17" autocomplete="address-level4" type="text" />
  </li>
  <li>
    <label for="18">Address Level3</label>
    <input id="20" autocomplete="address-level3" type="text" />
  </li>
  <li>
    <label for="19">Address Level2</label>
    <input id="19" autocomplete="address-level2" type="text" />
  </li>
  <li>
    <label for="20">Address Level1</label>
    <input id="18" autocomplete="address-level1" type="text" />
  </li>

  <li>
    <label for="21">Country</label>
    <input id="21" autocomplete="country" type="text" />
  </li>
  <li>
    <label for="22">Country Name</label>
    <input id="22" autocomplete="country-name" type="text" />
  </li>
  <li>
    <label for="23">Postal Code</label>
    <input id="23" autocomplete="postal-code" type="text" />
  </li>
  <li>
    <label for="24">CC Name (CC stands for Credit Card)</label>
    <input id="24" autocomplete="cc-name" type="text" />
  </li>
  <li>
    <label for="25">CC Given Name</label>
    <input id="25" autocomplete="cc-given-name" type="text" />
  </li>
  <li>
    <label for="26">CC Additional Name</label>
    <input id="26" autocomplete="cc-additional-name" type="text" />
  </li>
  <li>
    <label for="27">CC Family Name</label>
    <input id="27" autocomplete="cc-family-name" type="text" />
  </li>
  <li>
    <label for="28">CC Number</label>
    <input id="28" autocomplete="cc-number" type="text" />
  </li>
  <li>
    <label for="29">CC Exp</label>
    <input id="29" autocomplete="cc-exp" type="text" />
  </li>
  <li>
    <label for="30">CC Exp Month</label>
    <input id="30" autocomplete="cc-exp-month" type="text" />
  </li>
  <li>
    <label for="31">CC Exp Year</label>
    <input id="31" autocomplete="cc-exp-year" type="text" />
  </li>
  <li>
    <label for="32">CC CSC</label>
    <input id="32" autocomplete="cc-csc" type="text" />
  </li>
  <li>
    <label for="33">CC Type</label>
    <input id="33" autocomplete="cc-type" type="text" />
  </li>
  <li>
    <label for="34">Transaction Currency</label>
    <input id="34" autocomplete="transaction-currency" type="text" />
  </li>
  <li>
    <label for="35">Transaction Amount</label>
    <input id="35" autocomplete="transaction-amount" type="text" />
  </li>
  <li>
    <label for="36">Language</label>
    <input id="36" autocomplete="language" type="text" />
  </li>
  <li>
    <label for="37">Bday</label>
    <input id="37" autocomplete="bday" type="text" />
  </li>
  <li>
    <label for="38">Bday Day</label>
    <input id="38" autocomplete="bday-day" type="text" />
  </li>
  <li>
    <label for="39">Bday Month</label>
    <input id="39" autocomplete="bday-month" type="text" />
  </li>
  <li>
    <label for="40">Bday Year</label>
    <input id="40" autocomplete="bday-year" type="text" />
  </li>
  <li>
    <label for="41">Sex</label>
    <input id="41" autocomplete="sex" type="text" />
  </li>
  <li>
    <label for="42">URL</label>
    <input id="42" autocomplete="url" type="text" />
  </li>
  <li>
    <label for="43">Photo</label>
    <input id="43" autocomplete="photo" type="text" />
  </li>
  <li>
    <label for="44">Tel</label>
    <input id="44" autocomplete="tel" type="text" />
  </li>
  <li>
    <label for="45">Tel Country Code</label>
    <input id="45" autocomplete="tel-country-code" type="text" />
  </li>
  <li>
    <label for="46">Tel National</label>
    <input id="46" autocomplete="tel-national" type="text" />
  </li>
  <li>
    <label for="47">Tel Area Code</label>
    <input id="47" autocomplete="tel-area-code" type="text" />
  </li>
  <li>
    <label for="48">Tel Local</label>
    <input id="48" autocomplete="tel-local" type="text" />
  </li>
  <li>
    <label for="49">Tel Local Prefix</label>
    <input id="49" autocomplete="tel-local-prefix" type="text" />
  </li>
  <li>
    <label for="50">Tel Local Suffix</label>
    <input id="50" autocomplete="tel-local-suffix" type="text" />
  </li>
  <li>
    <label for="51">Tel Extension</label>
    <input id="51" autocomplete="tel-extension" type="text" />
  </li>
  <li>
    <label for="52">Email</label>
    <input id="52" autocomplete="email" type="text" />
  </li>
  <li>
    <label for="53">IMPP (URL representing an instant messaging protocol endpoint)</label>
    <input id="53" autocomplete="impp" type="text" />
  </li>
</ol>