[html5] r7224 - [e] (0) Try to explain the difference between the inputmode, type, and autocompl [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Aug 2 11:03:22 PDT 2012
Author: ianh
Date: 2012-08-02 11:03:20 -0700 (Thu, 02 Aug 2012)
New Revision: 7224
Modified:
complete.html
index
source
Log:
[e] (0) Try to explain the difference between the inputmode, type, and autocomplete attributes. Let me know if you have any suggestions for more to add to this section. (Also, CLDR autoupdate.)
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2012-08-02 00:17:05 UTC (rev 7223)
+++ complete.html 2012-08-02 18:03:20 UTC (rev 7224)
@@ -668,7 +668,8 @@
<li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></li>
<li><a href=#enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5 </span>Enabling client-side automatic filling of form controls</a></li>
<li><a href=#improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6 </span>Improving the user experience on mobile devices</a></li>
- <li><a href=#input-author-notes><span class=secno>4.10.1.7 </span>Date, time, and number formats</a></ol></li>
+ <li><a href=#the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7 </span>The difference between the field type, the autofill field name, and the input modality</a></li>
+ <li><a href=#input-author-notes><span class=secno>4.10.1.8 </span>Date, time, and number formats</a></ol></li>
<li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
<li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
<li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
@@ -45063,10 +45064,97 @@
- <h5 id=input-author-notes><span class=secno>4.10.1.7 </span>Date, time, and number formats</h5>
+ <h5 id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7 </span>The difference between the field type, the autofill field name, and the input modality</h5>
<p><i>This section is non-normative.</i></p>
+ <p>The <code title=attr-input-type><a href=#attr-input-type>type</a></code>, <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, and <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attributes can seem
+ confusingly similar. For instance, in all three cases, the string
+ "<code title="">email</code>" is a valid value. This section
+ attempts to illustrate the difference between the three attributes
+ and provides advice suggesting how to use them.</p>
+
+ <p>The <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute on
+ <code><a href=#the-input-element>input</a></code> elements decides what kind of control the user
+ agent will use to expose the field. Chosing between different values
+ of this attribute is the same choice as chosing whether to use an
+ <code><a href=#the-input-element>input</a></code> element, a <code><a href=#the-textarea-element>textarea</a></code> element, a
+ <code><a href=#the-select-element>select</a></code> element, a <code><a href=#the-keygen-element>keygen</a></code> element, etc.</p>
+
+ <p>The <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute, in contrast, describes what the value that the user will
+ enter actually represents. Chosing between different values of this
+ attribute is the same choice as chosing what the label for the
+ element will be.</p>
+
+ <p>First, consider telephone numbers. If a page is asking for a
+ telephone number from the user, the right form control to use is
+ <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)"><input type=tel></a></code>.
+ However, which <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value to use
+ depends on which phone number the page is asking for, whether they
+ expect a telephone number in the international format or just the
+ local format, and so forth.</p>
+
+ <p>For example, a page that forms part of a checkout process on an
+ e-commerce site for a customer buying a gift to be shipped to a
+ friend might need both the buyer's telephone number (in case of
+ payment issues) and the friend's telephone number (in case of
+ delivery issues). If the site expects international phone numbers
+ (with the country code prefix), this could thus look like this:</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
+<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".</pre>
+
+ <p>But if the site only supports British customers and recipients,
+ it might instead look like this (notice the use of <code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code> rather
+ than <code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>):</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
+<p>Please enter complete UK phone numbers, as in "(01632) 960 123".</pre>
+
+ <p>Now, consider a person's preferred languages. The right <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value is <code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>. However,
+ there could be a number of different form controls used for the
+ purpose: a free text field (<code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input type=text></a></code>), a
+ drop-down list (<code title=select><a href=#the-select-element><select></a></code>), radio
+ buttons (<code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)"><input
+ type=radio></a></code>), etc. It only depends on what kind of interface
+ is desired.</p>
+
+ <p>The <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> decides what
+ kind of input modality (e.g. keyboard) to use, when the control is a
+ free-form text field.</p>
+
+ <p>Consider names. If a page just wants one name from the user, then
+ the relevant control is <code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input
+ type=text></a></code>. If the page is asking for the user's full name,
+ then the relevant <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value is <code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>. But if the user is
+ Japanese, and the page is asking for the user's Japanese name and
+ the user's romanized name, then it would be helpful to the user if
+ the first field defaulted to a Japanese input modality, while the
+ second defaulted to a Latin input modality (ideally with automatic
+ capitalization of each word). This is where the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute can help:</p>
+
+ <pre><p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name" inputmode="kana"></label>
+<label>Romanized name: <input name="e" type="text" autocomplete="section-en name" inputmode="latin-name"></label></pre>
+
+ <p>In this example, the "<code title=attr-fe-autocomplete-section>section-*</code>" keywords in
+ the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attributes' values tell the user agent that the two fields expect
+ <em>different</em> names. Without them, the user agent could
+ automatically fill the second field with the value given in the
+ first field when the user gave a value to the first field.</p>
+
+ <p class=note>The "<code title="">-jp</code>" and "<code title="">-en</code>" parts of the keywords are opaque to the user
+ agent; the user agent cannot guess, from those, that the two names
+ are expected to be in Japanese and English respectively.</p>
+
+
+ <h5 id=input-author-notes><span class=secno>4.10.1.8 </span>Date, time, and number formats</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
<p>In this pizza delivery example, the times are specified in the
format "HH:MM": two digits for the hour, in 24-hour format, and two
digits for the time. (Seconds could also be specified, though they
@@ -54837,17 +54925,17 @@
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. (For numbers, prefer "<code title=attr-input-type-number><a href="#number-state-(type=number)"><input type=number></a></code>".)
- <tr><td> <dfn id=attr-fe-inputmode-keyword-tel title=attr-fe-inputmode-keyword-tel><code>tel</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-tel title=attr-fe-inputmode-keyword-tel><code>tel</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-telephone title=attr-fe-inputmode-state-telephone>Telephone</dfn>
<td> <a href=#attr-fe-inputmode-state-numeric title=attr-fe-inputmode-state-numeric>Numeric</a>
<td> Telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g. in the US, the key labeled "1" is historically also labeled with the letters A, B, and C). <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-tel><a href="#telephone-state-(type=tel)"><input type=tel></a></code>" instead.
- <tr><td> <dfn id=attr-fe-inputmode-keyword-email title=attr-fe-inputmode-keyword-email><code>email</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-email title=attr-fe-inputmode-keyword-email><code>email</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-email title=attr-fe-inputmode-state-email>E-mail</dfn>
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-email><a href="#e-mail-state-(type=email)"><input type=email></a></code>" instead.
- <tr><td> <dfn id=attr-fe-inputmode-keyword-url title=attr-fe-inputmode-keyword-url><code>url</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-url title=attr-fe-inputmode-keyword-url><code>url</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-url title=attr-fe-inputmode-state-url>URL</dfn>
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Text input in the user's locale, with keys for aiding in the input of Web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk". <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-url><a href="#url-state-(type=url)"><input type=url></a></code>" instead.
@@ -96471,6 +96559,7 @@
:root:lang(dje), :not(:lang(dje)) > :lang(dje) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dua), :not(:lang(dua)) > :lang(dua) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(dyo), :not(:lang(dyo)) > :lang(dyo) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(dz), :not(:lang(dz)) > :lang(dz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ebu), :not(:lang(ebu)) > :lang(ebu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ee), :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(el), :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
@@ -96506,6 +96595,7 @@
:root:lang(khq), :not(:lang(khq)) > :lang(khq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ki), :not(:lang(ki)) > :lang(ki) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kln), :not(:lang(kln)) > :lang(kln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(km), :not(:lang(km)) > :lang(km) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kn), :not(:lang(kn)) > :lang(kn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ko), :not(:lang(ko)) > :lang(ko) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ksb), :not(:lang(ksb)) > :lang(ksb) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -96513,6 +96603,7 @@
:root:lang(lag), :not(:lang(lag)) > :lang(lag) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(lg), :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ln), :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(lo), :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(lu), :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luo), :not(:lang(luo)) > :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -96552,6 +96643,7 @@
:root:lang(sg), :not(:lang(sg)) > :lang(sg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(shi), :not(:lang(shi)) > :lang(shi) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
:root:lang(shi-Tfng), :not(:lang(shi-Tfng)) > :lang(shi-Tfng) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
+:root:lang(si), :not(:lang(si)) > :lang(si) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sk), :not(:lang(sk)) > :lang(sk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sl), :not(:lang(sl)) > :lang(sl) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sn), :not(:lang(sn)) > :lang(sn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
Modified: index
===================================================================
--- index 2012-08-02 00:17:05 UTC (rev 7223)
+++ index 2012-08-02 18:03:20 UTC (rev 7224)
@@ -668,7 +668,8 @@
<li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></li>
<li><a href=#enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5 </span>Enabling client-side automatic filling of form controls</a></li>
<li><a href=#improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6 </span>Improving the user experience on mobile devices</a></li>
- <li><a href=#input-author-notes><span class=secno>4.10.1.7 </span>Date, time, and number formats</a></ol></li>
+ <li><a href=#the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7 </span>The difference between the field type, the autofill field name, and the input modality</a></li>
+ <li><a href=#input-author-notes><span class=secno>4.10.1.8 </span>Date, time, and number formats</a></ol></li>
<li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
<li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
<li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
@@ -45063,10 +45064,97 @@
- <h5 id=input-author-notes><span class=secno>4.10.1.7 </span>Date, time, and number formats</h5>
+ <h5 id=the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality><span class=secno>4.10.1.7 </span>The difference between the field type, the autofill field name, and the input modality</h5>
<p><i>This section is non-normative.</i></p>
+ <p>The <code title=attr-input-type><a href=#attr-input-type>type</a></code>, <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, and <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attributes can seem
+ confusingly similar. For instance, in all three cases, the string
+ "<code title="">email</code>" is a valid value. This section
+ attempts to illustrate the difference between the three attributes
+ and provides advice suggesting how to use them.</p>
+
+ <p>The <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute on
+ <code><a href=#the-input-element>input</a></code> elements decides what kind of control the user
+ agent will use to expose the field. Chosing between different values
+ of this attribute is the same choice as chosing whether to use an
+ <code><a href=#the-input-element>input</a></code> element, a <code><a href=#the-textarea-element>textarea</a></code> element, a
+ <code><a href=#the-select-element>select</a></code> element, a <code><a href=#the-keygen-element>keygen</a></code> element, etc.</p>
+
+ <p>The <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute, in contrast, describes what the value that the user will
+ enter actually represents. Chosing between different values of this
+ attribute is the same choice as chosing what the label for the
+ element will be.</p>
+
+ <p>First, consider telephone numbers. If a page is asking for a
+ telephone number from the user, the right form control to use is
+ <code title=attr-input-type-tel><a href="#telephone-state-(type=tel)"><input type=tel></a></code>.
+ However, which <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value to use
+ depends on which phone number the page is asking for, whether they
+ expect a telephone number in the international format or just the
+ local format, and so forth.</p>
+
+ <p>For example, a page that forms part of a checkout process on an
+ e-commerce site for a customer buying a gift to be shipped to a
+ friend might need both the buyer's telephone number (in case of
+ payment issues) and the friend's telephone number (in case of
+ delivery issues). If the site expects international phone numbers
+ (with the country code prefix), this could thus look like this:</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
+<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".</pre>
+
+ <p>But if the site only supports British customers and recipients,
+ it might instead look like this (notice the use of <code title=attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code> rather
+ than <code title=attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>):</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
+<p>Please enter complete UK phone numbers, as in "(01632) 960 123".</pre>
+
+ <p>Now, consider a person's preferred languages. The right <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value is <code title=attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>. However,
+ there could be a number of different form controls used for the
+ purpose: a free text field (<code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input type=text></a></code>), a
+ drop-down list (<code title=select><a href=#the-select-element><select></a></code>), radio
+ buttons (<code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)"><input
+ type=radio></a></code>), etc. It only depends on what kind of interface
+ is desired.</p>
+
+ <p>The <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> decides what
+ kind of input modality (e.g. keyboard) to use, when the control is a
+ free-form text field.</p>
+
+ <p>Consider names. If a page just wants one name from the user, then
+ the relevant control is <code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input
+ type=text></a></code>. If the page is asking for the user's full name,
+ then the relevant <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> value is <code title=attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>. But if the user is
+ Japanese, and the page is asking for the user's Japanese name and
+ the user's romanized name, then it would be helpful to the user if
+ the first field defaulted to a Japanese input modality, while the
+ second defaulted to a Latin input modality (ideally with automatic
+ capitalization of each word). This is where the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute can help:</p>
+
+ <pre><p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name" inputmode="kana"></label>
+<label>Romanized name: <input name="e" type="text" autocomplete="section-en name" inputmode="latin-name"></label></pre>
+
+ <p>In this example, the "<code title=attr-fe-autocomplete-section>section-*</code>" keywords in
+ the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attributes' values tell the user agent that the two fields expect
+ <em>different</em> names. Without them, the user agent could
+ automatically fill the second field with the value given in the
+ first field when the user gave a value to the first field.</p>
+
+ <p class=note>The "<code title="">-jp</code>" and "<code title="">-en</code>" parts of the keywords are opaque to the user
+ agent; the user agent cannot guess, from those, that the two names
+ are expected to be in Japanese and English respectively.</p>
+
+
+ <h5 id=input-author-notes><span class=secno>4.10.1.8 </span>Date, time, and number formats</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
<p>In this pizza delivery example, the times are specified in the
format "HH:MM": two digits for the hour, in 24-hour format, and two
digits for the time. (Seconds could also be specified, though they
@@ -54837,17 +54925,17 @@
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. (For numbers, prefer "<code title=attr-input-type-number><a href="#number-state-(type=number)"><input type=number></a></code>".)
- <tr><td> <dfn id=attr-fe-inputmode-keyword-tel title=attr-fe-inputmode-keyword-tel><code>tel</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-tel title=attr-fe-inputmode-keyword-tel><code>tel</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-telephone title=attr-fe-inputmode-state-telephone>Telephone</dfn>
<td> <a href=#attr-fe-inputmode-state-numeric title=attr-fe-inputmode-state-numeric>Numeric</a>
<td> Telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g. in the US, the key labeled "1" is historically also labeled with the letters A, B, and C). <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-tel><a href="#telephone-state-(type=tel)"><input type=tel></a></code>" instead.
- <tr><td> <dfn id=attr-fe-inputmode-keyword-email title=attr-fe-inputmode-keyword-email><code>email</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-email title=attr-fe-inputmode-keyword-email><code>email</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-email title=attr-fe-inputmode-state-email>E-mail</dfn>
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-email><a href="#e-mail-state-(type=email)"><input type=email></a></code>" instead.
- <tr><td> <dfn id=attr-fe-inputmode-keyword-url title=attr-fe-inputmode-keyword-url><code>url</code></dfn>
+ <tr class=rare><td> <dfn id=attr-fe-inputmode-keyword-url title=attr-fe-inputmode-keyword-url><code>url</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-url title=attr-fe-inputmode-state-url>URL</dfn>
<td> <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</a>
<td> Text input in the user's locale, with keys for aiding in the input of Web addresses, such as that for the "/" and "." characters and for quick input of strings commonly found in domain names such as "www." or ".co.uk". <a href=#avoid-inputmode>Rarely necessary</a>; use "<code title=attr-input-type-url><a href="#url-state-(type=url)"><input type=url></a></code>" instead.
@@ -96471,6 +96559,7 @@
:root:lang(dje), :not(:lang(dje)) > :lang(dje) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dua), :not(:lang(dua)) > :lang(dua) { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
:root:lang(dyo), :not(:lang(dyo)) > :lang(dyo) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
+:root:lang(dz), :not(:lang(dz)) > :lang(dz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ebu), :not(:lang(ebu)) > :lang(ebu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ee), :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(el), :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
@@ -96506,6 +96595,7 @@
:root:lang(khq), :not(:lang(khq)) > :lang(khq) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ki), :not(:lang(ki)) > :lang(ki) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kln), :not(:lang(kln)) > :lang(kln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(km), :not(:lang(km)) > :lang(km) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kn), :not(:lang(kn)) > :lang(kn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ko), :not(:lang(ko)) > :lang(ko) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ksb), :not(:lang(ksb)) > :lang(ksb) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -96513,6 +96603,7 @@
:root:lang(lag), :not(:lang(lag)) > :lang(lag) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
:root:lang(lg), :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ln), :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(lo), :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(lu), :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luo), :not(:lang(luo)) > :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -96552,6 +96643,7 @@
:root:lang(sg), :not(:lang(sg)) > :lang(sg) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(shi), :not(:lang(shi)) > :lang(shi) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
:root:lang(shi-Tfng), :not(:lang(shi-Tfng)) > :lang(shi-Tfng) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
+:root:lang(si), :not(:lang(si)) > :lang(si) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(sk), :not(:lang(sk)) > :lang(sk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sl), :not(:lang(sl)) > :lang(sl) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(sn), :not(:lang(sn)) > :lang(sn) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
Modified: source
===================================================================
--- source 2012-08-02 00:17:05 UTC (rev 7223)
+++ source 2012-08-02 18:03:20 UTC (rev 7224)
@@ -52636,6 +52636,105 @@
+ <h5>The difference between the field type, the autofill field name, and the input modality</h5>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p>The <code title="attr-input-type">type</code>, <code
+ title="attr-fe-autocomplete">autocomplete</code>, and <code
+ title="attr-fe-inputmode">inputmode</code> attributes can seem
+ confusingly similar. For instance, in all three cases, the string
+ "<code title="">email</code>" is a valid value. This section
+ attempts to illustrate the difference between the three attributes
+ and provides advice suggesting how to use them.</p>
+
+ <p>The <code title="attr-input-type">type</code> attribute on
+ <code>input</code> elements decides what kind of control the user
+ agent will use to expose the field. Chosing between different values
+ of this attribute is the same choice as chosing whether to use an
+ <code>input</code> element, a <code>textarea</code> element, a
+ <code>select</code> element, a <code>keygen</code> element, etc.</p>
+
+ <p>The <code title="attr-fe-autocomplete">autocomplete</code>
+ attribute, in contrast, describes what the value that the user will
+ enter actually represents. Chosing between different values of this
+ attribute is the same choice as chosing what the label for the
+ element will be.</p>
+
+ <p>First, consider telephone numbers. If a page is asking for a
+ telephone number from the user, the right form control to use is
+ <code title="attr-input-type-tel"><input type=tel></code>.
+ However, which <code
+ title="attr-fe-autocomplete">autocomplete</code> value to use
+ depends on which phone number the page is asking for, whether they
+ expect a telephone number in the international format or just the
+ local format, and so forth.</p>
+
+ <p>For example, a page that forms part of a checkout process on an
+ e-commerce site for a customer buying a gift to be shipped to a
+ friend might need both the buyer's telephone number (in case of
+ payment issues) and the friend's telephone number (in case of
+ delivery issues). If the site expects international phone numbers
+ (with the country code prefix), this could thus look like this:</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
+<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".</pre>
+
+ <p>But if the site only supports British customers and recipients,
+ it might instead look like this (notice the use of <code
+ title="attr-fe-autocomplete-tel-national">tel-national</code> rather
+ than <code title="attr-fe-autocomplete-tel">tel</code>):</p>
+
+ <pre><p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
+<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
+<p>Please enter complete UK phone numbers, as in "(01632) 960 123".</pre>
+
+ <p>Now, consider a person's preferred languages. The right <code
+ title="attr-fe-autocomplete">autocomplete</code> value is <code
+ title="attr-fe-autocomplete-language">language</code>. However,
+ there could be a number of different form controls used for the
+ purpose: a free text field (<code
+ title="attr-input-type-text"><input type=text></code>), a
+ drop-down list (<code title="select"><select></code>), radio
+ buttons (<code title="attr-input-type-radio"><input
+ type=radio></code>), etc. It only depends on what kind of interface
+ is desired.</p>
+
+ <p>The <code title="attr-fe-inputmode">inputmode</code> decides what
+ kind of input modality (e.g. keyboard) to use, when the control is a
+ free-form text field.</p>
+
+ <p>Consider names. If a page just wants one name from the user, then
+ the relevant control is <code title="attr-input-type-text"><input
+ type=text></code>. If the page is asking for the user's full name,
+ then the relevant <code
+ title="attr-fe-autocomplete">autocomplete</code> value is <code
+ title="attr-fe-autocomplete-name">name</code>. But if the user is
+ Japanese, and the page is asking for the user's Japanese name and
+ the user's romanized name, then it would be helpful to the user if
+ the first field defaulted to a Japanese input modality, while the
+ second defaulted to a Latin input modality (ideally with automatic
+ capitalization of each word). This is where the <code
+ title="attr-fe-inputmode">inputmode</code> attribute can help:</p>
+
+ <pre><p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name" inputmode="kana"></label>
+<label>Romanized name: <input name="e" type="text" autocomplete="section-en name" inputmode="latin-name"></label></pre>
+
+ <p>In this example, the "<code
+ title="attr-fe-autocomplete-section">section-*</code>" keywords in
+ the <code title="attr-fe-autocomplete">autocomplete</code>
+ attributes' values tell the user agent that the two fields expect
+ <em>different</em> names. Without them, the user agent could
+ automatically fill the second field with the value given in the
+ first field when the user gave a value to the first field.</p>
+
+ <p class="note">The "<code title="">-jp</code>" and "<code
+ title="">-en</code>" parts of the keywords are opaque to the user
+ agent; the user agent cannot guess, from those, that the two names
+ are expected to be in Japanese and English respectively.</p>
+
+
<h5 id="input-author-notes">Date, time, and number formats</h5>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
@@ -63978,19 +64077,19 @@
<td> <span title="attr-fe-inputmode-state-default">Default</span>
<td> Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. (For numbers, prefer "<code title="attr-input-type-number"><input type=number></code>".)
- <tr>
+ <tr class="rare">
<td> <dfn title="attr-fe-inputmode-keyword-tel"><code>tel</code></dfn>
<td> <dfn title="attr-fe-inputmode-state-telephone">Telephone</dfn>
<td> <span title="attr-fe-inputmode-state-numeric">Numeric</span>
<td> Telephone number input, including keys for the digits 0 to 9, the "#" character, and the "*" character. In some locales, this can also include alphabetic mnemonic labels (e.g. in the US, the key labeled "1" is historically also labeled with the letters A, B, and C). <a href="#avoid-inputmode">Rarely necessary</a>; use "<code title="attr-input-type-tel"><input type=tel></code>" instead.
- <tr>
+ <tr class="rare">
<td> <dfn title="attr-fe-inputmode-keyword-email"><code>email</code></dfn>
<td> <dfn title="attr-fe-inputmode-state-email">E-mail</dfn>
<td> <span title="attr-fe-inputmode-state-default">Default</span>
<td> Text input in the user's locale, with keys for aiding in the input of e-mail addresses, such as that for the "@" character and the "." character. <a href="#avoid-inputmode">Rarely necessary</a>; use "<code title="attr-input-type-email"><input type=email></code>" instead.
- <tr>
+ <tr class="rare">
<td> <dfn title="attr-fe-inputmode-keyword-url"><code>url</code></dfn>
<td> <dfn title="attr-fe-inputmode-state-url">URL</dfn>
<td> <span title="attr-fe-inputmode-state-default">Default</span>
More information about the Commit-Watchers
mailing list