[html5] r7223 - [giow] (0) Add inputmode=latin-name; add some introductory material for autocomp [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Aug 1 17:17:06 PDT 2012
Author: ianh
Date: 2012-08-01 17:17:05 -0700 (Wed, 01 Aug 2012)
New Revision: 7223
Modified:
complete.html
index
source
Log:
[giow] (0) Add inputmode=latin-name; add some introductory material for autocomplete= and inputmode=; add inputmode= to the index; recommend against inputmode=email, tel, url.
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2012-08-01 23:38:11 UTC (rev 7222)
+++ complete.html 2012-08-02 00:17:05 UTC (rev 7223)
@@ -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 1 August 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 2 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>
@@ -666,7 +666,9 @@
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
<li><a href=#configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</a></li>
<li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></li>
- <li><a href=#input-author-notes><span class=secno>4.10.1.5 </span>Date, time, and number formats</a></ol></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=#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>
@@ -44904,7 +44906,6 @@
<pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre>
-
<h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</h5>
<p><i>This section is non-normative.</i></p>
@@ -44979,10 +44980,93 @@
</form></pre>
- <h5 id=input-author-notes><span class=secno>4.10.1.5 </span>Date, time, and number formats</h5>
+ <h5 id=enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5 </span>Enabling client-side automatic filling of form controls</h5>
+
<p><i>This section is non-normative.</i></p>
+ <p>Some browsers attempt to aid the user by automatically filling
+ form controls rather than having 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>
+
+ <p>To help the user agent with this, we can tell it what the field
+ is using the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute. 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>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required <strong>autocomplete="shipping name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" <strong>autocomplete="shipping tel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" <strong>autocomplete="shipping email"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+ <h5 id=improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6 </span>Improving the user experience on mobile devices</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Some devices, in particular those with on-screen keyboards and
+ those in locales with languages with many characters (e.g.
+ Japanese), can provide the user with multiple input modalities. For
+ example, when typing in a credit card number the user may wish to
+ only see keys for digits 0-9, while when typing in their name they
+ may wish to see a form field that by default capitalises each
+ word.</p>
+
+ <p>Using the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>
+ attribute we can select appropriate input modalities:</p>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required autocomplete="shipping name" <strong>inputmode="latin-name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000 <strong>inputmode="latin-prose"</strong>></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+
+ <h5 id=input-author-notes><span class=secno>4.10.1.7 </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
@@ -54715,6 +54799,11 @@
<td> <a href=#attr-fe-inputmode-state-verbatim title=attr-fe-inputmode-state-verbatim>Latin Verbatim</a>
<td> Latin-script input in the user's preferred language(s), with some typing aids enabled (e.g. text prediction). Intended for human-to-computer communications, e.g. free-form text search fields.
+ <tr><td> <dfn id=attr-fe-inputmode-keyword-latin-name title=attr-fe-inputmode-keyword-latin-name><code>latin-name</code></dfn>
+ <td> <dfn id=attr-fe-inputmode-state-latin-name title=attr-fe-inputmode-state-latin-name>Latin Name</dfn>
+ <td> <a href=#attr-fe-inputmode-state-latin title=attr-fe-inputmode-state-latin>Latin Text</a>
+ <td> Latin-script input in the user's preferred language(s), with typing aids intended for entering human names enabled (e.g. text prediction from the user's contact list and automatic capitalisation at every word). Intended for situations such as customer name fields.
+
<tr><td> <dfn id=attr-fe-inputmode-keyword-latin-prose title=attr-fe-inputmode-keyword-latin-prose><code>latin-prose</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-latin-prose title=attr-fe-inputmode-state-latin-prose>Latin Prose</dfn>
<td> <a href=#attr-fe-inputmode-state-latin title=attr-fe-inputmode-state-latin>Latin Text</a>
@@ -54746,26 +54835,32 @@
<tr><td> <dfn id=attr-fe-inputmode-keyword-numeric title=attr-fe-inputmode-keyword-numeric><code>numeric</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-numeric title=attr-fe-inputmode-state-numeric>Numeric</dfn>
<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 prices, dates, times.
+ <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 title=attr-fe-inputmode-keyword-><code>tel</code></dfn>
+ <tr><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).
+ <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>
<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.
+ <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>
<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".
+ <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.
- </table><p>User agents <span class=impl>must</span> all support the <dfn id=attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</dfn> input mode state,
- which corresponds to the user agent's default input modality. <span class=impl>This specification does not define how the user agent's
- default modality is to operate.</span> The <i>missing value
+ </table><p id=avoid-inputmode>The last three keywords listed above are
+ only provided for completeness, and are rarely necessary, as
+ dedicated input controls exist for their usual use cases (as
+ described in the table above).</p>
+
+ <p>User agents <span class=impl>must</span> all support the <dfn id=attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</dfn> input mode
+ state, which corresponds to the user agent's default input modality.
+ <span class=impl>This specification does not define how the user
+ agent's default modality is to operate.</span> The <i>missing value
default</i> is the <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>default input mode</a>
state.</p>
@@ -102716,6 +102811,22 @@
<td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a>
<td> Whether the element is inert
<td> <a href=#boolean-attribute>Boolean attribute</a>
+ <tr><th> <code title="">inputmode</code>
+ <td> <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>input</a></code>;
+ <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>textarea</a></code>
+ <td> Hint for selecting an input modality
+ <td> <code title=attr-fe-inputmode-keyword-verbatim><a href=#attr-fe-inputmode-keyword-verbatim>verbatim</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin><a href=#attr-fe-inputmode-keyword-latin>latin</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin-name><a href=#attr-fe-inputmode-keyword-latin-name>latin-name</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin-prose><a href=#attr-fe-inputmode-keyword-latin-prose>latin-prose</a></code>;
+ <code title=attr-fe-inputmode-keyword-full-width-latin><a href=#attr-fe-inputmode-keyword-full-width-latin>full-width-latin</a></code>;
+ <code title=attr-fe-inputmode-keyword-kana><a href=#attr-fe-inputmode-keyword-kana>kana</a></code>;
+ <code title=attr-fe-inputmode-keyword-katakana><a href=#attr-fe-inputmode-keyword-katakana>katakana</a></code>;
+ <!-- <code title="attr-fe-inputmode-keyword-half-width-katakana">half-width-katakana</code>; -->
+ <code title=attr-fe-inputmode-keyword-numeric><a href=#attr-fe-inputmode-keyword-numeric>numeric</a></code>;
+ <code title=attr-fe-inputmode-keyword-tel><a href=#attr-fe-inputmode-keyword-tel>tel</a></code>;
+ <code title=attr-fe-inputmode-keyword-email><a href=#attr-fe-inputmode-keyword-email>email</a></code>;
+ <code title=attr-fe-inputmode-keyword-url><a href=#attr-fe-inputmode-keyword-url>url</a></code>
<tr><th> <code title="">ismap</code>
<td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
<td> Whether the image is a server-side image map
Modified: index
===================================================================
--- index 2012-08-01 23:38:11 UTC (rev 7222)
+++ index 2012-08-02 00:17:05 UTC (rev 7223)
@@ -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 1 August 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 2 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>
@@ -666,7 +666,9 @@
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
<li><a href=#configuring-a-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring a form to communicate with a server</a></li>
<li><a href=#client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</a></li>
- <li><a href=#input-author-notes><span class=secno>4.10.1.5 </span>Date, time, and number formats</a></ol></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=#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>
@@ -44904,7 +44906,6 @@
<pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre>
-
<h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side form validation</h5>
<p><i>This section is non-normative.</i></p>
@@ -44979,10 +44980,93 @@
</form></pre>
- <h5 id=input-author-notes><span class=secno>4.10.1.5 </span>Date, time, and number formats</h5>
+ <h5 id=enabling-client-side-automatic-filling-of-form-controls><span class=secno>4.10.1.5 </span>Enabling client-side automatic filling of form controls</h5>
+
<p><i>This section is non-normative.</i></p>
+ <p>Some browsers attempt to aid the user by automatically filling
+ form controls rather than having 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>
+
+ <p>To help the user agent with this, we can tell it what the field
+ is using the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>
+ attribute. 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>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required <strong>autocomplete="shipping name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" <strong>autocomplete="shipping tel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" <strong>autocomplete="shipping email"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+ <h5 id=improving-the-user-experience-on-mobile-devices><span class=secno>4.10.1.6 </span>Improving the user experience on mobile devices</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Some devices, in particular those with on-screen keyboards and
+ those in locales with languages with many characters (e.g.
+ Japanese), can provide the user with multiple input modalities. For
+ example, when typing in a credit card number the user may wish to
+ only see keys for digits 0-9, while when typing in their name they
+ may wish to see a form field that by default capitalises each
+ word.</p>
+
+ <p>Using the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>
+ attribute we can select appropriate input modalities:</p>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required autocomplete="shipping name" <strong>inputmode="latin-name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000 <strong>inputmode="latin-prose"</strong>></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+
+ <h5 id=input-author-notes><span class=secno>4.10.1.7 </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
@@ -54715,6 +54799,11 @@
<td> <a href=#attr-fe-inputmode-state-verbatim title=attr-fe-inputmode-state-verbatim>Latin Verbatim</a>
<td> Latin-script input in the user's preferred language(s), with some typing aids enabled (e.g. text prediction). Intended for human-to-computer communications, e.g. free-form text search fields.
+ <tr><td> <dfn id=attr-fe-inputmode-keyword-latin-name title=attr-fe-inputmode-keyword-latin-name><code>latin-name</code></dfn>
+ <td> <dfn id=attr-fe-inputmode-state-latin-name title=attr-fe-inputmode-state-latin-name>Latin Name</dfn>
+ <td> <a href=#attr-fe-inputmode-state-latin title=attr-fe-inputmode-state-latin>Latin Text</a>
+ <td> Latin-script input in the user's preferred language(s), with typing aids intended for entering human names enabled (e.g. text prediction from the user's contact list and automatic capitalisation at every word). Intended for situations such as customer name fields.
+
<tr><td> <dfn id=attr-fe-inputmode-keyword-latin-prose title=attr-fe-inputmode-keyword-latin-prose><code>latin-prose</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-latin-prose title=attr-fe-inputmode-state-latin-prose>Latin Prose</dfn>
<td> <a href=#attr-fe-inputmode-state-latin title=attr-fe-inputmode-state-latin>Latin Text</a>
@@ -54746,26 +54835,32 @@
<tr><td> <dfn id=attr-fe-inputmode-keyword-numeric title=attr-fe-inputmode-keyword-numeric><code>numeric</code></dfn>
<td> <dfn id=attr-fe-inputmode-state-numeric title=attr-fe-inputmode-state-numeric>Numeric</dfn>
<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 prices, dates, times.
+ <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 title=attr-fe-inputmode-keyword-><code>tel</code></dfn>
+ <tr><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).
+ <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>
<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.
+ <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>
<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".
+ <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.
- </table><p>User agents <span class=impl>must</span> all support the <dfn id=attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</dfn> input mode state,
- which corresponds to the user agent's default input modality. <span class=impl>This specification does not define how the user agent's
- default modality is to operate.</span> The <i>missing value
+ </table><p id=avoid-inputmode>The last three keywords listed above are
+ only provided for completeness, and are rarely necessary, as
+ dedicated input controls exist for their usual use cases (as
+ described in the table above).</p>
+
+ <p>User agents <span class=impl>must</span> all support the <dfn id=attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>Default</dfn> input mode
+ state, which corresponds to the user agent's default input modality.
+ <span class=impl>This specification does not define how the user
+ agent's default modality is to operate.</span> The <i>missing value
default</i> is the <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>default input mode</a>
state.</p>
@@ -102716,6 +102811,22 @@
<td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a>
<td> Whether the element is inert
<td> <a href=#boolean-attribute>Boolean attribute</a>
+ <tr><th> <code title="">inputmode</code>
+ <td> <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>input</a></code>;
+ <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>textarea</a></code>
+ <td> Hint for selecting an input modality
+ <td> <code title=attr-fe-inputmode-keyword-verbatim><a href=#attr-fe-inputmode-keyword-verbatim>verbatim</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin><a href=#attr-fe-inputmode-keyword-latin>latin</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin-name><a href=#attr-fe-inputmode-keyword-latin-name>latin-name</a></code>;
+ <code title=attr-fe-inputmode-keyword-latin-prose><a href=#attr-fe-inputmode-keyword-latin-prose>latin-prose</a></code>;
+ <code title=attr-fe-inputmode-keyword-full-width-latin><a href=#attr-fe-inputmode-keyword-full-width-latin>full-width-latin</a></code>;
+ <code title=attr-fe-inputmode-keyword-kana><a href=#attr-fe-inputmode-keyword-kana>kana</a></code>;
+ <code title=attr-fe-inputmode-keyword-katakana><a href=#attr-fe-inputmode-keyword-katakana>katakana</a></code>;
+ <!-- <code title="attr-fe-inputmode-keyword-half-width-katakana">half-width-katakana</code>; -->
+ <code title=attr-fe-inputmode-keyword-numeric><a href=#attr-fe-inputmode-keyword-numeric>numeric</a></code>;
+ <code title=attr-fe-inputmode-keyword-tel><a href=#attr-fe-inputmode-keyword-tel>tel</a></code>;
+ <code title=attr-fe-inputmode-keyword-email><a href=#attr-fe-inputmode-keyword-email>email</a></code>;
+ <code title=attr-fe-inputmode-keyword-url><a href=#attr-fe-inputmode-keyword-url>url</a></code>
<tr><th> <code title="">ismap</code>
<td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
<td> Whether the image is a server-side image map
Modified: source
===================================================================
--- source 2012-08-01 23:38:11 UTC (rev 7222)
+++ source 2012-08-02 00:17:05 UTC (rev 7223)
@@ -52478,7 +52478,6 @@
<pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre>
-
<h5>Client-side form validation</h5>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
@@ -52554,6 +52553,89 @@
</form></pre>
+
+ <h5>Enabling client-side automatic filling of form controls</h5>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p>Some browsers attempt to aid the user by automatically filling
+ form controls rather than having 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>
+
+ <p>To help the user agent with this, we can tell it what the field
+ is using the <code title="attr-fe-autocomplete">autocomplete</code>
+ attribute. 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>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required <strong>autocomplete="shipping name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" <strong>autocomplete="shipping tel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" <strong>autocomplete="shipping email"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+ <h5>Improving the user experience on mobile devices</h5>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p>Some devices, in particular those with on-screen keyboards and
+ those in locales with languages with many characters (e.g.
+ Japanese), can provide the user with multiple input modalities. For
+ example, when typing in a credit card number the user may wish to
+ only see keys for digits 0-9, while when typing in their name they
+ may wish to see a form field that by default capitalises each
+ word.</p>
+
+ <p>Using the <code title="attr-fe-inputmode">inputmode</code>
+ attribute we can select appropriate input modalities:</p>
+
+ <pre><form method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi">
+ <p><label>Customer name: <input name="custname" required autocomplete="shipping name" <strong>inputmode="latin-name"</strong>></label></p>
+ <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
+ <p><label>E-mail address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size value="small"> Small </label></p>
+ <p><label> <input type=radio name=size value="medium"> Medium </label></p>
+ <p><label> <input type=radio name=size value="large"> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
+ <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
+ <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
+ <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
+ <p><label>Delivery instructions: <textarea name="comments" maxlength=1000 <strong>inputmode="latin-prose"</strong>></textarea></label></p>
+ <p><button>Submit order</button></p>
+</form></pre>
+
+
+
<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-->
@@ -63853,6 +63935,12 @@
<td> Latin-script input in the user's preferred language(s), with some typing aids enabled (e.g. text prediction). Intended for human-to-computer communications, e.g. free-form text search fields.
<tr>
+ <td> <dfn title="attr-fe-inputmode-keyword-latin-name"><code>latin-name</code></dfn>
+ <td> <dfn title="attr-fe-inputmode-state-latin-name">Latin Name</dfn>
+ <td> <span title="attr-fe-inputmode-state-latin">Latin Text</span>
+ <td> Latin-script input in the user's preferred language(s), with typing aids intended for entering human names enabled (e.g. text prediction from the user's contact list and automatic capitalisation at every word). Intended for situations such as customer name fields.
+
+ <tr>
<td> <dfn title="attr-fe-inputmode-keyword-latin-prose"><code>latin-prose</code></dfn>
<td> <dfn title="attr-fe-inputmode-state-latin-prose">Latin Prose</dfn>
<td> <span title="attr-fe-inputmode-state-latin">Latin Text</span>
@@ -63888,33 +63976,38 @@
<td> <dfn title="attr-fe-inputmode-keyword-numeric"><code>numeric</code></dfn>
<td> <dfn title="attr-fe-inputmode-state-numeric">Numeric</dfn>
<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 prices, dates, times.
+ <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>
- <td> <dfn title="attr-fe-inputmode-keyword-"><code>tel</code></dfn>
+ <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).
+ <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>
<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.
+ <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>
<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>
- <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".
+ <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"><input type=url></code>" instead.
</table>
+ <p id="avoid-inputmode">The last three keywords listed above are
+ only provided for completeness, and are rarely necessary, as
+ dedicated input controls exist for their usual use cases (as
+ described in the table above).</p>
+
<p>User agents <span class="impl">must</span> all support the <dfn
- title="attr-fe-inputmode-state-default">Default</dfn> input mode state,
- which corresponds to the user agent's default input modality. <span
- class="impl">This specification does not define how the user agent's
- default modality is to operate.</span> The <i>missing value
+ title="attr-fe-inputmode-state-default">Default</dfn> input mode
+ state, which corresponds to the user agent's default input modality.
+ <span class="impl">This specification does not define how the user
+ agent's default modality is to operate.</span> The <i>missing value
default</i> is the <span
title="attr-fe-inputmode-state-default">default input mode</span>
state.</p>
@@ -120219,6 +120312,23 @@
<td> Whether the element is inert
<td> <span>Boolean attribute</span>
<tr>
+ <th> <code title="">inputmode</code>
+ <td> <code title="attr-fe-inputmode">input</code>;
+ <code title="attr-fe-inputmode">textarea</code>
+ <td> Hint for selecting an input modality
+ <td> <code title="attr-fe-inputmode-keyword-verbatim">verbatim</code>;
+ <code title="attr-fe-inputmode-keyword-latin">latin</code>;
+ <code title="attr-fe-inputmode-keyword-latin-name">latin-name</code>;
+ <code title="attr-fe-inputmode-keyword-latin-prose">latin-prose</code>;
+ <code title="attr-fe-inputmode-keyword-full-width-latin">full-width-latin</code>;
+ <code title="attr-fe-inputmode-keyword-kana">kana</code>;
+ <code title="attr-fe-inputmode-keyword-katakana">katakana</code>;
+ <!-- <code title="attr-fe-inputmode-keyword-half-width-katakana">half-width-katakana</code>; -->
+ <code title="attr-fe-inputmode-keyword-numeric">numeric</code>;
+ <code title="attr-fe-inputmode-keyword-tel">tel</code>;
+ <code title="attr-fe-inputmode-keyword-email">email</code>;
+ <code title="attr-fe-inputmode-keyword-url">url</code>
+ <tr>
<th> <code title="">ismap</code>
<td> <code title="attr-img-ismap">img</code>
<td> Whether the image is a server-side image map
More information about the Commit-Watchers
mailing list