[html5] r7222 - [giow] (0) The second coming of autocomplete: now with lots more granularity. Af [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Aug 1 16:38:12 PDT 2012
Author: ianh
Date: 2012-08-01 16:38:11 -0700 (Wed, 01 Aug 2012)
New Revision: 7222
Modified:
complete.html
index
source
Log:
[giow] (0) The second coming of autocomplete: now with lots more granularity.
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-07-27 18:57:45 UTC (rev 7221)
+++ complete.html 2012-08-01 23:38:11 UTC (rev 7222)
@@ -246,7 +246,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 27 July 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 1 August 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -45192,16 +45192,16 @@
<p>The <dfn id=attr-form-autocomplete title=attr-form-autocomplete><code>autocomplete</code></dfn>
attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
two states. The <code title=attr-form-autocomplete-on>on</code>
- keyword maps to the <dfn id=attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</dfn> state, and the
+ keyword maps to the <dfn id=attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</dfn> state, and the
<code title=attr-form-autocomplete-off>off</code> keyword maps to
the <dfn id=attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</dfn> state.
The attribute may also be omitted. The <i>missing value default</i>
- is the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a>
+ is the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a>
state. The <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a>
state indicates that by default, form controls in the form will have
- their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">off</i>; the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a> state indicates
+ their <a href=#autofill-field-name>autofill field name</a> set to "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"; the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state indicates
that by default, form controls in the form will have their
- <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">automatic</i>.</p>
+ <a href=#autofill-field-name>autofill field name</a> set to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>".</p>
<p>The <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> attributes are <a href=#attributes-for-form-submission>attributes
for form submission</a>.</p>
@@ -45850,7 +45850,7 @@
<pre class=idl>interface <dfn id=htmlinputelement>HTMLInputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute DOMString <a href=#dom-input-accept title=dom-input-accept>accept</a>;
attribute DOMString <a href=#dom-input-alt title=dom-input-alt>alt</a>;
- attribute DOMString <a href=#dom-input-autocomplete title=dom-input-autocomplete>autocomplete</a>;
+ attribute DOMString <a href=#dom-fe-autocomplete title=dom-fe-autocomplete>autocomplete</a>;
attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
attribute boolean <a href=#dom-input-defaultchecked title=dom-input-defaultChecked>defaultChecked</a>;
attribute boolean <a href=#dom-input-checked title=dom-input-checked>checked</a>;
@@ -47209,10 +47209,10 @@
<dfn id=dom-input-defaultvalue title=dom-input-defaultValue><code>defaultValue</code></dfn>
IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute.</p>
- <p>The <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn> and
- <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
+ <p>The <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the respective content attribute
+ of the same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The
+ <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> content attribute,
<a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
@@ -52674,6 +52674,7 @@
<dd><a href=#text-content title="text content">Text</a>.</dd>
<dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code></dd>
<dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
<dd><code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code></dd>
<dd><code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code></dd>
@@ -52690,6 +52691,7 @@
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class=idl>interface <dfn id=htmltextareaelement>HTMLTextAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-fe-autocomplete title=dom-fe-autocomplete>autocomplete</a>;
attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
attribute unsigned long <a href=#dom-textarea-cols title=dom-textarea-cols>cols</a>;
attribute DOMString <a href=#dom-textarea-dirname title=dom-textarea-dirName>dirName</a>;
@@ -52976,6 +52978,7 @@
The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its <a href=#form-owner>form owner</a>.
The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute controls focus.
The <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute controls the user interface's input modality for the control.
+ The <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides autofill behavior.
</p>
<!--TOPIC:DOM APIs-->
@@ -54784,19 +54787,145 @@
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
- input.</p>
+ input. The <dfn id=attr-fe-autocomplete title=attr-fe-autocomplete><code>autocomplete</code></dfn> content
+ attribute can be used to hint to the user agent how to, or indeed
+ whether to, provide such a feature.</p>
- <p>The <dfn id=attr-fe-autocomplete title=attr-fe-autocomplete><code>autocomplete</code></dfn> content
- attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
- three states. The <code title=attr-fe-autocomplete-on>on</code>
- keyword maps to the <dfn id=attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</dfn> state,
- and the <code title=attr-fe-autocomplete-off>off</code> keyword
- maps to the <dfn id=attr-fe-autocomplete-off-state title=attr-fe-autocomplete-off-state>off</dfn>
- state. The attribute may also be omitted. The <i>missing value
- default</i> is the <dfn id=attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</dfn> state.</p>
+ <p>The attribute, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
+ of space-separated tokens</a> consisting of either a single token
+ that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", or a single
+ token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
+ string "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>", or the
+ following, in the order given below:</p>
- <p>The <a href=#attr-fe-autocomplete-off-state title=attr-fe-autocomplete-off-state>off</a>
- state indicates either that the control's input data is particularly
+ <ol><li>
+
+ <p>Optionally, a token whose first eight characters are an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=attr-fe-autocomplete-section>section-</code>", meaning
+ that the field belongs to the named group.</p>
+
+ <div class=note>
+
+ <p>For example, if there are two shipping addresses in the form,
+ then they could be marked up as:</p>
+
+ <pre><fieldset>
+ <legend>Ship the blue gift to...</legend>
+ <p> <label> Address: <input name=ba autocomplete="section-blue shipping street-address"> </label>
+ <p> <label> City: <input name=bc autocomplete="section-blue shipping region"> </label>
+ <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
+</fieldset>
+<fieldset>
+ <legend>Ship the red gift to...</legend>
+ <p> <label> Address: <input name=ra autocomplete="section-red shipping street-address"> </label>
+ <p> <label> City: <input name=rc autocomplete="section-red shipping region"> </label>
+ <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping country"> </label>
+</fieldset></pre>
+
+ </div>
+
+ </li>
+
+ <li>
+
+ <p>Optionally, a token that is an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the following
+ strings:</p>
+
+ <ul class=brief><li>"<dfn id=attr-fe-autocomplete-shipping title=attr-fe-autocomplete-shipping><code>shipping</code></dfn>", meaning the field is part of the shipping address or contact information
+ <li>"<dfn id=attr-fe-autocomplete-billing title=attr-fe-autocomplete-billing><code>billing</code></dfn>", meaning the field is part of the billing address or contact information
+ </ul></li>
+
+ <li>
+
+ <p>Either of the following two options:</p>
+
+ <ul><li>
+
+ <p>A token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
+ for one of the following <a href=#autofill-field>autofill field</a> strings:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
+ <li>"<code title=attr-fe-autocomplete-organisation-title><a href=#attr-fe-autocomplete-organisation-title>organisation-title</a></code>"
+ <li>"<code title=attr-fe-autocomplete-organisation><a href=#attr-fe-autocomplete-organisation>organisation</a></code>"
+ <li>"<code title=attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
+ <li>"<code title=attr-fe-autocomplete-locality><a href=#attr-fe-autocomplete-locality>locality</a></code>"
+ <li>"<code title=attr-fe-autocomplete-region><a href=#attr-fe-autocomplete-region>region</a></code>"
+ <li>"<code title=attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
+ <li>"<code title=attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
+ <li>"<code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
+ <li>"<code title=attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
+ <li>"<code title=attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
+ <li>"<code title=attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
+ </ul><p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ <li>
+
+ <p>The following, in the given order:</p>
+
+ <ol><li>
+
+ <p>Optionally, a token that is an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the following
+ strings:</p>
+
+ <ul class=brief><li>"<dfn id=attr-fe-autocomplete-home title=attr-fe-autocomplete-home><code>home</code></dfn>", meaning the field is for contacting someone at their residence
+ <li>"<dfn id=attr-fe-autocomplete-work title=attr-fe-autocomplete-work><code>work</code></dfn>", meaning the field is for contacting someone at their workplace
+ <li>"<dfn id=attr-fe-autocomplete-mobile title=attr-fe-autocomplete-mobile><code>mobile</code></dfn>"<!-- or "cell"? -->, meaning the field is for contacting someone regardless of location
+ <li>"<dfn id=attr-fe-autocomplete-fax title=attr-fe-autocomplete-fax><code>fax</code></dfn>", meaning the field describes a fax machine's contact details
+ <li>"<dfn id=attr-fe-autocomplete-pager title=attr-fe-autocomplete-pager><code>pager</code></dfn>", meaning the field describes a pager's or beeper's contact details
+ </ul></li>
+
+ <li>
+
+ <p>A token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
+ for one of the following <a href=#autofill-field>autofill field</a> strings:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
+ <li>"<code title=attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
+ <li>"<code title=attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
+ </ul><p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ </ol></li>
+
+ </ul></li>
+
+ </ol><p>The "<dfn id=attr-fe-autocomplete-off title=attr-fe-autocomplete-off><code>off</code></dfn>" keyword
+ indicates either that the control's input data is particularly
sensitive (for example the activation code for a nuclear weapon); or
that it is a value that will never be reused (for example a
one-time-key for a bank login) and the user will therefore have to
@@ -54805,58 +54934,501 @@
provides its own autocomplete mechanism and does not want the user
agent to provide autocompletion values.</p>
- <p>Conversely, the <a href=#attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</a> state
- indicates that the value is not particularly sensitive and the user
- can expect to be able to rely on his user agent to remember values
- he has entered for that control.</p>
+ <p>The "<dfn id=attr-fe-autocomplete-on title=attr-fe-autocomplete-on><code>on</code></dfn>"
+ keyword indicates that the user agent is allowed to provide the user
+ with autocompletion values, but does not provide any further
+ information about what kind of data the user might be expected to
+ enter. User agents would have to use heuristics to decide what
+ autocompletion values to suggest.</p>
- <p>The <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state
- indicates that the user agent is to use the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute on the
- element's <a href=#form-owner>form owner</a> instead. (By default, the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute of
- <code><a href=#the-form-element>form</a></code> elements is in the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a> state.)</p>
+ <p>The <dfn id=autofill-field title="autofill field">autofill fields</dfn> names
+ listed above indicate that the user agent is allowed to provide the
+ user with autocompletion values, and specifies what kind of value is
+ expected. The keywords relate to each other as described in the
+ table below. Each field name listed on a row of this table
+ corresponds to the meaning given in the cell for that row in the
+ column labeled "Meaning". Some fields correspond to subparts of
+ other fields; for example, a credit card expiry date can be
+ expressed as one field giving both the month and year of expiry
+ ("<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"), or as
+ two fields, one giving the month ("<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>") and
+ one the year ("<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"). In
+ such cases, the names of the broader fields cover multiple rows, in
+ which the narrower fields are defined.</p>
+ <p class=note>Generally, authors are encouraged to use the broader
+ fields rather than the narrower fields, as the narrower fields tend
+ to expose Western biases. For example, while it is common in some
+ Western cultures to have a given name and a family name, in that
+ order (and thus often referred to as a <i>first name</i> and a
+ <i>surname</i>), many cultures put the family name first and the
+ given name second, and many others simply have one name (a
+ <i>mononym</i>). Having a single field is therefore more
+ flexible.</p>
+
+ <table><thead><tr><th colspan=4> Field name
+ <th> Meaning
+ <th> Example
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-name title=attr-fe-autocomplete-name><code>name</code></dfn>"
+ <td>Full name
+ <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
+ <tr><td class=non-rectangular-cell-indentation rowspan=5>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-honorific-prefix title=attr-fe-autocomplete-honorific-prefix><code>honorific-prefix</code></dfn>"
+ <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang=fr title="">M<sup>lle</sup></span>")
+ <td>Sir
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-given-name title=attr-fe-autocomplete-given-name><code>given-name</code></dfn>"
+ <td>Given name (in some Western cultures, also known as the <i>first name</i>)
+ <td>Timothy
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-additional-name title=attr-fe-autocomplete-additional-name><code>additional-name</code></dfn>"
+ <td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
+ <td>John
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-family-name title=attr-fe-autocomplete-family-name><code>family-name</code></dfn>"
+ <td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
+ <td>Berners-Lee
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-honorific-suffix title=attr-fe-autocomplete-honorific-suffix><code>honorific-suffix</code></dfn>"
+ <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
+ <td>OM, KBE, FRS, FREng, FRSA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-nickname title=attr-fe-autocomplete-nickname><code>nickname</code></dfn>"
+ <td>Nickname, screen name, handle: a typically short name used instead of the full name
+ <td>Tim
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-organisation-title title=attr-fe-autocomplete-organisation-title><code>organisation-title</code></dfn>"
+ <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
+ <td>Professor
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-organisation title=attr-fe-autocomplete-organisation><code>organisation</code></dfn>"
+ <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
+ <td>World Wide Web Consortium
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-street-address title=attr-fe-autocomplete-street-address><code>street-address</code></dfn>"
+ <td>Street address (as one line)
+ <td>32 Vassar Street; MIT Room 32-G524
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-address-line1 title=attr-fe-autocomplete-address-line1><code>address-line1</code></dfn>"
+ <td rowspan=3>Street address (as multiple lines)
+ <td>32 Vassar Street
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-address-line2 title=attr-fe-autocomplete-address-line2><code>address-line2</code></dfn>"
+ <td>MIT Room 32-G524
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-address-line3 title=attr-fe-autocomplete-address-line3><code>address-line3</code></dfn>"
+ <td>
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-locality title=attr-fe-autocomplete-locality><code>locality</code></dfn>"
+ <td>City, town, village, or other locality within which the relevant street address is found
+ <td>Cambridge
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-region title=attr-fe-autocomplete-region><code>region</code></dfn>"
+ <td>Provice such as a state, county, or canton within which the locality is found
+ <td>MA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-country title=attr-fe-autocomplete-country><code>country</code></dfn>"
+ <td>Country
+ <td>USA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-postal-code title=attr-fe-autocomplete-postal-code><code>postal-code</code></dfn>"
+ <td>Postal code, post code, ZIP code
+ <td>02139
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-name title=attr-fe-autocomplete-cc-name><code>cc-name</code></dfn>"
+ <td>Full name as given on the payment instrument
+ <td>Tim Berners-Lee
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-cc-given-name title=attr-fe-autocomplete-cc-given-name><code>cc-given-name</code></dfn>"
+ <td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
+ <td>Tim
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-additional-name title=attr-fe-autocomplete-cc-additional-name><code>cc-additional-name</code></dfn>"
+ <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>
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-family-name title=attr-fe-autocomplete-cc-family-name><code>cc-family-name</code></dfn>"
+ <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>Berners-Lee
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number title=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
+ <td>Code identifying the payment instrument (e.g. the credit card number)
+ <td>4114360123456785 <!-- http://www.auricsystems.com/support-center/sample-credit-card-numbers -->
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-exp title=attr-fe-autocomplete-cc-exp><code>cc-exp</code></dfn>"
+ <td>Expiration date of the payment instrument
+ <td>2014-12
+ <tr><td class=non-rectangular-cell-indentation rowspan=2>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-cc-exp-month title=attr-fe-autocomplete-cc-exp-month><code>cc-exp-month</code></dfn>"
+ <td>Month component of the expiration date of the payment instrument
+ <td>12
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-exp-year title=attr-fe-autocomplete-cc-exp-year><code>cc-exp-year</code></dfn>"
+ <td>Year component of the expiration date of the payment instrument
+ <td>2014
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-csc title=attr-fe-autocomplete-cc-csc><code>cc-csc</code></dfn>"
+ <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>419
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-language title=attr-fe-autocomplete-language><code>language</code></dfn>"
+ <td>Preferred language
+ <td>English
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-bday title=attr-fe-autocomplete-bday><code>bday</code></dfn>"
+ <td>Birthday
+ <td>1955-06-08
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-bday-day title=attr-fe-autocomplete-bday-day><code>bday-day</code></dfn>"
+ <td>Day component of birthday
+ <td>8
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-bday-month title=attr-fe-autocomplete-bday-month><code>bday-month</code></dfn>"
+ <td>Month component of birthday
+ <td>June
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-bday-year title=attr-fe-autocomplete-bday-year><code>bday-year</code></dfn>"
+ <td>Year component of birthday
+ <td>1955
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-sex title=attr-fe-autocomplete-sex><code>sex</code></dfn>"
+ <td>Gender identity (e.g. Female, Fa'afafine)
+ <td>Male
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-url title=attr-fe-autocomplete-url><code>url</code></dfn>"
+ <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>http://www.w3.org/People/Berners-Lee/
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-photo title=attr-fe-autocomplete-photo><code>photo</code></dfn>"
+ <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
+ <td>http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-tel title=attr-fe-autocomplete-tel><code>tel</code></dfn>"
+ <td>Full telephone number, including country code
+ <td>+1 617 253 5702
+ <tr><td class=non-rectangular-cell-indentation rowspan=6>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-tel-country-code title=attr-fe-autocomplete-tel-country-code><code>tel-country-code</code></dfn>"
+ <td>Country code component of the telephone number
+ <td>+1
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-tel-national title=attr-fe-autocomplete-tel-national><code>tel-national</code></dfn>"
+ <td>Telephone number without the county code component
+ <td>617 253 5702
+ <tr><td class=non-rectangular-cell-indentation rowspan=4>
+ <td colspan=2>"<dfn id=attr-fe-autocomplete-tel-area-code title=attr-fe-autocomplete-tel-area-code><code>tel-area-code</code></dfn>"
+ <td>Area code component of the telephone number
+ <td>617
+ <tr><td colspan=2>"<dfn id=attr-fe-autocomplete-tel-local title=attr-fe-autocomplete-tel-local><code>tel-local</code></dfn>"
+ <td>Telephone number without the country code and area code components
+ <td>2535702
+ <tr><td class=non-rectangular-cell-indentation rowspan=2>
+ <td>"<dfn id=attr-fe-autocomplete-tel-local-prefix title=attr-fe-autocomplete-tel-local-prefix><code>tel-local-prefix</code></dfn>"
+ <td>First part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>253
+ <tr><td>"<dfn id=attr-fe-autocomplete-tel-local-suffix title=attr-fe-autocomplete-tel-local-suffix><code>tel-local-suffix</code></dfn>"
+ <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>5702
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-tel-extension title=attr-fe-autocomplete-tel-extension><code>tel-extension</code></dfn>"
+ <td>Telephone number internal extension code
+ <td>1000
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-email title=attr-fe-autocomplete-email><code>email</code></dfn>"
+ <td>E-mail address
+ <td>timbl at w3.org
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-impp title=attr-fe-autocomplete-impp><code>impp</code></dfn>"
+ <td>URL representing an instant messaging protocol endpoint (for example, "<code title="">aim:goim?screenname=example</code>" or <code title="">xmpp:fred at example.net</code>")
+ <td>irc://example.org/timbl,isuser
+ </table><p>If the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute is omitted, the default value corresponding to the state
+ of the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is used
+ instead (either "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" or
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"). If there is no
+ <a href=#form-owner>form owner</a>, then the value "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" is used.</p>
+
<div class=impl>
- <p>Each form control defined to have a <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute has a
- <dfn id=resulting-autocompletion-state>resulting autocompletion state</dfn>, which is either <i title="">automatic</i> or <i title="">off</i>.</p>
+ <p>Each <code><a href=#the-input-element>input</a></code>, <code><a href=#the-select-element>select</a></code>, and
+ <code><a href=#the-textarea-element>textarea</a></code> element has an <dfn id=autofill-hint-set>autofill hint set</dfn>,
+ an <dfn id=autofill-field-name>autofill field name</dfn>, and an <dfn id=idl-exposed-autofill-value>IDL-exposed autofill
+ value</dfn> whose values are defined as the result of running the
+ following algorithm:</p>
- <p>When such a form control is in one of the following conditions,
- its <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">automatic</i>; otherwise, the its <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> is <i title="">off</i>:</p>
+ <ol><li><p>If the element has no <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, then
+ jump to the step labeled <i>default</i>.</li>
- <ul class=brief><li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</a>
- state.</li>
+ <li><p>Let <var title="">tokens</var> be the result of <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the attribute's value on
+ spaces</a>.</li>
- <li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state,
- and the element has no <a href=#form-owner>form owner</a>.</li>
+ <li><p>If <var title="">tokens</var> is empty, then jump to the
+ step labeled <i>default</i>.</li>
- <li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state,
- and the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
- the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>automatic</a>
- state.</li>
+ <li><p>Let <var title="">index</var> be the index of the last token
+ in <var title="">tokens</var>.</li>
- </ul><p>When a form control's <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
- is <i title="">automatic</i>, the user agent may store the value
- entered or selected by the user so that if the user returns to the
- page, the UA can prefill the form. Otherwise, the user agent should
+ <li>
+
+ <p>If the <var title="">index</var>th token in <var title="">tokens</var> is not an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the tokens given in the
+ first column of the following table, or if the number of tokens in
+ <var title="">tokens</var> is greater than the maximum number
+ given in the cell in the second column of that token's row, then
+ jump to the step labeled <i>default</i>. Otherwise, let <var title="">field</var> be the string given in the cell of the first
+ column of the matching row, and let <var title="">category</var>
+ be the value of the cell in the third column of that same row.</p>
+
+ <table><thead><tr><th>Token
+ <th>Maximum number of tokens
+ <th>Category
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"
+ <td>1
+ <td>Off
+ <tr><td>"<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>"
+ <td>1
+ <td>Automatic
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-organisation-title><a href=#attr-fe-autocomplete-organisation-title>organisation-title</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-organisation><a href=#attr-fe-autocomplete-organisation>organisation</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-locality><a href=#attr-fe-autocomplete-locality>locality</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-region><a href=#attr-fe-autocomplete-region>region</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
+ <td>3
+ <td>Normal
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
+ <td>4
+ <td>Contact
+ </table></li>
+
+ <li><p>If <var title="">category</var> is Off, let the element's
+ <a href=#autofill-field-name>autofill field name</a> be the string "<code title="">off</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
+ empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
+ string "<code title="">off</code>". Then, abort these steps.</p>
+
+ <li><p>If <var title="">category</var> is Automatic, let the
+ element's <a href=#autofill-field-name>autofill field name</a> be the string "<code title="">on</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
+ empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
+ string "<code title="">on</code>". Then, abort these steps.</p>
+
+ <li><p>Let <var title="">scope tokens</var> be an empty list.</li>
+
+ <li><p>Let <var title="">hint tokens</var> be an empty set.</li>
+
+ <li><p>Let <var title="">IDL value</var> have the same value as
+ <var title="">field</var>.</li>
+
+ <li><p>If the <var title="">index</var>th token in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li>
+
+ <p>If <var title="">category</var> is Contact and the <var title="">index</var>th token in <var title="">tokens</var> is an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-home><a href=#attr-fe-autocomplete-home>home</a></code>"
+ <li>"<code title=attr-fe-autocomplete-work><a href=#attr-fe-autocomplete-work>work</a></code>"
+ <li>"<code title=attr-fe-autocomplete-mobile><a href=#attr-fe-autocomplete-mobile>mobile</a></code>"
+ <li>"<code title=attr-fe-autocomplete-fax><a href=#attr-fe-autocomplete-fax>fax</a></code>"
+ <li>"<code title=attr-fe-autocomplete-pager><a href=#attr-fe-autocomplete-pager>pager</a></code>"
+ </ul><p>The substeps are:</p>
+
+ <ol><li><p>Let <var title="">contact</var> be the matching
+ string from the list above.</li>
+
+ <li><p>Insert <var title="">contact</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">contact</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point will always be <var title="">field</var>).</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ </ol></li>
+
+ <li>
+
+ <p>If the <var title="">index</var>th token in <var title="">tokens</var> is an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>"
+ <li>"<code title=attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>"
+ </ul><p>The substeps are:</p>
+
+ <ol><li><p>Let <var title="">mode</var> be the matching
+ string from the list above.</li>
+
+ <li><p>Insert <var title="">mode</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">mode</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point either be <var title="">field</var> or the concatenation of
+ <var title="">contact</var>, a space, and <var title="">field</var>).</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ </ol></li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is not the first entry, then jump to the step
+ labeled <i>default</i>.</li>
+
+ <li><p>If the first eight characters of the <var title="">index</var>th
+ token in <var title="">tokens</var> are not an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for the string "<code title=attr-fe-autocomplete-section>section-</code>", then jump to
+ the step labeled <i>default</i>.</li>
+
+ <li><p>Let <var title="">section</var> be the <var title="">index</var>th token in <var title="">tokens</var>,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li><p>Insert <var title="">section</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">section</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var>.</li>
+
+ <li><p><i>Done</i>: Let the element's <a href=#autofill-hint-set>autofill hint
+ set</a> be <var title="">hint tokens</var>.</p>
+
+ <li><p>Let the element's <a href=#autofill-field-name>autofill field name</a> be
+ <var title="">field</var>.</p>
+
+ <li><p>Let the element's <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be
+ <var title="">IDL value</var>.</p>
+
+ <li><p>Abort these steps.</li>
+
+ <li><p><i>Default</i>: Let the element's <a href=#idl-exposed-autofill-value>IDL-exposed autofill
+ value</a> be the empty string, and let its <a href=#autofill-hint-set>autofill hint
+ set</a> be empty.</li>
+
+ <li><p>Let <var title="">form</var> be the element's <a href=#form-owner>form
+ owner</a>, if any, or null otherwise.</li>
+
+ <li>
+
+ <p>If <var title="">form</var> is not null and <var title="">form</var>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
+ the <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a>
+ state, then let the element's <a href=#autofill-field-name>autofill field name</a> be
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>".</p>
+
+ <p>Otherwise, let the element's <a href=#autofill-field-name>autofill field name</a>
+ be "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>".</p>
+
+ </li>
+
+ </ol><p>When an element's <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent should
not remember the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should not offer past
values to the user.</p>
- <p>In addition, if the <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
- is <i title="">off</i>, <a href=#history-autocomplete>values are
- reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the
- history</a>.</p>
+ <p class=note>In addition, when an element's <a href=#autofill-field-name>autofill field
+ name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>",
+ <a href=#history-autocomplete>values are reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the history</a>.</p>
- <p>The autocompletion mechanism must be implemented by the user
- agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
- where the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>
- (e.g. just after the element has been inserted into the document, or
- when the user agent <a href=#stop-parsing title="stop parsing">stops
- parsing</a>).</p>
-
<div class=example>
<p>Banks frequently do not want UAs to prefill login
@@ -54867,17 +55439,162 @@
</div>
- <p>A user agent may allow the user to override the <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> and set it to always <i title="">on</i>,
- always allowing values to be remembered and prefilled, or always <i title="">off</i>, never remembering values. However, user agents
- should not allow users to trivially override the <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> to <i title="">on</i>, as there are
- significant security implications for the user if all values are
+ <p>When an element's <a href=#autofill-field-name>autofill field name</a> is
+ <em>not</em> "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>",
+ the user agent may store the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and may offer previously
+ stored values to the user.</p>
+
+ <p>When the <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>", the user agent should
+ attempt to use heuristics to determine the most appropriate values
+ to offer the user, e.g. based on the element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> value, the position of the element
+ in the document's DOM, what other fields exist in the form, and so
+ forth.</p>
+
+ <p>When the <a href=#autofill-field-name>autofill field name</a> is one of the names of
+ the <a href=#autofill-field title="autofill field">autofill fields</a> described
+ above, the user agent should provide suggestions that match the
+ meaning of the field name as given in the table earlier in this
+ section. The <a href=#autofill-hint-set>autofill hint set</a> should be used to select
+ amongst multiple possible suggestions.</p>
+
+ <p class=example>For example, if a user once entered one address
+ into fields that used the "<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>" keyword, and
+ another address into fields that used the "<code title=attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>" keyword, then
+ in subsequent forms only the first address would be suggested for
+ form controls whose <a href=#autofill-hint-set>autofill hint set</a> contains the
+ keyword "<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>". Both
+ addresses might be suggested, however, for address-related form
+ controls whose <a href=#autofill-hint-set>autofill hint set</a> does not contain
+ either keyword.</p>
+
+ <p>When the user agent prefills form controls, elements with the
+ same <a href=#form-owner>form owner</a> and the same <a href=#autofill-hint-set>autofill hint
+ set</a> must use data relating to the same person, address,
+ payment instrument, and/or contact details.</p>
+
+ <p class=example>Suppose a user agent knows of two phone numbers,
+ +1 555 123 1234 and +1 555 666 7777. It would not be conforming for
+ the user agent to fill a field with <code title="">autocomplete="shipping tel-local-prefix"</code> with the
+ value "123" and another field in the same form with <code title="">autocomplete="shipping tel-local-suffix"</code> with the
+ value "7777". The only valid pefilled values given the
+ aforementioned information would be "123" and "1234", or "666" and
+ "7777", respectively.</p>
+
+ <p class=example>Similarly, if a form for some reason contained
+ both a "<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ field and a "<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ field, and the user agent prefilled the form, then the month
+ component of the former would have to match the latter.</p>
+
+ <p>The autocompletion mechanism must be implemented by the user
+ agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
+ where the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i> (e.g.
+ just after the element has been inserted into the document, or when
+ the user agent <a href=#stop-parsing title="stop parsing">stops parsing</a>).
+ User agents must only prefill controls using values that the user
+ could have entered.</p>
+
+ <p class=example>For example, if a <code><a href=#the-select-element>select</a></code> element
+ only has <code><a href=#the-option-element>option</a></code> elements with values "Steve" and
+ "Rebecca", "Jay", and "Bob", and has an <a href=#autofill-field-name>autofill field
+ name</a> "<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>", but the
+ user agent's only idea for what to prefill the field with is "Evan",
+ then the user agent cannot prefill the field. It would not be
+ conforming to somehow set the <code><a href=#the-select-element>select</a></code> element to the
+ value "Evan", since the user could not have done so themselves.</p>
+
+ <p>A user agent prefilling a form control's <a href=#concept-fe-value title=concept-fe-value>value</a> must not cause that control to
+ <a href=#suffering-from-a-type-mismatch title="suffering from a type mismatch">suffer from a type
+ mismatch</a>, <a href=#suffering-from-a-pattern-mismatch title="suffering from a pattern
+ mismatch">suffer from a pattern mismatch</a>, <a href=#suffering-from-being-too-long title="suffering from being too long">suffer from being too
+ long</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
+ an underflow</a>, <a href=#suffering-from-an-overflow title="suffering from an overflow">suffer
+ from an overflow</a>, or <a href=#suffering-from-a-step-mismatch title="suffering from a step
+ mismatch">suffer from a step mismatch</a>. Where possible, user
+ agents should use heuristics to attempt to convert values so that
+ they can be used.</p>
+
+ <div class=example>
+
+ <p>For example, if the user agent knows that the user's middle name
+ is "Ines", and attempts to prefill a form control that looks like this:</p>
+
+ <pre><input name=middle-initial maxlength=1 autocomplete="additional-name"></pre>
+
+ <p>...then the user agent could convert "Ines" to "I" and prefill
+ it that way.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>A more elaborate example would be with month values. If the user
+ agent knows that the user's birthday is the 27th of July 2012, then
+ it might try to prefill all of the following controls with slightly
+ different values, all driven from this information:</p>
+
+ <table><tr><td>
+ <pre><input name=b type=month autocomplete="bday"></pre>
+ <td>
+ 2012-07
+ <td>
+ The day is dropped since the <a href="#month-state-(type=month)" title=attr-input-type-month>Month</a> state only accepts a
+ month/year combination.
+ <tr><td>
+ <pre><select name=c>
+ <option>Jan
+ <option>Feb
+ <em>...</em>
+ <option>Jul
+ <option>Aug
+ <em>...</em>
+</select></pre>
+ <td>
+ July
+ <td>
+ The user agent picks the month from the listed options, either
+ by noticing there are twelve options and picking the 7th, or by
+ recognising that one of the strings (three characters "Jul"
+ followed by a newline and a space) is a close match for the name
+ of the month (July) in one of the user agent's supported
+ languages, or through some other similar mechanism.
+ <tr><td>
+ <pre><input name=a type=number min=1 max=12 autocomplete="bday-month"></pre>
+ <td>
+ 7
+ <td>
+ User agent converts "July" to a month number in the range 1..12, like the field.
+ <tr><td>
+ <pre><input name=a type=number min=0 max=11 autocomplete="bday-month"></pre>
+ <td>
+ 6
+ <td>
+ User agent converts "July" to a month number in the range 0..11, like the field.
+ <tr><td>
+ <pre><input name=a type=number min=1 max=11 autocomplete="bday-month"></pre>
+ <td>
+ <td>
+ User agent doesn't fill in the field, since it can't make a good guess as to what the form expects.
+ </table></div>
+
+ <p>A user agent may allow the user to override an element's
+ <a href=#autofill-field-name>autofill field name</a>, e.g. to change it from "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" to allow values to be
+ remembered and prefilled despite the page author's objections, or to
+ always "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", never
+ remembering values. However, user agents should not allow users to
+ trivially override the <a href=#autofill-field-name>autofill field name</a> from "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" or other values, as there
+ are significant security implications for the user if all values are
always remembered, regardless of the site's preferences.</p>
+ <p>The <dfn id=dom-fe-autocomplete title=dom-fe-autocomplete><code>autocomplete</code></dfn> IDL
+ attribute, on getting, must return the element's <a href=#idl-exposed-autofill-value>IDL-exposed
+ autofill value</a>, and on setting, must <a href=#reflect>reflect</a> the
+ content attribute of the same name.</p>
+
</div>
+
<!--TOPIC:DOM APIs-->
<h4 id=textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</h4>
@@ -69698,7 +70415,7 @@
<li id=history-autocomplete><p>If the <var title="">specified
entry</var>'s <code><a href=#document>Document</a></code> has any form controls whose
- <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">off</i>, invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
+ <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
of those elements.</li>
<li><p>If the <a href=#current-document-readiness>current document readiness</a> of the <var title="">specified entry</var>'s <code><a href=#document>Document</a></code> is
@@ -101736,10 +102453,15 @@
<td> Execute script asynchronously
<td> <a href=#boolean-attribute>Boolean attribute</a>
<tr><th> <code title="">autocomplete</code>
- <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>;
- <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>input</a></code>
- <td> Prevent the user agent from providing autocompletions for the form control(s)
+ <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>
+ <td> Default setting for autofill feature for controls in the form
<td> "<code title="">on</code>"; "<code title="">off</code>"
+ <tr><th> <code title="">autocomplete</code>
+ <td> <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>input</a></code>;
+ <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>select</a></code>;
+ <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>textarea</a></code>
+ <td> Hint for form autofill feature
+ <td> <a href=#autofill-field title="autofill field">Autofill field</a> name and related tokens*
<tr><th> <code title="">autofocus</code>
<td> <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>button</a></code>;
<code title=attr-fe-autofocus><a href=#attr-fe-autofocus>input</a></code>;
Modified: index
===================================================================
--- index 2012-07-27 18:57:45 UTC (rev 7221)
+++ index 2012-08-01 23:38:11 UTC (rev 7222)
@@ -246,7 +246,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 27 July 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 1 August 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -45192,16 +45192,16 @@
<p>The <dfn id=attr-form-autocomplete title=attr-form-autocomplete><code>autocomplete</code></dfn>
attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
two states. The <code title=attr-form-autocomplete-on>on</code>
- keyword maps to the <dfn id=attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</dfn> state, and the
+ keyword maps to the <dfn id=attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</dfn> state, and the
<code title=attr-form-autocomplete-off>off</code> keyword maps to
the <dfn id=attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</dfn> state.
The attribute may also be omitted. The <i>missing value default</i>
- is the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a>
+ is the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a>
state. The <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a>
state indicates that by default, form controls in the form will have
- their <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">off</i>; the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a> state indicates
+ their <a href=#autofill-field-name>autofill field name</a> set to "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"; the <a href=#attr-form-autocomplete-on-state title=attr-form-autocomplete-on-state>on</a> state indicates
that by default, form controls in the form will have their
- <a href=#resulting-autocompletion-state>resulting autocompletion state</a> set to <i title="">automatic</i>.</p>
+ <a href=#autofill-field-name>autofill field name</a> set to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>".</p>
<p>The <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>, <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>, <code title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> attributes are <a href=#attributes-for-form-submission>attributes
for form submission</a>.</p>
@@ -45850,7 +45850,7 @@
<pre class=idl>interface <dfn id=htmlinputelement>HTMLInputElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute DOMString <a href=#dom-input-accept title=dom-input-accept>accept</a>;
attribute DOMString <a href=#dom-input-alt title=dom-input-alt>alt</a>;
- attribute DOMString <a href=#dom-input-autocomplete title=dom-input-autocomplete>autocomplete</a>;
+ attribute DOMString <a href=#dom-fe-autocomplete title=dom-fe-autocomplete>autocomplete</a>;
attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
attribute boolean <a href=#dom-input-defaultchecked title=dom-input-defaultChecked>defaultChecked</a>;
attribute boolean <a href=#dom-input-checked title=dom-input-checked>checked</a>;
@@ -47209,10 +47209,10 @@
<dfn id=dom-input-defaultvalue title=dom-input-defaultValue><code>defaultValue</code></dfn>
IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-input-value><a href=#attr-input-value>value</a></code> content attribute.</p>
- <p>The <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn> and
- <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
+ <p>The <dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the respective content attribute
+ of the same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The
+ <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> content attribute,
<a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
@@ -52674,6 +52674,7 @@
<dd><a href=#text-content title="text content">Text</a>.</dd>
<dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code></dd>
<dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code></dd>
<dd><code title=attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code></dd>
<dd><code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code></dd>
@@ -52690,6 +52691,7 @@
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class=idl>interface <dfn id=htmltextareaelement>HTMLTextAreaElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-fe-autocomplete title=dom-fe-autocomplete>autocomplete</a>;
attribute boolean <a href=#dom-fe-autofocus title=dom-fe-autofocus>autofocus</a>;
attribute unsigned long <a href=#dom-textarea-cols title=dom-textarea-cols>cols</a>;
attribute DOMString <a href=#dom-textarea-dirname title=dom-textarea-dirName>dirName</a>;
@@ -52976,6 +52978,7 @@
The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its <a href=#form-owner>form owner</a>.
The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute controls focus.
The <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute controls the user interface's input modality for the control.
+ The <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides autofill behavior.
</p>
<!--TOPIC:DOM APIs-->
@@ -54784,19 +54787,145 @@
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
- input.</p>
+ input. The <dfn id=attr-fe-autocomplete title=attr-fe-autocomplete><code>autocomplete</code></dfn> content
+ attribute can be used to hint to the user agent how to, or indeed
+ whether to, provide such a feature.</p>
- <p>The <dfn id=attr-fe-autocomplete title=attr-fe-autocomplete><code>autocomplete</code></dfn> content
- attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The attribute has
- three states. The <code title=attr-fe-autocomplete-on>on</code>
- keyword maps to the <dfn id=attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</dfn> state,
- and the <code title=attr-fe-autocomplete-off>off</code> keyword
- maps to the <dfn id=attr-fe-autocomplete-off-state title=attr-fe-autocomplete-off-state>off</dfn>
- state. The attribute may also be omitted. The <i>missing value
- default</i> is the <dfn id=attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</dfn> state.</p>
+ <p>The attribute, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
+ of space-separated tokens</a> consisting of either a single token
+ that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", or a single
+ token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the
+ string "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>", or the
+ following, in the order given below:</p>
- <p>The <a href=#attr-fe-autocomplete-off-state title=attr-fe-autocomplete-off-state>off</a>
- state indicates either that the control's input data is particularly
+ <ol><li>
+
+ <p>Optionally, a token whose first eight characters are an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title=attr-fe-autocomplete-section>section-</code>", meaning
+ that the field belongs to the named group.</p>
+
+ <div class=note>
+
+ <p>For example, if there are two shipping addresses in the form,
+ then they could be marked up as:</p>
+
+ <pre><fieldset>
+ <legend>Ship the blue gift to...</legend>
+ <p> <label> Address: <input name=ba autocomplete="section-blue shipping street-address"> </label>
+ <p> <label> City: <input name=bc autocomplete="section-blue shipping region"> </label>
+ <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
+</fieldset>
+<fieldset>
+ <legend>Ship the red gift to...</legend>
+ <p> <label> Address: <input name=ra autocomplete="section-red shipping street-address"> </label>
+ <p> <label> City: <input name=rc autocomplete="section-red shipping region"> </label>
+ <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping country"> </label>
+</fieldset></pre>
+
+ </div>
+
+ </li>
+
+ <li>
+
+ <p>Optionally, a token that is an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the following
+ strings:</p>
+
+ <ul class=brief><li>"<dfn id=attr-fe-autocomplete-shipping title=attr-fe-autocomplete-shipping><code>shipping</code></dfn>", meaning the field is part of the shipping address or contact information
+ <li>"<dfn id=attr-fe-autocomplete-billing title=attr-fe-autocomplete-billing><code>billing</code></dfn>", meaning the field is part of the billing address or contact information
+ </ul></li>
+
+ <li>
+
+ <p>Either of the following two options:</p>
+
+ <ul><li>
+
+ <p>A token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
+ for one of the following <a href=#autofill-field>autofill field</a> strings:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
+ <li>"<code title=attr-fe-autocomplete-organisation-title><a href=#attr-fe-autocomplete-organisation-title>organisation-title</a></code>"
+ <li>"<code title=attr-fe-autocomplete-organisation><a href=#attr-fe-autocomplete-organisation>organisation</a></code>"
+ <li>"<code title=attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
+ <li>"<code title=attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
+ <li>"<code title=attr-fe-autocomplete-locality><a href=#attr-fe-autocomplete-locality>locality</a></code>"
+ <li>"<code title=attr-fe-autocomplete-region><a href=#attr-fe-autocomplete-region>region</a></code>"
+ <li>"<code title=attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
+ <li>"<code title=attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
+ <li>"<code title=attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
+ <li>"<code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
+ <li>"<code title=attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
+ <li>"<code title=attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
+ <li>"<code title=attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
+ <li>"<code title=attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
+ </ul><p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ <li>
+
+ <p>The following, in the given order:</p>
+
+ <ol><li>
+
+ <p>Optionally, a token that is an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the following
+ strings:</p>
+
+ <ul class=brief><li>"<dfn id=attr-fe-autocomplete-home title=attr-fe-autocomplete-home><code>home</code></dfn>", meaning the field is for contacting someone at their residence
+ <li>"<dfn id=attr-fe-autocomplete-work title=attr-fe-autocomplete-work><code>work</code></dfn>", meaning the field is for contacting someone at their workplace
+ <li>"<dfn id=attr-fe-autocomplete-mobile title=attr-fe-autocomplete-mobile><code>mobile</code></dfn>"<!-- or "cell"? -->, meaning the field is for contacting someone regardless of location
+ <li>"<dfn id=attr-fe-autocomplete-fax title=attr-fe-autocomplete-fax><code>fax</code></dfn>", meaning the field describes a fax machine's contact details
+ <li>"<dfn id=attr-fe-autocomplete-pager title=attr-fe-autocomplete-pager><code>pager</code></dfn>", meaning the field describes a pager's or beeper's contact details
+ </ul></li>
+
+ <li>
+
+ <p>A token that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
+ for one of the following <a href=#autofill-field>autofill field</a> strings:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
+ <li>"<code title=attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
+ <li>"<code title=attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
+ <li>"<code title=attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
+ </ul><p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ </ol></li>
+
+ </ul></li>
+
+ </ol><p>The "<dfn id=attr-fe-autocomplete-off title=attr-fe-autocomplete-off><code>off</code></dfn>" keyword
+ indicates either that the control's input data is particularly
sensitive (for example the activation code for a nuclear weapon); or
that it is a value that will never be reused (for example a
one-time-key for a bank login) and the user will therefore have to
@@ -54805,58 +54934,501 @@
provides its own autocomplete mechanism and does not want the user
agent to provide autocompletion values.</p>
- <p>Conversely, the <a href=#attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</a> state
- indicates that the value is not particularly sensitive and the user
- can expect to be able to rely on his user agent to remember values
- he has entered for that control.</p>
+ <p>The "<dfn id=attr-fe-autocomplete-on title=attr-fe-autocomplete-on><code>on</code></dfn>"
+ keyword indicates that the user agent is allowed to provide the user
+ with autocompletion values, but does not provide any further
+ information about what kind of data the user might be expected to
+ enter. User agents would have to use heuristics to decide what
+ autocompletion values to suggest.</p>
- <p>The <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state
- indicates that the user agent is to use the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute on the
- element's <a href=#form-owner>form owner</a> instead. (By default, the <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute of
- <code><a href=#the-form-element>form</a></code> elements is in the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>on</a> state.)</p>
+ <p>The <dfn id=autofill-field title="autofill field">autofill fields</dfn> names
+ listed above indicate that the user agent is allowed to provide the
+ user with autocompletion values, and specifies what kind of value is
+ expected. The keywords relate to each other as described in the
+ table below. Each field name listed on a row of this table
+ corresponds to the meaning given in the cell for that row in the
+ column labeled "Meaning". Some fields correspond to subparts of
+ other fields; for example, a credit card expiry date can be
+ expressed as one field giving both the month and year of expiry
+ ("<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"), or as
+ two fields, one giving the month ("<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>") and
+ one the year ("<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"). In
+ such cases, the names of the broader fields cover multiple rows, in
+ which the narrower fields are defined.</p>
+ <p class=note>Generally, authors are encouraged to use the broader
+ fields rather than the narrower fields, as the narrower fields tend
+ to expose Western biases. For example, while it is common in some
+ Western cultures to have a given name and a family name, in that
+ order (and thus often referred to as a <i>first name</i> and a
+ <i>surname</i>), many cultures put the family name first and the
+ given name second, and many others simply have one name (a
+ <i>mononym</i>). Having a single field is therefore more
+ flexible.</p>
+
+ <table><thead><tr><th colspan=4> Field name
+ <th> Meaning
+ <th> Example
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-name title=attr-fe-autocomplete-name><code>name</code></dfn>"
+ <td>Full name
+ <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
+ <tr><td class=non-rectangular-cell-indentation rowspan=5>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-honorific-prefix title=attr-fe-autocomplete-honorific-prefix><code>honorific-prefix</code></dfn>"
+ <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang=fr title="">M<sup>lle</sup></span>")
+ <td>Sir
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-given-name title=attr-fe-autocomplete-given-name><code>given-name</code></dfn>"
+ <td>Given name (in some Western cultures, also known as the <i>first name</i>)
+ <td>Timothy
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-additional-name title=attr-fe-autocomplete-additional-name><code>additional-name</code></dfn>"
+ <td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
+ <td>John
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-family-name title=attr-fe-autocomplete-family-name><code>family-name</code></dfn>"
+ <td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
+ <td>Berners-Lee
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-honorific-suffix title=attr-fe-autocomplete-honorific-suffix><code>honorific-suffix</code></dfn>"
+ <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
+ <td>OM, KBE, FRS, FREng, FRSA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-nickname title=attr-fe-autocomplete-nickname><code>nickname</code></dfn>"
+ <td>Nickname, screen name, handle: a typically short name used instead of the full name
+ <td>Tim
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-organisation-title title=attr-fe-autocomplete-organisation-title><code>organisation-title</code></dfn>"
+ <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
+ <td>Professor
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-organisation title=attr-fe-autocomplete-organisation><code>organisation</code></dfn>"
+ <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
+ <td>World Wide Web Consortium
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-street-address title=attr-fe-autocomplete-street-address><code>street-address</code></dfn>"
+ <td>Street address (as one line)
+ <td>32 Vassar Street; MIT Room 32-G524
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-address-line1 title=attr-fe-autocomplete-address-line1><code>address-line1</code></dfn>"
+ <td rowspan=3>Street address (as multiple lines)
+ <td>32 Vassar Street
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-address-line2 title=attr-fe-autocomplete-address-line2><code>address-line2</code></dfn>"
+ <td>MIT Room 32-G524
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-address-line3 title=attr-fe-autocomplete-address-line3><code>address-line3</code></dfn>"
+ <td>
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-locality title=attr-fe-autocomplete-locality><code>locality</code></dfn>"
+ <td>City, town, village, or other locality within which the relevant street address is found
+ <td>Cambridge
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-region title=attr-fe-autocomplete-region><code>region</code></dfn>"
+ <td>Provice such as a state, county, or canton within which the locality is found
+ <td>MA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-country title=attr-fe-autocomplete-country><code>country</code></dfn>"
+ <td>Country
+ <td>USA
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-postal-code title=attr-fe-autocomplete-postal-code><code>postal-code</code></dfn>"
+ <td>Postal code, post code, ZIP code
+ <td>02139
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-name title=attr-fe-autocomplete-cc-name><code>cc-name</code></dfn>"
+ <td>Full name as given on the payment instrument
+ <td>Tim Berners-Lee
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-cc-given-name title=attr-fe-autocomplete-cc-given-name><code>cc-given-name</code></dfn>"
+ <td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
+ <td>Tim
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-additional-name title=attr-fe-autocomplete-cc-additional-name><code>cc-additional-name</code></dfn>"
+ <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>
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-family-name title=attr-fe-autocomplete-cc-family-name><code>cc-family-name</code></dfn>"
+ <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>Berners-Lee
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number title=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
+ <td>Code identifying the payment instrument (e.g. the credit card number)
+ <td>4114360123456785 <!-- http://www.auricsystems.com/support-center/sample-credit-card-numbers -->
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-exp title=attr-fe-autocomplete-cc-exp><code>cc-exp</code></dfn>"
+ <td>Expiration date of the payment instrument
+ <td>2014-12
+ <tr><td class=non-rectangular-cell-indentation rowspan=2>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-cc-exp-month title=attr-fe-autocomplete-cc-exp-month><code>cc-exp-month</code></dfn>"
+ <td>Month component of the expiration date of the payment instrument
+ <td>12
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-cc-exp-year title=attr-fe-autocomplete-cc-exp-year><code>cc-exp-year</code></dfn>"
+ <td>Year component of the expiration date of the payment instrument
+ <td>2014
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-csc title=attr-fe-autocomplete-cc-csc><code>cc-csc</code></dfn>"
+ <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>419
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-language title=attr-fe-autocomplete-language><code>language</code></dfn>"
+ <td>Preferred language
+ <td>English
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-bday title=attr-fe-autocomplete-bday><code>bday</code></dfn>"
+ <td>Birthday
+ <td>1955-06-08
+ <tr><td class=non-rectangular-cell-indentation rowspan=3>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-bday-day title=attr-fe-autocomplete-bday-day><code>bday-day</code></dfn>"
+ <td>Day component of birthday
+ <td>8
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-bday-month title=attr-fe-autocomplete-bday-month><code>bday-month</code></dfn>"
+ <td>Month component of birthday
+ <td>June
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-bday-year title=attr-fe-autocomplete-bday-year><code>bday-year</code></dfn>"
+ <td>Year component of birthday
+ <td>1955
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-sex title=attr-fe-autocomplete-sex><code>sex</code></dfn>"
+ <td>Gender identity (e.g. Female, Fa'afafine)
+ <td>Male
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-url title=attr-fe-autocomplete-url><code>url</code></dfn>"
+ <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>http://www.w3.org/People/Berners-Lee/
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-photo title=attr-fe-autocomplete-photo><code>photo</code></dfn>"
+ <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
+ <td>http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
+ <tbody><tr><td colspan=4>"<dfn id=attr-fe-autocomplete-tel title=attr-fe-autocomplete-tel><code>tel</code></dfn>"
+ <td>Full telephone number, including country code
+ <td>+1 617 253 5702
+ <tr><td class=non-rectangular-cell-indentation rowspan=6>
+ <td colspan=3>"<dfn id=attr-fe-autocomplete-tel-country-code title=attr-fe-autocomplete-tel-country-code><code>tel-country-code</code></dfn>"
+ <td>Country code component of the telephone number
+ <td>+1
+ <tr><td colspan=3>"<dfn id=attr-fe-autocomplete-tel-national title=attr-fe-autocomplete-tel-national><code>tel-national</code></dfn>"
+ <td>Telephone number without the county code component
+ <td>617 253 5702
+ <tr><td class=non-rectangular-cell-indentation rowspan=4>
+ <td colspan=2>"<dfn id=attr-fe-autocomplete-tel-area-code title=attr-fe-autocomplete-tel-area-code><code>tel-area-code</code></dfn>"
+ <td>Area code component of the telephone number
+ <td>617
+ <tr><td colspan=2>"<dfn id=attr-fe-autocomplete-tel-local title=attr-fe-autocomplete-tel-local><code>tel-local</code></dfn>"
+ <td>Telephone number without the country code and area code components
+ <td>2535702
+ <tr><td class=non-rectangular-cell-indentation rowspan=2>
+ <td>"<dfn id=attr-fe-autocomplete-tel-local-prefix title=attr-fe-autocomplete-tel-local-prefix><code>tel-local-prefix</code></dfn>"
+ <td>First part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>253
+ <tr><td>"<dfn id=attr-fe-autocomplete-tel-local-suffix title=attr-fe-autocomplete-tel-local-suffix><code>tel-local-suffix</code></dfn>"
+ <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>5702
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-tel-extension title=attr-fe-autocomplete-tel-extension><code>tel-extension</code></dfn>"
+ <td>Telephone number internal extension code
+ <td>1000
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-email title=attr-fe-autocomplete-email><code>email</code></dfn>"
+ <td>E-mail address
+ <td>timbl at w3.org
+ <tr><td colspan=4>"<dfn id=attr-fe-autocomplete-impp title=attr-fe-autocomplete-impp><code>impp</code></dfn>"
+ <td>URL representing an instant messaging protocol endpoint (for example, "<code title="">aim:goim?screenname=example</code>" or <code title="">xmpp:fred at example.net</code>")
+ <td>irc://example.org/timbl,isuser
+ </table><p>If the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute is omitted, the default value corresponding to the state
+ of the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is used
+ instead (either "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" or
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"). If there is no
+ <a href=#form-owner>form owner</a>, then the value "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" is used.</p>
+
<div class=impl>
- <p>Each form control defined to have a <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute has a
- <dfn id=resulting-autocompletion-state>resulting autocompletion state</dfn>, which is either <i title="">automatic</i> or <i title="">off</i>.</p>
+ <p>Each <code><a href=#the-input-element>input</a></code>, <code><a href=#the-select-element>select</a></code>, and
+ <code><a href=#the-textarea-element>textarea</a></code> element has an <dfn id=autofill-hint-set>autofill hint set</dfn>,
+ an <dfn id=autofill-field-name>autofill field name</dfn>, and an <dfn id=idl-exposed-autofill-value>IDL-exposed autofill
+ value</dfn> whose values are defined as the result of running the
+ following algorithm:</p>
- <p>When such a form control is in one of the following conditions,
- its <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">automatic</i>; otherwise, the its <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> is <i title="">off</i>:</p>
+ <ol><li><p>If the element has no <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, then
+ jump to the step labeled <i>default</i>.</li>
- <ul class=brief><li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-automatic-state title=attr-fe-autocomplete-automatic-state>automatic</a>
- state.</li>
+ <li><p>Let <var title="">tokens</var> be the result of <a href=#split-a-string-on-spaces title="split a string on spaces">splitting the attribute's value on
+ spaces</a>.</li>
- <li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state,
- and the element has no <a href=#form-owner>form owner</a>.</li>
+ <li><p>If <var title="">tokens</var> is empty, then jump to the
+ step labeled <i>default</i>.</li>
- <li>Its <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
- attribute is in the <a href=#attr-fe-autocomplete-default-state title=attr-fe-autocomplete-default-state>default</a> state,
- and the element's <a href=#form-owner>form owner</a>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
- the <a href=#attr-form-autocomplete-automatic-state title=attr-form-autocomplete-automatic-state>automatic</a>
- state.</li>
+ <li><p>Let <var title="">index</var> be the index of the last token
+ in <var title="">tokens</var>.</li>
- </ul><p>When a form control's <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
- is <i title="">automatic</i>, the user agent may store the value
- entered or selected by the user so that if the user returns to the
- page, the UA can prefill the form. Otherwise, the user agent should
+ <li>
+
+ <p>If the <var title="">index</var>th token in <var title="">tokens</var> is not an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for one of the tokens given in the
+ first column of the following table, or if the number of tokens in
+ <var title="">tokens</var> is greater than the maximum number
+ given in the cell in the second column of that token's row, then
+ jump to the step labeled <i>default</i>. Otherwise, let <var title="">field</var> be the string given in the cell of the first
+ column of the matching row, and let <var title="">category</var>
+ be the value of the cell in the third column of that same row.</p>
+
+ <table><thead><tr><th>Token
+ <th>Maximum number of tokens
+ <th>Category
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>"
+ <td>1
+ <td>Off
+ <tr><td>"<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>"
+ <td>1
+ <td>Automatic
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-organisation-title><a href=#attr-fe-autocomplete-organisation-title>organisation-title</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-organisation><a href=#attr-fe-autocomplete-organisation>organisation</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-locality><a href=#attr-fe-autocomplete-locality>locality</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-region><a href=#attr-fe-autocomplete-region>region</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
+ <td>3
+ <td>Normal
+ <tr><td>"<code title=attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
+ <td>3
+ <td>Normal
+ <tbody><tr><td>"<code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
+ <td>4
+ <td>Contact
+ <tr><td>"<code title=attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
+ <td>4
+ <td>Contact
+ </table></li>
+
+ <li><p>If <var title="">category</var> is Off, let the element's
+ <a href=#autofill-field-name>autofill field name</a> be the string "<code title="">off</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
+ empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
+ string "<code title="">off</code>". Then, abort these steps.</p>
+
+ <li><p>If <var title="">category</var> is Automatic, let the
+ element's <a href=#autofill-field-name>autofill field name</a> be the string "<code title="">on</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
+ empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
+ string "<code title="">on</code>". Then, abort these steps.</p>
+
+ <li><p>Let <var title="">scope tokens</var> be an empty list.</li>
+
+ <li><p>Let <var title="">hint tokens</var> be an empty set.</li>
+
+ <li><p>Let <var title="">IDL value</var> have the same value as
+ <var title="">field</var>.</li>
+
+ <li><p>If the <var title="">index</var>th token in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li>
+
+ <p>If <var title="">category</var> is Contact and the <var title="">index</var>th token in <var title="">tokens</var> is an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-home><a href=#attr-fe-autocomplete-home>home</a></code>"
+ <li>"<code title=attr-fe-autocomplete-work><a href=#attr-fe-autocomplete-work>work</a></code>"
+ <li>"<code title=attr-fe-autocomplete-mobile><a href=#attr-fe-autocomplete-mobile>mobile</a></code>"
+ <li>"<code title=attr-fe-autocomplete-fax><a href=#attr-fe-autocomplete-fax>fax</a></code>"
+ <li>"<code title=attr-fe-autocomplete-pager><a href=#attr-fe-autocomplete-pager>pager</a></code>"
+ </ul><p>The substeps are:</p>
+
+ <ol><li><p>Let <var title="">contact</var> be the matching
+ string from the list above.</li>
+
+ <li><p>Insert <var title="">contact</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">contact</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point will always be <var title="">field</var>).</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ </ol></li>
+
+ <li>
+
+ <p>If the <var title="">index</var>th token in <var title="">tokens</var> is an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class=brief><li>"<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>"
+ <li>"<code title=attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>"
+ </ul><p>The substeps are:</p>
+
+ <ol><li><p>Let <var title="">mode</var> be the matching
+ string from the list above.</li>
+
+ <li><p>Insert <var title="">mode</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">mode</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point either be <var title="">field</var> or the concatenation of
+ <var title="">contact</var>, a space, and <var title="">field</var>).</li>
+
+ <li><p>Decrement <var title="">index</var> by one.</li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</li>
+
+ </ol></li>
+
+ <li><p>If the <var title="">index</var>th entry in <var title="">tokens</var> is not the first entry, then jump to the step
+ labeled <i>default</i>.</li>
+
+ <li><p>If the first eight characters of the <var title="">index</var>th
+ token in <var title="">tokens</var> are not an <a href=#ascii-case-insensitive>ASCII
+ case-insensitive</a> match for the string "<code title=attr-fe-autocomplete-section>section-</code>", then jump to
+ the step labeled <i>default</i>.</li>
+
+ <li><p>Let <var title="">section</var> be the <var title="">index</var>th token in <var title="">tokens</var>,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li><p>Insert <var title="">section</var> at the start of <var title="">scope tokens</var>.</li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">section</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var>.</li>
+
+ <li><p><i>Done</i>: Let the element's <a href=#autofill-hint-set>autofill hint
+ set</a> be <var title="">hint tokens</var>.</p>
+
+ <li><p>Let the element's <a href=#autofill-field-name>autofill field name</a> be
+ <var title="">field</var>.</p>
+
+ <li><p>Let the element's <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be
+ <var title="">IDL value</var>.</p>
+
+ <li><p>Abort these steps.</li>
+
+ <li><p><i>Default</i>: Let the element's <a href=#idl-exposed-autofill-value>IDL-exposed autofill
+ value</a> be the empty string, and let its <a href=#autofill-hint-set>autofill hint
+ set</a> be empty.</li>
+
+ <li><p>Let <var title="">form</var> be the element's <a href=#form-owner>form
+ owner</a>, if any, or null otherwise.</li>
+
+ <li>
+
+ <p>If <var title="">form</var> is not null and <var title="">form</var>'s <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>autocomplete</a></code> attribute is in
+ the <a href=#attr-form-autocomplete-off-state title=attr-form-autocomplete-off-state>off</a>
+ state, then let the element's <a href=#autofill-field-name>autofill field name</a> be
+ "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>".</p>
+
+ <p>Otherwise, let the element's <a href=#autofill-field-name>autofill field name</a>
+ be "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>".</p>
+
+ </li>
+
+ </ol><p>When an element's <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent should
not remember the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and should not offer past
values to the user.</p>
- <p>In addition, if the <a href=#resulting-autocompletion-state>resulting autocompletion state</a>
- is <i title="">off</i>, <a href=#history-autocomplete>values are
- reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the
- history</a>.</p>
+ <p class=note>In addition, when an element's <a href=#autofill-field-name>autofill field
+ name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>",
+ <a href=#history-autocomplete>values are reset</a> when <a href=#traverse-the-history title="traverse the history">traversing the history</a>.</p>
- <p>The autocompletion mechanism must be implemented by the user
- agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
- where the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>
- (e.g. just after the element has been inserted into the document, or
- when the user agent <a href=#stop-parsing title="stop parsing">stops
- parsing</a>).</p>
-
<div class=example>
<p>Banks frequently do not want UAs to prefill login
@@ -54867,17 +55439,162 @@
</div>
- <p>A user agent may allow the user to override the <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> and set it to always <i title="">on</i>,
- always allowing values to be remembered and prefilled, or always <i title="">off</i>, never remembering values. However, user agents
- should not allow users to trivially override the <a href=#resulting-autocompletion-state>resulting
- autocompletion state</a> to <i title="">on</i>, as there are
- significant security implications for the user if all values are
+ <p>When an element's <a href=#autofill-field-name>autofill field name</a> is
+ <em>not</em> "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>",
+ the user agent may store the control's <a href=#concept-fe-value title=concept-fe-value>value</a>, and may offer previously
+ stored values to the user.</p>
+
+ <p>When the <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>", the user agent should
+ attempt to use heuristics to determine the most appropriate values
+ to offer the user, e.g. based on the element's <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> value, the position of the element
+ in the document's DOM, what other fields exist in the form, and so
+ forth.</p>
+
+ <p>When the <a href=#autofill-field-name>autofill field name</a> is one of the names of
+ the <a href=#autofill-field title="autofill field">autofill fields</a> described
+ above, the user agent should provide suggestions that match the
+ meaning of the field name as given in the table earlier in this
+ section. The <a href=#autofill-hint-set>autofill hint set</a> should be used to select
+ amongst multiple possible suggestions.</p>
+
+ <p class=example>For example, if a user once entered one address
+ into fields that used the "<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>" keyword, and
+ another address into fields that used the "<code title=attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>" keyword, then
+ in subsequent forms only the first address would be suggested for
+ form controls whose <a href=#autofill-hint-set>autofill hint set</a> contains the
+ keyword "<code title=attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code>". Both
+ addresses might be suggested, however, for address-related form
+ controls whose <a href=#autofill-hint-set>autofill hint set</a> does not contain
+ either keyword.</p>
+
+ <p>When the user agent prefills form controls, elements with the
+ same <a href=#form-owner>form owner</a> and the same <a href=#autofill-hint-set>autofill hint
+ set</a> must use data relating to the same person, address,
+ payment instrument, and/or contact details.</p>
+
+ <p class=example>Suppose a user agent knows of two phone numbers,
+ +1 555 123 1234 and +1 555 666 7777. It would not be conforming for
+ the user agent to fill a field with <code title="">autocomplete="shipping tel-local-prefix"</code> with the
+ value "123" and another field in the same form with <code title="">autocomplete="shipping tel-local-suffix"</code> with the
+ value "7777". The only valid pefilled values given the
+ aforementioned information would be "123" and "1234", or "666" and
+ "7777", respectively.</p>
+
+ <p class=example>Similarly, if a form for some reason contained
+ both a "<code title=attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
+ field and a "<code title=attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
+ field, and the user agent prefilled the form, then the month
+ component of the former would have to match the latter.</p>
+
+ <p>The autocompletion mechanism must be implemented by the user
+ agent acting as if the user had modified the element's <a href=#concept-fe-value title=concept-fe-value>value</a>, and must be done at a time
+ where the element is <i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i> (e.g.
+ just after the element has been inserted into the document, or when
+ the user agent <a href=#stop-parsing title="stop parsing">stops parsing</a>).
+ User agents must only prefill controls using values that the user
+ could have entered.</p>
+
+ <p class=example>For example, if a <code><a href=#the-select-element>select</a></code> element
+ only has <code><a href=#the-option-element>option</a></code> elements with values "Steve" and
+ "Rebecca", "Jay", and "Bob", and has an <a href=#autofill-field-name>autofill field
+ name</a> "<code title=attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>", but the
+ user agent's only idea for what to prefill the field with is "Evan",
+ then the user agent cannot prefill the field. It would not be
+ conforming to somehow set the <code><a href=#the-select-element>select</a></code> element to the
+ value "Evan", since the user could not have done so themselves.</p>
+
+ <p>A user agent prefilling a form control's <a href=#concept-fe-value title=concept-fe-value>value</a> must not cause that control to
+ <a href=#suffering-from-a-type-mismatch title="suffering from a type mismatch">suffer from a type
+ mismatch</a>, <a href=#suffering-from-a-pattern-mismatch title="suffering from a pattern
+ mismatch">suffer from a pattern mismatch</a>, <a href=#suffering-from-being-too-long title="suffering from being too long">suffer from being too
+ long</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
+ an underflow</a>, <a href=#suffering-from-an-overflow title="suffering from an overflow">suffer
+ from an overflow</a>, or <a href=#suffering-from-a-step-mismatch title="suffering from a step
+ mismatch">suffer from a step mismatch</a>. Where possible, user
+ agents should use heuristics to attempt to convert values so that
+ they can be used.</p>
+
+ <div class=example>
+
+ <p>For example, if the user agent knows that the user's middle name
+ is "Ines", and attempts to prefill a form control that looks like this:</p>
+
+ <pre><input name=middle-initial maxlength=1 autocomplete="additional-name"></pre>
+
+ <p>...then the user agent could convert "Ines" to "I" and prefill
+ it that way.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>A more elaborate example would be with month values. If the user
+ agent knows that the user's birthday is the 27th of July 2012, then
+ it might try to prefill all of the following controls with slightly
+ different values, all driven from this information:</p>
+
+ <table><tr><td>
+ <pre><input name=b type=month autocomplete="bday"></pre>
+ <td>
+ 2012-07
+ <td>
+ The day is dropped since the <a href="#month-state-(type=month)" title=attr-input-type-month>Month</a> state only accepts a
+ month/year combination.
+ <tr><td>
+ <pre><select name=c>
+ <option>Jan
+ <option>Feb
+ <em>...</em>
+ <option>Jul
+ <option>Aug
+ <em>...</em>
+</select></pre>
+ <td>
+ July
+ <td>
+ The user agent picks the month from the listed options, either
+ by noticing there are twelve options and picking the 7th, or by
+ recognising that one of the strings (three characters "Jul"
+ followed by a newline and a space) is a close match for the name
+ of the month (July) in one of the user agent's supported
+ languages, or through some other similar mechanism.
+ <tr><td>
+ <pre><input name=a type=number min=1 max=12 autocomplete="bday-month"></pre>
+ <td>
+ 7
+ <td>
+ User agent converts "July" to a month number in the range 1..12, like the field.
+ <tr><td>
+ <pre><input name=a type=number min=0 max=11 autocomplete="bday-month"></pre>
+ <td>
+ 6
+ <td>
+ User agent converts "July" to a month number in the range 0..11, like the field.
+ <tr><td>
+ <pre><input name=a type=number min=1 max=11 autocomplete="bday-month"></pre>
+ <td>
+ <td>
+ User agent doesn't fill in the field, since it can't make a good guess as to what the form expects.
+ </table></div>
+
+ <p>A user agent may allow the user to override an element's
+ <a href=#autofill-field-name>autofill field name</a>, e.g. to change it from "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" to allow values to be
+ remembered and prefilled despite the page author's objections, or to
+ always "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", never
+ remembering values. However, user agents should not allow users to
+ trivially override the <a href=#autofill-field-name>autofill field name</a> from "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code title=attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>" or other values, as there
+ are significant security implications for the user if all values are
always remembered, regardless of the site's preferences.</p>
+ <p>The <dfn id=dom-fe-autocomplete title=dom-fe-autocomplete><code>autocomplete</code></dfn> IDL
+ attribute, on getting, must return the element's <a href=#idl-exposed-autofill-value>IDL-exposed
+ autofill value</a>, and on setting, must <a href=#reflect>reflect</a> the
+ content attribute of the same name.</p>
+
</div>
+
<!--TOPIC:DOM APIs-->
<h4 id=textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</h4>
@@ -69698,7 +70415,7 @@
<li id=history-autocomplete><p>If the <var title="">specified
entry</var>'s <code><a href=#document>Document</a></code> has any form controls whose
- <a href=#resulting-autocompletion-state>resulting autocompletion state</a> is <i title="">off</i>, invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
+ <a href=#autofill-field-name>autofill field name</a> is "<code title=attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", invoke the <a href=#concept-form-reset-control title=concept-form-reset-control>reset algorithm</a> of each
of those elements.</li>
<li><p>If the <a href=#current-document-readiness>current document readiness</a> of the <var title="">specified entry</var>'s <code><a href=#document>Document</a></code> is
@@ -101736,10 +102453,15 @@
<td> Execute script asynchronously
<td> <a href=#boolean-attribute>Boolean attribute</a>
<tr><th> <code title="">autocomplete</code>
- <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>;
- <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>input</a></code>
- <td> Prevent the user agent from providing autocompletions for the form control(s)
+ <td> <code title=attr-form-autocomplete><a href=#attr-form-autocomplete>form</a></code>
+ <td> Default setting for autofill feature for controls in the form
<td> "<code title="">on</code>"; "<code title="">off</code>"
+ <tr><th> <code title="">autocomplete</code>
+ <td> <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>input</a></code>;
+ <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>select</a></code>;
+ <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>textarea</a></code>
+ <td> Hint for form autofill feature
+ <td> <a href=#autofill-field title="autofill field">Autofill field</a> name and related tokens*
<tr><th> <code title="">autofocus</code>
<td> <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>button</a></code>;
<code title=attr-fe-autofocus><a href=#attr-fe-autofocus>input</a></code>;
Modified: source
===================================================================
--- source 2012-07-27 18:57:45 UTC (rev 7221)
+++ source 2012-08-01 23:38:11 UTC (rev 7222)
@@ -52804,19 +52804,19 @@
attribute is an <span>enumerated attribute</span>. The attribute has
two states. The <code title="attr-form-autocomplete-on">on</code>
keyword maps to the <dfn
- title="attr-form-autocomplete-automatic-state">on</dfn> state, and the
+ title="attr-form-autocomplete-on-state">on</dfn> state, and the
<code title="attr-form-autocomplete-off">off</code> keyword maps to
the <dfn title="attr-form-autocomplete-off-state">off</dfn> state.
The attribute may also be omitted. The <i>missing value default</i>
- is the <span title="attr-form-autocomplete-automatic-state">on</span>
+ is the <span title="attr-form-autocomplete-on-state">on</span>
state. The <span title="attr-form-autocomplete-off-state">off</span>
state indicates that by default, form controls in the form will have
- their <span>resulting autocompletion state</span> set to <i
- title="">off</i>; the <span
- title="attr-form-autocomplete-automatic-state">on</span> state indicates
+ their <span>autofill field name</span> set to "<code
+ title="attr-fe-autocomplete-off">off</code>"; the <span
+ title="attr-form-autocomplete-on-state">on</span> state indicates
that by default, form controls in the form will have their
- <span>resulting autocompletion state</span> set to <i
- title="">automatic</i>.</p>
+ <span>autofill field name</span> set to "<code
+ title="attr-fe-autocomplete-on">on</code>".</p>
<p>The <code title="attr-fs-action">action</code>, <code
title="attr-fs-enctype">enctype</code>, <code
@@ -53562,7 +53562,7 @@
<pre class="idl">interface <dfn>HTMLInputElement</dfn> : <span>HTMLElement</span> {
attribute DOMString <span title="dom-input-accept">accept</span>;
attribute DOMString <span title="dom-input-alt">alt</span>;
- attribute DOMString <span title="dom-input-autocomplete">autocomplete</span>;
+ attribute DOMString <span title="dom-fe-autocomplete">autocomplete</span>;
attribute boolean <span title="dom-fe-autofocus">autofocus</span>;
attribute boolean <span title="dom-input-defaultChecked">defaultChecked</span>;
attribute boolean <span title="dom-input-checked">checked</span>;
@@ -55122,12 +55122,10 @@
IDL attribute must <span>reflect</span> the <code
title="attr-input-value">value</code> content attribute.</p>
- <p>The <dfn
- title="dom-input-autocomplete"><code>autocomplete</code></dfn> and
- <dfn title="dom-input-type"><code>type</code></dfn> IDL attributes
- must <span>reflect</span> the respective content attributes of the
- same name, <span>limited to only known values</span>. The <dfn
- title="dom-input-inputmode"><code>inputMode</code></dfn> IDL
+ <p>The <dfn title="dom-input-type"><code>type</code></dfn> IDL
+ attribute must <span>reflect</span> the respective content attribute
+ of the same name, <span>limited to only known values</span>. The
+ <dfn title="dom-input-inputmode"><code>inputMode</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-fe-inputmode">inputmode</code> content attribute,
<span>limited to only known values</span>. The <dfn
@@ -61438,6 +61436,7 @@
<dd><span title="text content">Text</span>.</dd>
<dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
+ <dd><code title="attr-fe-autocomplete">autocomplete</code></dd>
<dd><code title="attr-fe-autofocus">autofocus</code></dd>
<dd><code title="attr-textarea-cols">cols</code></dd>
<dd><code title="attr-fe-dirname">dirname</code></dd>
@@ -61454,6 +61453,7 @@
<dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class="idl">interface <dfn>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
+ attribute DOMString <span title="dom-fe-autocomplete">autocomplete</span>;
attribute boolean <span title="dom-fe-autofocus">autofocus</span>;
attribute unsigned long <span title="dom-textarea-cols">cols</span>;
attribute DOMString <span title="dom-textarea-dirName">dirName</span>;
@@ -61795,6 +61795,7 @@
The <code title="attr-fae-form">form</code> attribute is used to explicitly associate the <code>textarea</code> element with its <span>form owner</span>.
The <code title="attr-fe-autofocus">autofocus</code> attribute controls focus.
The <code title="attr-fe-inputmode">inputmode</code> attribute controls the user interface's input modality for the control.
+ The <code title="attr-fe-autocomplete">autocomplete</code> attribute controls how the user agent provides autofill behavior.
</p>
<!--TOPIC:DOM APIs-->
@@ -63936,22 +63937,172 @@
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
- input.</p>
-
- <p>The <dfn
+ input. The <dfn
title="attr-fe-autocomplete"><code>autocomplete</code></dfn> content
- attribute is an <span>enumerated attribute</span>. The attribute has
- three states. The <code title="attr-fe-autocomplete-on">on</code>
- keyword maps to the <dfn
- title="attr-fe-autocomplete-automatic-state">automatic</dfn> state,
- and the <code title="attr-fe-autocomplete-off">off</code> keyword
- maps to the <dfn title="attr-fe-autocomplete-off-state">off</dfn>
- state. The attribute may also be omitted. The <i>missing value
- default</i> is the <dfn
- title="attr-fe-autocomplete-default-state">default</dfn> state.</p>
+ attribute can be used to hint to the user agent how to, or indeed
+ whether to, provide such a feature.</p>
- <p>The <span title="attr-fe-autocomplete-off-state">off</span>
- state indicates either that the control's input data is particularly
+ <p>The attribute, if present, must have a value that is a <span>set
+ of space-separated tokens</span> consisting of either a single token
+ that is an <span>ASCII case-insensitive</span> match for the string
+ "<code title="attr-fe-autocomplete-off">off</code>", or a single
+ token that is an <span>ASCII case-insensitive</span> match for the
+ string "<code title="attr-fe-autocomplete-on">on</code>", or the
+ following, in the order given below:</p>
+
+ <ol>
+
+ <li>
+
+ <p>Optionally, a token whose first eight characters are an
+ <span>ASCII case-insensitive</span> match for the string "<code
+ title="attr-fe-autocomplete-section">section-</code>", meaning
+ that the field belongs to the named group.</p>
+
+ <div class="note">
+
+ <p>For example, if there are two shipping addresses in the form,
+ then they could be marked up as:</p>
+
+ <pre><fieldset>
+ <legend>Ship the blue gift to...</legend>
+ <p> <label> Address: <input name=ba autocomplete="section-blue shipping street-address"> </label>
+ <p> <label> City: <input name=bc autocomplete="section-blue shipping region"> </label>
+ <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
+</fieldset>
+<fieldset>
+ <legend>Ship the red gift to...</legend>
+ <p> <label> Address: <input name=ra autocomplete="section-red shipping street-address"> </label>
+ <p> <label> City: <input name=rc autocomplete="section-red shipping region"> </label>
+ <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping country"> </label>
+</fieldset></pre>
+
+ </div>
+
+ </li>
+
+ <li>
+
+ <p>Optionally, a token that is an <span>ASCII
+ case-insensitive</span> match for one of the following
+ strings:</p>
+
+ <ul class="brief">
+ <li>"<dfn title="attr-fe-autocomplete-shipping"><code>shipping</code></dfn>", meaning the field is part of the shipping address or contact information
+ <li>"<dfn title="attr-fe-autocomplete-billing"><code>billing</code></dfn>", meaning the field is part of the billing address or contact information
+ </ul>
+
+ </li>
+
+ <li>
+
+ <p>Either of the following two options:</p>
+
+ <ul>
+
+ <li>
+
+ <p>A token that is an <span>ASCII case-insensitive</span> match
+ for one of the following <span>autofill field</span> strings:</p>
+
+ <ul class="brief">
+ <li>"<code title="attr-fe-autocomplete-name">name</code>"
+ <li>"<code title="attr-fe-autocomplete-honorific-prefix">honorific-prefix</code>"
+ <li>"<code title="attr-fe-autocomplete-given-name">given-name</code>"
+ <li>"<code title="attr-fe-autocomplete-additional-name">additional-name</code>"
+ <li>"<code title="attr-fe-autocomplete-family-name">family-name</code>"
+ <li>"<code title="attr-fe-autocomplete-honorific-suffix">honorific-suffix</code>"
+ <li>"<code title="attr-fe-autocomplete-nickname">nickname</code>"
+ <li>"<code title="attr-fe-autocomplete-organisation-title">organisation-title</code>"
+ <li>"<code title="attr-fe-autocomplete-organisation">organisation</code>"
+ <li>"<code title="attr-fe-autocomplete-street-address">street-address</code>"
+ <li>"<code title="attr-fe-autocomplete-address-line1">address-line1</code>"
+ <li>"<code title="attr-fe-autocomplete-address-line2">address-line2</code>"
+ <li>"<code title="attr-fe-autocomplete-address-line3">address-line3</code>"
+ <li>"<code title="attr-fe-autocomplete-locality">locality</code>"
+ <li>"<code title="attr-fe-autocomplete-region">region</code>"
+ <li>"<code title="attr-fe-autocomplete-country">country</code>"
+ <li>"<code title="attr-fe-autocomplete-postal-code">postal-code</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-name">cc-name</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-given-name">cc-given-name</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-additional-name">cc-additional-name</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-family-name">cc-family-name</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-number">cc-number</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-exp">cc-exp</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-exp-month">cc-exp-month</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-exp-year">cc-exp-year</code>"
+ <li>"<code title="attr-fe-autocomplete-cc-csc">cc-csc</code>"
+ <li>"<code title="attr-fe-autocomplete-language">language</code>"
+ <li>"<code title="attr-fe-autocomplete-bday">bday</code>"
+ <li>"<code title="attr-fe-autocomplete-bday-day">bday-day</code>"
+ <li>"<code title="attr-fe-autocomplete-bday-month">bday-month</code>"
+ <li>"<code title="attr-fe-autocomplete-bday-year">bday-year</code>"
+ <li>"<code title="attr-fe-autocomplete-sex">sex</code>"
+ <li>"<code title="attr-fe-autocomplete-url">url</code>"
+ <li>"<code title="attr-fe-autocomplete-photo">photo</code>"
+ </ul>
+
+ <p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ <li>
+
+ <p>The following, in the given order:</p>
+
+ <ol>
+
+ <li>
+
+ <p>Optionally, a token that is an <span>ASCII
+ case-insensitive</span> match for one of the following
+ strings:</p>
+
+ <ul class="brief">
+ <li>"<dfn title="attr-fe-autocomplete-home"><code>home</code></dfn>", meaning the field is for contacting someone at their residence
+ <li>"<dfn title="attr-fe-autocomplete-work"><code>work</code></dfn>", meaning the field is for contacting someone at their workplace
+ <li>"<dfn title="attr-fe-autocomplete-mobile"><code>mobile</code></dfn>"<!-- or "cell"? -->, meaning the field is for contacting someone regardless of location
+ <li>"<dfn title="attr-fe-autocomplete-fax"><code>fax</code></dfn>", meaning the field describes a fax machine's contact details
+ <li>"<dfn title="attr-fe-autocomplete-pager"><code>pager</code></dfn>", meaning the field describes a pager's or beeper's contact details
+ </ul>
+
+ </li>
+
+ <li>
+
+ <p>A token that is an <span>ASCII case-insensitive</span> match
+ for one of the following <span>autofill field</span> strings:</p>
+
+ <ul class="brief">
+ <li>"<code title="attr-fe-autocomplete-tel">tel</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-country-code">tel-country-code</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-national">tel-national</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-area-code">tel-area-code</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-local">tel-local</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-local-prefix">tel-local-prefix</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-local-suffix">tel-local-suffix</code>"
+ <li>"<code title="attr-fe-autocomplete-tel-extension">tel-extension</code>"
+ <li>"<code title="attr-fe-autocomplete-email">email</code>"
+ <li>"<code title="attr-fe-autocomplete-impp">impp</code>"
+ </ul>
+
+ <p>(See the table below for descriptions of these values.)</p>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ </ul>
+
+ </li>
+
+ </ol>
+
+ <p>The "<dfn
+ title="attr-fe-autocomplete-off"><code>off</code></dfn>" keyword
+ indicates either that the control's input data is particularly
sensitive (for example the activation code for a nuclear weapon); or
that it is a value that will never be reused (for example a
one-time-key for a bank login) and the user will therefore have to
@@ -63960,77 +64111,654 @@
provides its own autocomplete mechanism and does not want the user
agent to provide autocompletion values.</p>
- <p>Conversely, the <span
- title="attr-fe-autocomplete-automatic-state">automatic</span> state
- indicates that the value is not particularly sensitive and the user
- can expect to be able to rely on his user agent to remember values
- he has entered for that control.</p>
+ <p>The "<dfn title="attr-fe-autocomplete-on"><code>on</code></dfn>"
+ keyword indicates that the user agent is allowed to provide the user
+ with autocompletion values, but does not provide any further
+ information about what kind of data the user might be expected to
+ enter. User agents would have to use heuristics to decide what
+ autocompletion values to suggest.</p>
- <p>The <span
- title="attr-fe-autocomplete-default-state">default</span> state
- indicates that the user agent is to use the <code
- title="attr-form-autocomplete">autocomplete</code> attribute on the
- element's <span>form owner</span> instead. (By default, the <code
- title="attr-form-autocomplete">autocomplete</code> attribute of
- <code>form</code> elements is in the <span
- title="attr-form-autocomplete-automatic-state">on</span> state.)</p>
+ <p>The <dfn title="autofill field">autofill fields</dfn> names
+ listed above indicate that the user agent is allowed to provide the
+ user with autocompletion values, and specifies what kind of value is
+ expected. The keywords relate to each other as described in the
+ table below. Each field name listed on a row of this table
+ corresponds to the meaning given in the cell for that row in the
+ column labeled "Meaning". Some fields correspond to subparts of
+ other fields; for example, a credit card expiry date can be
+ expressed as one field giving both the month and year of expiry
+ ("<code title="attr-fe-autocomplete-cc-exp">cc-exp</code>"), or as
+ two fields, one giving the month ("<code
+ title="attr-fe-autocomplete-cc-exp-month">cc-exp-month</code>") and
+ one the year ("<code
+ title="attr-fe-autocomplete-cc-exp-year">cc-exp-year</code>"). In
+ such cases, the names of the broader fields cover multiple rows, in
+ which the narrower fields are defined.</p>
+ <p class="note">Generally, authors are encouraged to use the broader
+ fields rather than the narrower fields, as the narrower fields tend
+ to expose Western biases. For example, while it is common in some
+ Western cultures to have a given name and a family name, in that
+ order (and thus often referred to as a <i>first name</i> and a
+ <i>surname</i>), many cultures put the family name first and the
+ given name second, and many others simply have one name (a
+ <i>mononym</i>). Having a single field is therefore more
+ flexible.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th colspan=4> Field name
+ <th> Meaning
+ <th> Example
+ <tbody>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-name"><code>name</code></dfn>"
+ <td>Full name
+ <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
+ <tr>
+ <td rowspan=5 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-honorific-prefix"><code>honorific-prefix</code></dfn>"
+ <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang="fr" title="">M<sup>lle</sup></span>")
+ <td>Sir
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-given-name"><code>given-name</code></dfn>"
+ <td>Given name (in some Western cultures, also known as the <i>first name</i>)
+ <td>Timothy
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-additional-name"><code>additional-name</code></dfn>"
+ <td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
+ <td>John
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-family-name"><code>family-name</code></dfn>"
+ <td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
+ <td>Berners-Lee
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-honorific-suffix"><code>honorific-suffix</code></dfn>"
+ <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
+ <td>OM, KBE, FRS, FREng, FRSA
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-nickname"><code>nickname</code></dfn>"
+ <td>Nickname, screen name, handle: a typically short name used instead of the full name
+ <td>Tim
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-organisation-title"><code>organisation-title</code></dfn>"
+ <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
+ <td>Professor
+ <tbody>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-organisation"><code>organisation</code></dfn>"
+ <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
+ <td>World Wide Web Consortium
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-street-address"><code>street-address</code></dfn>"
+ <td>Street address (as one line)
+ <td>32 Vassar Street; MIT Room 32-G524
+ <tr>
+ <td rowspan=3 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-address-line1"><code>address-line1</code></dfn>"
+ <td rowspan=3>Street address (as multiple lines)
+ <td>32 Vassar Street
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-address-line2"><code>address-line2</code></dfn>"
+ <td>MIT Room 32-G524
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-address-line3"><code>address-line3</code></dfn>"
+ <td>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-locality"><code>locality</code></dfn>"
+ <td>City, town, village, or other locality within which the relevant street address is found
+ <td>Cambridge
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-region"><code>region</code></dfn>"
+ <td>Provice such as a state, county, or canton within which the locality is found
+ <td>MA
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-country"><code>country</code></dfn>"
+ <td>Country
+ <td>USA
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-postal-code"><code>postal-code</code></dfn>"
+ <td>Postal code, post code, ZIP code
+ <td>02139
+ <tbody>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-cc-name"><code>cc-name</code></dfn>"
+ <td>Full name as given on the payment instrument
+ <td>Tim Berners-Lee
+ <tr>
+ <td rowspan=3 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-cc-given-name"><code>cc-given-name</code></dfn>"
+ <td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
+ <td>Tim
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-cc-additional-name"><code>cc-additional-name</code></dfn>"
+ <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>
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-cc-family-name"><code>cc-family-name</code></dfn>"
+ <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>Berners-Lee
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-cc-number"><code>cc-number</code></dfn>"
+ <td>Code identifying the payment instrument (e.g. the credit card number)
+ <td>4114360123456785 <!-- http://www.auricsystems.com/support-center/sample-credit-card-numbers -->
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-cc-exp"><code>cc-exp</code></dfn>"
+ <td>Expiration date of the payment instrument
+ <td>2014-12
+ <tr>
+ <td rowspan=2 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-cc-exp-month"><code>cc-exp-month</code></dfn>"
+ <td>Month component of the expiration date of the payment instrument
+ <td>12
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-cc-exp-year"><code>cc-exp-year</code></dfn>"
+ <td>Year component of the expiration date of the payment instrument
+ <td>2014
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-cc-csc"><code>cc-csc</code></dfn>"
+ <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>419
+ <tbody>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-language"><code>language</code></dfn>"
+ <td>Preferred language
+ <td>English
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-bday"><code>bday</code></dfn>"
+ <td>Birthday
+ <td>1955-06-08
+ <tr>
+ <td rowspan=3 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-bday-day"><code>bday-day</code></dfn>"
+ <td>Day component of birthday
+ <td>8
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-bday-month"><code>bday-month</code></dfn>"
+ <td>Month component of birthday
+ <td>June
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-bday-year"><code>bday-year</code></dfn>"
+ <td>Year component of birthday
+ <td>1955
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-sex"><code>sex</code></dfn>"
+ <td>Gender identity (e.g. Female, Fa'afafine)
+ <td>Male
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-url"><code>url</code></dfn>"
+ <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>http://www.w3.org/People/Berners-Lee/
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-photo"><code>photo</code></dfn>"
+ <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
+ <td>http://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
+ <tbody>
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-tel"><code>tel</code></dfn>"
+ <td>Full telephone number, including country code
+ <td>+1 617 253 5702
+ <tr>
+ <td rowspan=6 class="non-rectangular-cell-indentation">
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-tel-country-code"><code>tel-country-code</code></dfn>"
+ <td>Country code component of the telephone number
+ <td>+1
+ <tr>
+ <td colspan=3>"<dfn title="attr-fe-autocomplete-tel-national"><code>tel-national</code></dfn>"
+ <td>Telephone number without the county code component
+ <td>617 253 5702
+ <tr>
+ <td rowspan=4 class="non-rectangular-cell-indentation">
+ <td colspan=2>"<dfn title="attr-fe-autocomplete-tel-area-code"><code>tel-area-code</code></dfn>"
+ <td>Area code component of the telephone number
+ <td>617
+ <tr>
+ <td colspan=2>"<dfn title="attr-fe-autocomplete-tel-local"><code>tel-local</code></dfn>"
+ <td>Telephone number without the country code and area code components
+ <td>2535702
+ <tr>
+ <td rowspan=2 class="non-rectangular-cell-indentation">
+ <td>"<dfn title="attr-fe-autocomplete-tel-local-prefix"><code>tel-local-prefix</code></dfn>"
+ <td>First part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>253
+ <tr>
+ <td>"<dfn title="attr-fe-autocomplete-tel-local-suffix"><code>tel-local-suffix</code></dfn>"
+ <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
+ <td>5702
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-tel-extension"><code>tel-extension</code></dfn>"
+ <td>Telephone number internal extension code
+ <td>1000
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-email"><code>email</code></dfn>"
+ <td>E-mail address
+ <td>timbl at w3.org
+ <tr>
+ <td colspan=4>"<dfn title="attr-fe-autocomplete-impp"><code>impp</code></dfn>"
+ <td>URL representing an instant messaging protocol endpoint (for example, "<code title="">aim:goim?screenname=example</code>" or <code title="">xmpp:fred at example.net</code>")
+ <td>irc://example.org/timbl,isuser
+ </table>
+
+ <p>If the <code title="attr-fe-autocomplete">autocomplete</code>
+ attribute is omitted, the default value corresponding to the state
+ of the element's <span>form owner</span>'s <code
+ title="attr-form-autocomplete">autocomplete</code> attribute is used
+ instead (either "<code title="attr-fe-autocomplete-on">on</code>" or
+ "<code title="attr-fe-autocomplete-off">off</code>"). If there is no
+ <span>form owner</span>, then the value "<code
+ title="attr-fe-autocomplete-on">on</code>" is used.</p>
+
<div class="impl">
- <p>Each form control defined to have a <code
- title="attr-fe-autocomplete">autocomplete</code> attribute has a
- <dfn>resulting autocompletion state</dfn>, which is either <i
- title="">automatic</i> or <i title="">off</i>.</p>
+ <p>Each <code>input</code>, <code>select</code>, and
+ <code>textarea</code> element has an <dfn>autofill hint set</dfn>,
+ an <dfn>autofill field name</dfn>, and an <dfn>IDL-exposed autofill
+ value</dfn> whose values are defined as the result of running the
+ following algorithm:</p>
- <p>When such a form control is in one of the following conditions,
- its <span>resulting autocompletion state</span> is <i
- title="">automatic</i>; otherwise, the its <span>resulting
- autocompletion state</span> is <i title="">off</i>:</p>
+ <ol>
- <ul class="brief">
+ <li><p>If the element has no <code
+ title="attr-fe-autocomplete">autocomplete</code> attribute, then
+ jump to the step labeled <i>default</i>.</p></li>
- <li>Its <code title="attr-fe-autocomplete">autocomplete</code>
- attribute is in the <span
- title="attr-fe-autocomplete-automatic-state">automatic</span>
- state.</li>
+ <li><p>Let <var title="">tokens</var> be the result of <span
+ title="split a string on spaces">splitting the attribute's value on
+ spaces</span>.</p></li>
- <li>Its <code title="attr-fe-autocomplete">autocomplete</code>
- attribute is in the <span
- title="attr-fe-autocomplete-default-state">default</span> state,
- and the element has no <span>form owner</span>.</li>
+ <li><p>If <var title="">tokens</var> is empty, then jump to the
+ step labeled <i>default</i>.</p></li>
- <li>Its <code title="attr-fe-autocomplete">autocomplete</code>
- attribute is in the <span
- title="attr-fe-autocomplete-default-state">default</span> state,
- and the element's <span>form owner</span>'s <code
- title="attr-form-autocomplete">autocomplete</code> attribute is in
- the <span
- title="attr-form-autocomplete-automatic-state">automatic</span>
- state.</li>
+ <li><p>Let <var title="">index</var> be the index of the last token
+ in <var title="">tokens</var>.</p></li>
- </ul>
+ <li>
- <p>When a form control's <span>resulting autocompletion state</span>
- is <i title="">automatic</i>, the user agent may store the value
- entered or selected by the user so that if the user returns to the
- page, the UA can prefill the form. Otherwise, the user agent should
+ <p>If the <var title="">index</var>th token in <var
+ title="">tokens</var> is not an <span>ASCII
+ case-insensitive</span> match for one of the tokens given in the
+ first column of the following table, or if the number of tokens in
+ <var title="">tokens</var> is greater than the maximum number
+ given in the cell in the second column of that token's row, then
+ jump to the step labeled <i>default</i>. Otherwise, let <var
+ title="">field</var> be the string given in the cell of the first
+ column of the matching row, and let <var title="">category</var>
+ be the value of the cell in the third column of that same row.</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Token
+ <th>Maximum number of tokens
+ <th>Category
+ <tbody>
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-off">off</code>"
+ <td>1
+ <td>Off
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-on">on</code>"
+ <td>1
+ <td>Automatic
+ <tbody>
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-name">name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-honorific-prefix">honorific-prefix</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-given-name">given-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-additional-name">additional-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-family-name">family-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-honorific-suffix">honorific-suffix</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-nickname">nickname</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-organisation-title">organisation-title</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-organisation">organisation</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-street-address">street-address</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-address-line1">address-line1</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-address-line2">address-line2</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-address-line3">address-line3</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-locality">locality</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-region">region</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-country">country</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-postal-code">postal-code</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-name">cc-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-given-name">cc-given-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-additional-name">cc-additional-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-family-name">cc-family-name</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-number">cc-number</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-exp">cc-exp</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-exp-month">cc-exp-month</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-exp-year">cc-exp-year</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-cc-csc">cc-csc</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-language">language</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-bday">bday</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-bday-day">bday-day</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-bday-month">bday-month</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-bday-year">bday-year</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-sex">sex</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-url">url</code>"
+ <td>3
+ <td>Normal
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-photo">photo</code>"
+ <td>3
+ <td>Normal
+ <tbody>
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel">tel</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-country-code">tel-country-code</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-national">tel-national</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-area-code">tel-area-code</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-local">tel-local</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-local-prefix">tel-local-prefix</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-local-suffix">tel-local-suffix</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-tel-extension">tel-extension</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-email">email</code>"
+ <td>4
+ <td>Contact
+ <tr>
+ <td>"<code title="attr-fe-autocomplete-impp">impp</code>"
+ <td>4
+ <td>Contact
+ </table>
+
+ </li>
+
+ <li><p>If <var title="">category</var> is Off, let the element's
+ <span>autofill field name</span> be the string "<code
+ title="">off</code>", let its <span>autofill hint set</span> be
+ empty, and let its <span>IDL-exposed autofill value</span> be the
+ string "<code title="">off</code>". Then, abort these steps.</p>
+
+ <li><p>If <var title="">category</var> is Automatic, let the
+ element's <span>autofill field name</span> be the string "<code
+ title="">on</code>", let its <span>autofill hint set</span> be
+ empty, and let its <span>IDL-exposed autofill value</span> be the
+ string "<code title="">on</code>". Then, abort these steps.</p>
+
+ <li><p>Let <var title="">scope tokens</var> be an empty list.</p></li>
+
+ <li><p>Let <var title="">hint tokens</var> be an empty set.</p></li>
+
+ <li><p>Let <var title="">IDL value</var> have the same value as
+ <var title="">field</var>.</p></li>
+
+ <li><p>If the <var title="">index</var>th token in <var
+ title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</p></li>
+
+ <li><p>Decrement <var title="">index</var> by one.</p></li>
+
+ <li>
+
+ <p>If <var title="">category</var> is Contact and the <var
+ title="">index</var>th token in <var title="">tokens</var> is an
+ <span>ASCII case-insensitive</span> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class="brief">
+ <li>"<code title="attr-fe-autocomplete-home">home</code>"
+ <li>"<code title="attr-fe-autocomplete-work">work</code>"
+ <li>"<code title="attr-fe-autocomplete-mobile">mobile</code>"
+ <li>"<code title="attr-fe-autocomplete-fax">fax</code>"
+ <li>"<code title="attr-fe-autocomplete-pager">pager</code>"
+ </ul>
+
+ <p>The substeps are:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">contact</var> be the matching
+ string from the list above.</p></li>
+
+ <li><p>Insert <var title="">contact</var> at the start of <var
+ title="">scope tokens</var>.</p></li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</p></li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">contact</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point will always be <var title="">field</var>).</p></li>
+
+ <li><p>Decrement <var title="">index</var> by one.</p></li>
+
+ <li><p>If the <var title="">index</var>th entry in <var
+ title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</p></li>
+
+ </ol>
+
+ </li>
+
+ <li>
+
+ <p>If the <var
+ title="">index</var>th token in <var title="">tokens</var> is an
+ <span>ASCII case-insensitive</span> match for one of the strings
+ in the following list, then run the substeps that follow:</p>
+
+ <ul class="brief">
+ <li>"<code title="attr-fe-autocomplete-shipping">shipping</code>"
+ <li>"<code title="attr-fe-autocomplete-billing">billing</code>"
+ </ul>
+
+ <p>The substeps are:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">mode</var> be the matching
+ string from the list above.</p></li>
+
+ <li><p>Insert <var title="">mode</var> at the start of <var
+ title="">scope tokens</var>.</p></li>
+
+ <li><p>Add <var title="">contact</var> to <var title="">hint
+ set</var>.</p></li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">mode</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var> (which at this
+ point either be <var title="">field</var> or the concatenation of
+ <var title="">contact</var>, a space, and <var
+ title="">field</var>).</p></li>
+
+ <li><p>Decrement <var title="">index</var> by one.</p></li>
+
+ <li><p>If the <var title="">index</var>th entry in <var
+ title="">tokens</var> is the first entry, then skip to the step
+ labeled <i>done</i>.</p></li>
+
+ </ol>
+
+ </li>
+
+ <li><p>If the <var title="">index</var>th entry in <var
+ title="">tokens</var> is not the first entry, then jump to the step
+ labeled <i>default</i>.</p></li>
+
+ <li><p>If the first eight characters of the <var title="">index</var>th
+ token in <var title="">tokens</var> are not an <span>ASCII
+ case-insensitive</span> match for the string "<code
+ title="attr-fe-autocomplete-section">section-</code>", then jump to
+ the step labeled <i>default</i>.</p></li>
+
+ <li><p>Let <var title="">section</var> be the <var
+ title="">index</var>th token in <var title="">tokens</var>,
+ <span>converted to ASCII lowercase</span>.</p></li>
+
+ <li><p>Insert <var title="">section</var> at the start of <var
+ title="">scope tokens</var>.</p></li>
+
+ <li><p>Let <var title="">IDL value</var> be the concatenation of
+ <var title="">section</var>, a U+0020 SPACE character, and the
+ previous value of <var title="">IDL value</var>.</p></li>
+
+ <li><p><i>Done</i>: Let the element's <span>autofill hint
+ set</span> be <var title="">hint tokens</var>.</p>
+
+ <li><p>Let the element's <span>autofill field name</span> be
+ <var title="">field</var>.</p>
+
+ <li><p>Let the element's <span>IDL-exposed autofill value</span> be
+ <var title="">IDL value</var>.</p>
+
+ <li><p>Abort these steps.</p></li>
+
+ <li><p><i>Default</i>: Let the element's <span>IDL-exposed autofill
+ value</span> be the empty string, and let its <span>autofill hint
+ set</span> be empty.</p></li>
+
+ <li><p>Let <var title="">form</var> be the element's <span>form
+ owner</span>, if any, or null otherwise.</p></li>
+
+ <li>
+
+ <p>If <var title="">form</var> is not null and <var
+ title="">form</var>'s <code
+ title="attr-form-autocomplete">autocomplete</code> attribute is in
+ the <span title="attr-form-autocomplete-off-state">off</span>
+ state, then let the element's <span>autofill field name</span> be
+ "<code title="attr-fe-autocomplete-off">off</code>".</p>
+
+ <p>Otherwise, let the element's <span>autofill field name</span>
+ be "<code title="attr-fe-autocomplete-on">on</code>".</p>
+
+ </li>
+
+ </ol>
+
+ <p>When an element's <span>autofill field name</span> is "<code
+ title="attr-fe-autocomplete-off">off</code>", the user agent should
not remember the control's <span
title="concept-fe-value">value</span>, and should not offer past
values to the user.</p>
- <p>In addition, if the <span>resulting autocompletion state</span>
- is <i title="">off</i>, <a href="#history-autocomplete">values are
- reset</a> when <span title="traverse the history">traversing the
- history</span>.</p>
+ <p class="note">In addition, when an element's <span>autofill field
+ name</span> is "<code title="attr-fe-autocomplete-off">off</code>",
+ <a href="#history-autocomplete">values are reset</a> when <span
+ title="traverse the history">traversing the history</span>.</p>
- <p>The autocompletion mechanism must be implemented by the user
- agent acting as if the user had modified the element's <span
- title="concept-fe-value">value</span>, and must be done at a time
- where the element is <i title="concept-fe-mutable">mutable</i>
- (e.g. just after the element has been inserted into the document, or
- when the user agent <span title="stop parsing">stops
- parsing</span>).</p>
-
<div class="example">
<p>Banks frequently do not want UAs to prefill login
@@ -64041,18 +64769,189 @@
</div>
- <p>A user agent may allow the user to override the <span>resulting
- autocompletion state</span> and set it to always <i title="">on</i>,
- always allowing values to be remembered and prefilled, or always <i
- title="">off</i>, never remembering values. However, user agents
- should not allow users to trivially override the <span>resulting
- autocompletion state</span> to <i title="">on</i>, as there are
- significant security implications for the user if all values are
+ <p>When an element's <span>autofill field name</span> is
+ <em>not</em> "<code title="attr-fe-autocomplete-off">off</code>",
+ the user agent may store the control's <span
+ title="concept-fe-value">value</span>, and may offer previously
+ stored values to the user.</p>
+
+ <p>When the <span>autofill field name</span> is "<code
+ title="attr-fe-autocomplete-on">on</code>", the user agent should
+ attempt to use heuristics to determine the most appropriate values
+ to offer the user, e.g. based on the element's <code
+ title="attr-fe-name">name</code> value, the position of the element
+ in the document's DOM, what other fields exist in the form, and so
+ forth.</p>
+
+ <p>When the <span>autofill field name</span> is one of the names of
+ the <span title="autofill field">autofill fields</span> described
+ above, the user agent should provide suggestions that match the
+ meaning of the field name as given in the table earlier in this
+ section. The <span>autofill hint set</span> should be used to select
+ amongst multiple possible suggestions.</p>
+
+ <p class="example">For example, if a user once entered one address
+ into fields that used the "<code
+ title="attr-fe-autocomplete-shipping">shipping</code>" keyword, and
+ another address into fields that used the "<code
+ title="attr-fe-autocomplete-billing">billing</code>" keyword, then
+ in subsequent forms only the first address would be suggested for
+ form controls whose <span>autofill hint set</span> contains the
+ keyword "<code
+ title="attr-fe-autocomplete-shipping">shipping</code>". Both
+ addresses might be suggested, however, for address-related form
+ controls whose <span>autofill hint set</span> does not contain
+ either keyword.</p>
+
+ <p>When the user agent prefills form controls, elements with the
+ same <span>form owner</span> and the same <span>autofill hint
+ set</span> must use data relating to the same person, address,
+ payment instrument, and/or contact details.</p>
+
+ <p class="example">Suppose a user agent knows of two phone numbers,
+ +1 555 123 1234 and +1 555 666 7777. It would not be conforming for
+ the user agent to fill a field with <code
+ title="">autocomplete="shipping tel-local-prefix"</code> with the
+ value "123" and another field in the same form with <code
+ title="">autocomplete="shipping tel-local-suffix"</code> with the
+ value "7777". The only valid pefilled values given the
+ aforementioned information would be "123" and "1234", or "666" and
+ "7777", respectively.</p>
+
+ <p class="example">Similarly, if a form for some reason contained
+ both a "<code title="attr-fe-autocomplete-cc-exp">cc-exp</code>"
+ field and a "<code
+ title="attr-fe-autocomplete-cc-exp-month">cc-exp-month</code>"
+ field, and the user agent prefilled the form, then the month
+ component of the former would have to match the latter.</p>
+
+ <p>The autocompletion mechanism must be implemented by the user
+ agent acting as if the user had modified the element's <span
+ title="concept-fe-value">value</span>, and must be done at a time
+ where the element is <i title="concept-fe-mutable">mutable</i> (e.g.
+ just after the element has been inserted into the document, or when
+ the user agent <span title="stop parsing">stops parsing</span>).
+ User agents must only prefill controls using values that the user
+ could have entered.</p>
+
+ <p class="example">For example, if a <code>select</code> element
+ only has <code>option</code> elements with values "Steve" and
+ "Rebecca", "Jay", and "Bob", and has an <span>autofill field
+ name</span> "<code
+ title="attr-fe-autocomplete-given-name">given-name</code>", but the
+ user agent's only idea for what to prefill the field with is "Evan",
+ then the user agent cannot prefill the field. It would not be
+ conforming to somehow set the <code>select</code> element to the
+ value "Evan", since the user could not have done so themselves.</p>
+
+ <p>A user agent prefilling a form control's <span
+ title="concept-fe-value">value</span> must not cause that control to
+ <span title="suffering from a type mismatch">suffer from a type
+ mismatch</span>, <span title="suffering from a pattern
+ mismatch">suffer from a pattern mismatch</span>, <span
+ title="suffering from being too long">suffer from being too
+ long</span>, <span title="suffering from an underflow">suffer from
+ an underflow</span>, <span title="suffering from an overflow">suffer
+ from an overflow</span>, or <span title="suffering from a step
+ mismatch">suffer from a step mismatch</span>. Where possible, user
+ agents should use heuristics to attempt to convert values so that
+ they can be used.</p>
+
+ <div class="example">
+
+ <p>For example, if the user agent knows that the user's middle name
+ is "Ines", and attempts to prefill a form control that looks like this:</p>
+
+ <pre><input name=middle-initial maxlength=1 autocomplete="additional-name"></pre>
+
+ <p>...then the user agent could convert "Ines" to "I" and prefill
+ it that way.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>A more elaborate example would be with month values. If the user
+ agent knows that the user's birthday is the 27th of July 2012, then
+ it might try to prefill all of the following controls with slightly
+ different values, all driven from this information:</p>
+
+ <table>
+ <tr>
+ <td>
+ <pre><input name=b type=month autocomplete="bday"></pre>
+ <td>
+ 2012-07
+ <td>
+ The day is dropped since the <span
+ title="attr-input-type-month">Month</span> state only accepts a
+ month/year combination.
+ <tr>
+ <td>
+ <pre><select name=c>
+ <option>Jan
+ <option>Feb
+ <em>...</em>
+ <option>Jul
+ <option>Aug
+ <em>...</em>
+</select></pre>
+ <td>
+ July
+ <td>
+ The user agent picks the month from the listed options, either
+ by noticing there are twelve options and picking the 7th, or by
+ recognising that one of the strings (three characters "Jul"
+ followed by a newline and a space) is a close match for the name
+ of the month (July) in one of the user agent's supported
+ languages, or through some other similar mechanism.
+ <tr>
+ <td>
+ <pre><input name=a type=number min=1 max=12 autocomplete="bday-month"></pre>
+ <td>
+ 7
+ <td>
+ User agent converts "July" to a month number in the range 1..12, like the field.
+ <tr>
+ <td>
+ <pre><input name=a type=number min=0 max=11 autocomplete="bday-month"></pre>
+ <td>
+ 6
+ <td>
+ User agent converts "July" to a month number in the range 0..11, like the field.
+ <tr>
+ <td>
+ <pre><input name=a type=number min=1 max=11 autocomplete="bday-month"></pre>
+ <td>
+ <td>
+ User agent doesn't fill in the field, since it can't make a good guess as to what the form expects.
+ </table>
+
+ </div>
+
+ <p>A user agent may allow the user to override an element's
+ <span>autofill field name</span>, e.g. to change it from "<code
+ title="attr-fe-autocomplete-off">off</code>" to "<code
+ title="attr-fe-autocomplete-on">on</code>" to allow values to be
+ remembered and prefilled despite the page author's objections, or to
+ always "<code title="attr-fe-autocomplete-off">off</code>", never
+ remembering values. However, user agents should not allow users to
+ trivially override the <span>autofill field name</span> from "<code
+ title="attr-fe-autocomplete-off">off</code>" to "<code
+ title="attr-fe-autocomplete-on">on</code>" or other values, as there
+ are significant security implications for the user if all values are
always remembered, regardless of the site's preferences.</p>
+ <p>The <dfn
+ title="dom-fe-autocomplete"><code>autocomplete</code></dfn> IDL
+ attribute, on getting, must return the element's <span>IDL-exposed
+ autofill value</span>, and on setting, must <span>reflect</span> the
+ content attribute of the same name.</p>
+
</div>
+
<!--TOPIC:DOM APIs-->
<h4 id="textFieldSelection">APIs for the text field selections</h4>
@@ -81569,8 +82468,8 @@
<li id="history-autocomplete"><p>If the <var title="">specified
entry</var>'s <code>Document</code> has any form controls whose
- <span>resulting autocompletion state</span> is <i
- title="">off</i>, invoke the <span
+ <span>autofill field name</span> is "<code
+ title="attr-fe-autocomplete-off">off</code>", invoke the <span
title="concept-form-reset-control">reset algorithm</span> of each
of those elements.</p></li>
@@ -119006,11 +119905,17 @@
<td> <span>Boolean attribute</span>
<tr>
<th> <code title="">autocomplete</code>
- <td> <code title="attr-form-autocomplete">form</code>;
- <code title="attr-fe-autocomplete">input</code>
- <td> Prevent the user agent from providing autocompletions for the form control(s)
+ <td> <code title="attr-form-autocomplete">form</code>
+ <td> Default setting for autofill feature for controls in the form
<td> "<code title="">on</code>"; "<code title="">off</code>"
<tr>
+ <th> <code title="">autocomplete</code>
+ <td> <code title="attr-fe-autocomplete">input</code>;
+ <code title="attr-fe-autocomplete">select</code>;
+ <code title="attr-fe-autocomplete">textarea</code>
+ <td> Hint for form autofill feature
+ <td> <span title="autofill field">Autofill field</span> name and related tokens*
+ <tr>
<th> <code title="">autofocus</code>
<td> <code title="attr-fe-autofocus">button</code>;
<code title="attr-fe-autofocus">input</code>;
More information about the Commit-Watchers
mailing list