Skip to content

Instantly share code, notes, and snippets.

@michaelcpuckett

michaelcpuckett/all-autocomplete-fields.html

Last active December 1, 2020 15:47
Show Gist options
  • Save michaelcpuckett/db6716dc6067c659c934ef636492477e to your computer and use it in GitHub Desktop.
Save michaelcpuckett/db6716dc6067c659c934ef636492477e to your computer and use it in GitHub Desktop.
Download ZIP
There is not always direct access to modify some of these autocomplete fields in browser settings. Complete and submit the form here and it should save your autocomplete preferences.
Raw
all-autocomplete-fields.html
<body>
<style>
table,
input,
textarea {
width: 100%;
}
</style>
<form>
<table>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-name"><code>name</code></dfn>"
</td>
<td>Full name
</td>
<td>Free-form text, no newlines
</td>
<td width="75%">Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text">Text</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="5">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-honorific-prefix"><code>honorific-prefix</code></dfn>"
</td>
<td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang="fr">M<sup>lle</sup></span>")
</td>
<td>Free-form text, no newlines
</td>
<td>Sir
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-2">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-given-name"><code>given-name</code></dfn>"
</td>
<td>Given name (in some Western cultures, also known as the <i>first name</i>)
</td>
<td>Free-form text, no newlines
</td>
<td>Timothy
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-3">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-additional-name"><code>additional-name</code></dfn>"
</td>
<td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first
name)
</td>
<td>Free-form text, no newlines
</td>
<td>John
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-4">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-family-name"><code>family-name</code></dfn>"
</td>
<td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
</td>
<td>Free-form text, no newlines
</td>
<td>Berners-Lee
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-5">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-honorific-suffix"><code>honorific-suffix</code></dfn>"
</td>
<td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
</td>
<td>Free-form text, no newlines
</td>
<td>OM, KBE, FRS, FREng, FRSA
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-6">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-nickname"><code>nickname</code></dfn>"
</td>
<td>Nickname, screen name, handle: a typically short name used instead of the full name
</td>
<td>Free-form text, no newlines
</td>
<td>Tim
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-7">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-organization-title"><code>organization-title</code></dfn>"
</td>
<td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
</td>
<td>Free-form text, no newlines
</td>
<td>Professor
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-8">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-username"><code>username</code></dfn>"
</td>
<td>A username
</td>
<td>Free-form text, no newlines
</td>
<td>timbl
</td>
<td><a href="#control-group-username"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-username">Username</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-new-password"><code>new-password</code></dfn>"
</td>
<td>A new password (e.g. when creating an account or changing a password)
</td>
<td>Free-form text, no newlines
</td>
<td>GUMFXbadyrS3
</td>
<td><a href="#control-group-password"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-password">Password</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-current-password"><code>current-password</code></dfn>"
</td>
<td>The current password for the account identified by the <code
id="autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username-2"><a
href="#attr-fe-autocomplete-username">username</a></code> field (e.g. when logging in)
</td>
<td>Free-form text, no newlines
</td>
<td>qwerty
</td>
<td><a href="#control-group-password"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-password-2">Password</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-one-time-code"><code>one-time-code</code></dfn>"
</td>
<td>One-time code used for verifying user identity
</td>
<td>Free-form text, no newlines
</td>
<td>123456
</td>
<td><a href="#control-group-password"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-password-3">Password</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-organization"><code>organization</code></dfn>"
</td>
<td>Company name corresponding to the person, address, or contact information in the other fields associated with
this field
</td>
<td>Free-form text, no newlines
</td>
<td>World Wide Web Consortium
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-9">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-street-address"><code>street-address</code></dfn>"
</td>
<td>Street address (multiple lines, newlines preserved)
</td>
<td>Free-form text
</td>
<td>32 Vassar Street<br>
MIT Room 32-G524
</td>
<td><a href="#control-group-multiline"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-multiline">Multiline</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="3">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-address-line1"><code>address-line1</code></dfn>"
</td>
<td rowspan="3">Street address (one line per field)
</td>
<td>Free-form text, no newlines
</td>
<td>32 Vassar Street
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-10">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-address-line2"><code>address-line2</code></dfn>"
</td>
<td>Free-form text, no newlines
</td>
<td>MIT Room 32-G524
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-11">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-address-line3"><code>address-line3</code></dfn>"
</td>
<td>Free-form text, no newlines
</td>
<td>
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-12">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-address-level4"><code>address-level4</code></dfn>"
</td>
<td>The most fine-grained <a href="#more-on-address-levels">administrative level</a>, in
addresses with four administrative levels
</td>
<td>Free-form text, no newlines
</td>
<td>
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-13">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-address-level3"><code>address-level3</code></dfn>"
</td>
<td>The <a href="#more-on-address-levels">third administrative level</a>, in addresses with
three or more administrative levels
</td>
<td>Free-form text, no newlines
</td>
<td>
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-14">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-address-level2"><code>address-level2</code></dfn>"
</td>
<td>The <a href="#more-on-address-levels">second administrative level</a>, in addresses with
two or more administrative levels; in the countries with two administrative levels, this would
typically be the city, town, village, or other locality within which the relevant street
address is found
</td>
<td>Free-form text, no newlines
</td>
<td>Cambridge
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-15">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-address-level1"><code>address-level1</code></dfn>"
</td>
<td>The broadest <a href="#more-on-address-levels">administrative level</a> in the address,
i.e. the province within which the locality is found; for example, in the US, this would be the
state; in Switzerland it would be the canton; in the UK, the post town
</td>
<td>Free-form text, no newlines
</td>
<td>MA
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-16">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-country"><code>country</code></dfn>"
</td>
<td>Country code
</td>
<td>Valid <a href="https://www.iso.org/iso-3166-country-codes.html">ISO 3166-1-alpha-2 country code</a> <a
href="references.html#refsISO3166">[ISO3166]</a>
</td>
<td>US
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-17">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-country-name"><code>country-name</code></dfn>"
</td>
<td>Country name
</td>
<td>Free-form text, no newlines; <a href="#autofill-country">derived from <code>country</code> in some cases</a>
</td>
<td>US
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-18">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-postal-code"><code>postal-code</code></dfn>"
</td>
<td>Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i
lang="fr">arrondissement</i>, if relevant, to the <code
id="autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2-2"><a
href="#attr-fe-autocomplete-address-level2">address-level2</a></code> field)
</td>
<td>Free-form text, no newlines
</td>
<td>02139
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-19">Text</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-cc-name"><code>cc-name</code></dfn>"
</td>
<td>Full name as given on the payment instrument
</td>
<td>Free-form text, no newlines
</td>
<td>Tim Berners-Lee
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-20">Text</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="3">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-cc-given-name"><code>cc-given-name</code></dfn>"
</td>
<td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
</td>
<td>Free-form text, no newlines
</td>
<td>Tim
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-21">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-cc-additional-name"><code>cc-additional-name</code></dfn>"
</td>
<td>Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>,
forenames other than the first name)
</td>
<td>Free-form text, no newlines
</td>
<td>
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-22">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-cc-family-name"><code>cc-family-name</code></dfn>"
</td>
<td>Family name given on the payment instrument (in some Western cultures, also known as the <i>last name</i> or
<i>surname</i>)
</td>
<td>Free-form text, no newlines
</td>
<td>Berners-Lee
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-23">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-cc-number"><code>cc-number</code></dfn>"
</td>
<td>Code identifying the payment instrument (e.g. the credit card number)
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>4114360123456785
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-cc-exp"><code>cc-exp</code></dfn>"
</td>
<td>Expiration date of the payment instrument
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-month-string"
href="common-microsyntaxes.html#valid-month-string">Valid month string</a>
</td>
<td>2014-12
</td>
<td><a href="#control-group-month"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-month">Month</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="2">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-cc-exp-month"><code>cc-exp-month</code></dfn>"
</td>
<td>Month component of the expiration date of the payment instrument
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-integer"
href="common-microsyntaxes.html#valid-integer">Valid integer</a> in the range 1..12
</td>
<td>12
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric">Numeric</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-cc-exp-year"><code>cc-exp-year</code></dfn>"
</td>
<td>Year component of the expiration date of the payment instrument
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-integer-2"
href="common-microsyntaxes.html#valid-integer">Valid integer</a> greater than zero
</td>
<td>2014
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-2">Numeric</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-cc-csc"><code>cc-csc</code></dfn>"
</td>
<td>Security code for the payment instrument (also known as the card security code (CSC), card validation code
(CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-2"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>419
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-cc-type"><code>cc-type</code></dfn>"
</td>
<td>Type of payment instrument
</td>
<td>Free-form text, no newlines
</td>
<td>Visa
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-26">Text</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-transaction-currency"><code>transaction-currency</code></dfn>"
</td>
<td>The currency that the user would prefer the transaction to use
</td>
<td>ISO 4217 currency code <a href="references.html#refsISO4217">[ISO4217]</a>
</td>
<td>GBP
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-27">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-transaction-amount"><code>transaction-amount</code></dfn>"
</td>
<td>The amount that the user would like for the transaction (e.g. when entering a bid or sale price)
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-floating-point-number"
href="common-microsyntaxes.html#valid-floating-point-number">Valid floating-point number</a>
</td>
<td>401.00
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-3">Numeric</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-language"><code>language</code></dfn>"
</td>
<td>Preferred language
</td>
<td>Valid BCP 47 language tag <a href="references.html#refsBCP47">[BCP47]</a>
</td>
<td>en
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-28">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-bday"><code>bday</code></dfn>"
</td>
<td>Birthday
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-date-string"
href="common-microsyntaxes.html#valid-date-string">Valid date string</a>
</td>
<td>1955-06-08
</td>
<td><a href="#control-group-date"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-date">Date</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="3">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-bday-day"><code>bday-day</code></dfn>"
</td>
<td>Day component of birthday
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-integer-3"
href="common-microsyntaxes.html#valid-integer">Valid integer</a> in the range 1..31
</td>
<td>8
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-4">Numeric</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-bday-month"><code>bday-month</code></dfn>"
</td>
<td>Month component of birthday
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-integer-4"
href="common-microsyntaxes.html#valid-integer">Valid integer</a> in the range 1..12
</td>
<td>6
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-5">Numeric</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-bday-year"><code>bday-year</code></dfn>"
</td>
<td>Year component of birthday
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-integer-5"
href="common-microsyntaxes.html#valid-integer">Valid integer</a> greater than zero
</td>
<td>1955
</td>
<td><a href="#control-group-numeric"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-6">Numeric</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-sex"><code>sex</code></dfn>"
</td>
<td>Gender identity (e.g. Female, Fa'afafine)
</td>
<td>Free-form text, no newlines
</td>
<td>Male
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-29">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-url"><code>url</code></dfn>"
</td>
<td>Home page or other web page corresponding to the company, person, address, or contact information in the other
fields associated with this field
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-url-string"
href="https://url.spec.whatwg.org/#valid-url-string" data-x-internal="valid-url-string">Valid URL string</a>
</td>
<td>https://www.w3.org/People/Berners-Lee/
</td>
<td><a href="#control-group-url"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-url">URL</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-photo"><code>photo</code></dfn>"
</td>
<td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the
other fields associated with this field
</td>
<td> <a id="autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-2"
href="https://url.spec.whatwg.org/#valid-url-string" data-x-internal="valid-url-string">Valid URL string</a>
</td>
<td>https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
</td>
<td> <a href="#control-group-url"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-url-2">URL</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-tel"><code>tel</code></dfn>"
</td>
<td>Full telephone number, including country code
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-3"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a> and U+0020
SPACE characters, prefixed by a U+002B PLUS SIGN character (+)
</td>
<td>+1 617 253 5702
</td>
<td><a href="#control-group-tel"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-tel">Tel</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="6">
</td>
<td colspan="3">"<dfn id="attr-fe-autocomplete-tel-country-code"><code>tel-country-code</code></dfn>"
</td>
<td>Country code component of the telephone number
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-4"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a> prefixed by
a U+002B PLUS SIGN character (+)
</td>
<td>+1
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-30">Text</a>
</td>
</tr>
<tr>
<td colspan="3">"<dfn id="attr-fe-autocomplete-tel-national"><code>tel-national</code></dfn>"
</td>
<td>Telephone number without the county code component, with a country-internal prefix applied if applicable
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-5"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a> and U+0020
SPACE characters
</td>
<td>617 253 5702
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-31">Text</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="4">
</td>
<td colspan="2">"<dfn id="attr-fe-autocomplete-tel-area-code"><code>tel-area-code</code></dfn>"
</td>
<td>Area code component of the telephone number, with a country-internal prefix applied if applicable
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-6"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>617
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-32">Text</a>
</td>
</tr>
<tr>
<td colspan="2">"<dfn id="attr-fe-autocomplete-tel-local"><code>tel-local</code></dfn>"
</td>
<td>Telephone number without the country code and area code components
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-7"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>2535702
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-33">Text</a>
</td>
</tr>
<tr>
<td class="non-rectangular-cell-indentation" rowspan="2">
</td>
<td>"<dfn id="attr-fe-autocomplete-tel-local-prefix"><code>tel-local-prefix</code></dfn>"
</td>
<td>First part of the component of the telephone number that follows the area code, when that component is split
into two components
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-8"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>253
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-34">Text</a>
</td>
</tr>
<tr>
<td>"<dfn id="attr-fe-autocomplete-tel-local-suffix"><code>tel-local-suffix</code></dfn>"
</td>
<td>Second part of the component of the telephone number that follows the area code, when that component is split
into two components
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-9"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>5702
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-35">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-tel-extension"><code>tel-extension</code></dfn>"
</td>
<td>Telephone number internal extension code
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-10"
href="https://infra.spec.whatwg.org/#ascii-digit" data-x-internal="ascii-digits">ASCII digits</a>
</td>
<td>1000
</td>
<td><a href="#control-group-text"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-text-36">Text</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-email"><code>email</code></dfn>"
</td>
<td>Email address
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-e-mail-address"
href="input.html#valid-e-mail-address">Valid email address</a>
</td>
<td>timbl@w3.org
</td>
<td><a href="#control-group-username"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-username-2">Username</a>
</td>
</tr>
<tr>
<td colspan="4">"<dfn id="attr-fe-autocomplete-impp"><code>impp</code></dfn>"
</td>
<td>URL representing an instant messaging protocol endpoint (for example,
"<code>aim:goim?screenname=example</code>" or "<code>xmpp:fred@example.net</code>")
</td>
<td><a id="autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-3"
href="https://url.spec.whatwg.org/#valid-url-string" data-x-internal="valid-url-string">Valid URL string</a>
</td>
<td>irc://example.org/timbl,isuser
</td>
<td><a href="#control-group-url"
id="autofilling-form-controls:-the-autocomplete-attribute:control-group-url-3">URL</a>
</td>
</tr>
</tbody>
</table>
<button type="submit">Submit</button>
</form>
<script>
const dfnElements = [...window.document.querySelectorAll('dfn')]
dfnElements.forEach(dfnElement => {
const fieldName = dfnElement.querySelector('code').innerText.trim()
const idAttr = dfnElement.getAttribute('id')
const autocompleteName = idAttr.split('attr-fe-autocomplete-').pop()
const parentRowElement = dfnElement.closest('tr')
const cellElements = [...parentRowElement.children]
const controlGroupsElement = [...cellElements].pop()
const exampleCellElement = [...cellElements].slice(0, -1).pop()
exampleCellElement.style.setProperty('background-color', 'pink')
const exampleCellContent = exampleCellElement.innerText
const controlGroupsContent = controlGroupsElement.innerText
controlGroupsElement.remove()
exampleCellElement.innerText = ''
const inputElements = controlGroupsContent.trim().split(' ').forEach(controlGroup => {
const isTextarea = controlGroup === 'Multiline'
const inputType = isTextarea ? 'text' : controlGroup.toLowerCase()
const inputElement = window.document.createElement('input')
inputElement.setAttribute('name', fieldName)
exampleCellElement.append(inputElement)
})
exampleCellElement.previousSibling.remove()
exampleCellElement.previousSibling.remove()
exampleCellElement.previousSibling.remove()
dfnElement.closest('td').nextSibling.remove()
dfnElement.closest('td').nextSibling.remove()
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment