Skip to content

Commit

Permalink
[giow] (0) Make the spec consistent on whether <select> takes autocom…
Browse files Browse the repository at this point in the history 
…plete='' (it now unambiguously does; this is, I believe, a new feature that browsers don't yet support).

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23890
Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@8383 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jan 7, 2014
1 parent 5d4574d commit 9af4dd5
Show file tree
Hide file tree
Showing 5 changed files with 217 additions and 36 deletions.
79 changes: 68 additions & 11 deletions complete.html
View file
Expand Up @@ -37478,6 +37478,7 @@ <h5 id=enabling-client-side-automatic-filling-of-form-controls><span class=secno
the user reenter their information each time. For example, a field asking for the user's telephone
number can be automatically filled with the user's phone number.</p>

<!--CLEANUP-->
<p>To help the user agent with this, the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute can be used to describe the field's purpose. In the case of this form, we have
three fields that can be usefully annotated in this way: the information about who the pizza is to
be delivered to. Adding this information looks like this:</p>
Expand Down Expand Up @@ -44073,6 +44074,7 @@ <h4 id=the-select-element><span class=secno>4.10.7 </span>The <dfn><code>select<
<dd>Neither tag is omissible.</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> &mdash; Hint for form autofill feature</dd>
<dd><code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> &mdash; Automatically focus the form control when the page is loaded</dd>
<dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> &mdash; Whether the form control is disabled</dd>
<dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code> &mdash; Associates the control with a <code><a href=#the-form-element>form</a></code> element</dd>
Expand Down Expand Up @@ -44237,10 +44239,13 @@ <h4 id=the-select-element><span class=secno>4.10.7 </span>The <dfn><code>select<

</div>

<p>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-select-element>select</a></code> element with its <a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute represents the element's name. The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and
to prevent its value from being submitted. The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>
attribute controls focus.</p>
<p>
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-select-element>select</a></code> element with its <a href=#form-owner>form owner</a>.
The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute represents the element's name.
The <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and to prevent its value from being submitted.
The <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute controls focus.
The <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides autofill behavior.
</p>

<p>A <code><a href=#the-select-element>select</a></code> element that is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> is
<i title=concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i>.</p>
Expand Down Expand Up @@ -47890,9 +47895,29 @@ <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4

</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>
<!-- XXX for select concept-option-selectedness -->
</ol><hr><p>For the purposes of autofill, a <dfn id="control's-data">control's data</dfn> depends on the kind of control:</p>

<dl><dt>An <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute
in the <a href="#e-mail-state-(type=email)" title=attr-input-type-email>E-mail</a> state and with the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute specified</dt>

<dd>The element's <a href=#concept-fe-values title=concept-fe-values>values</a>.</dd>

<dt>Any other <code><a href=#the-input-element>input</a></code> element</dt>
<dt>A <code><a href=#the-textarea-element>textarea</a></code> element</dt>

<dd>The element's <a href=#concept-fe-values title=concept-fe-values>value</a>.</dd>

<dt>A <code><a href=#the-select-element>select</a></code> element with its <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
attribute specified</dt>

<dd>The <code><a href=#the-option-element>option</a></code> elements in the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that have their <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true.</dd>

<dt>Any other <code><a href=#the-select-element>select</a></code> element</dt>

<dd>The <code><a href=#the-option-element>option</a></code> element in the <code><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that has its <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> set to true.</dd>

</dl><hr><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 <a href="#control's-data">control's
data</a>, and should not offer past values to the user.</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>
Expand All @@ -47906,8 +47931,39 @@ <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4

</div>

<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>
<!-- XXX for select concept-option-selectedness -->
<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 <a href="#control's-data">control's
data</a>, and may offer previously stored values to the user.</p>

<div class=example>

<p>For example, suppose a user visits a page with this control:</p>

<pre>&lt;select name="country"&gt;
&lt;option&gt;Afghanistan
&lt;option&gt;Albania
&lt;option&gt;Algeria
&lt;option&gt;Andorra
&lt;option&gt;Angola
&lt;option&gt;Antigua and Barbuda
&lt;option&gt;Argentina
&lt;option&gt;Armenia
&lt;!-- <em>...</em> --&gt;
&lt;option&gt;Yemen
&lt;option&gt;Zambia
&lt;option&gt;Zimbabwe
&lt;/select&gt;</pre>

<p>This might render as follows:</p>

<p><img src=http://images.whatwg.org/select-country-1.png alt="A drop-down control with a long alphabetical list of countries."></p>

<p>Suppose that on the first visit to this page, the user selects "Zambia". On the second visit,
the user agent could duplicate the entry for Zambia at the top of the list, so that the interface
instead looks like this:</p>

<p><img src=http://images.whatwg.org/select-country-2.png alt="The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top."></p>

</div>

<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
Expand Down Expand Up @@ -47945,13 +48001,13 @@ <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4
<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>

<!--CLEANUP-->
<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
modified the <a href="#control's-data">control's data</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>
<!-- XXX for select concept-option-selectedness -->

<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
Expand Down Expand Up @@ -99238,6 +99294,7 @@ <h3 class=no-num id=elements-1>Elements</h3>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td><code><a href=#the-option-element>option</a></code>, <code><a href=#the-optgroup-element>optgroup</a></code></td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>;
<code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code>;
<code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
Expand Down
Binary file added images/select-country-1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/select-country-2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9af4dd5

Please sign in to comment.