Skip to content

Commit

Permalink
[giow] (0) Add inputmode=latin-name; add some introductory material f…
Browse files Browse the repository at this point in the history 
…or autocomplete= and inputmode=; add inputmode= to the index; recommend against inputmode=email, tel, url.

Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@7223 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 2, 2012
1 parent b0bb24b commit dbfc773
Show file tree
Hide file tree
Showing 3 changed files with 366 additions and 34 deletions.
135 changes: 123 additions & 12 deletions complete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 &mdash; Last Updated 1 August 2012</h2>
<h2 class="no-num no-toc">Living Standard &mdash; 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>
Expand Down Expand Up @@ -666,7 +666,9 @@ <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 1 August 2012</h2
<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>
Expand Down Expand Up @@ -44904,7 +44906,6 @@ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10
<pre>custname=Denise+Lawrence&amp;custtel=555-321-8624&amp;custemail=&amp;size=medium&amp;topping=cheese&amp;topping=mushroom&amp;delivery=19%3A00&amp;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>
Expand Down Expand Up @@ -44979,7 +44980,90 @@ <h5 id=client-side-form-validation><span class=secno>4.10.1.4 </span>Client-side
&lt;/form&gt;</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>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi"&gt;
&lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required <strong>autocomplete="shipping name"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel" <strong>autocomplete="shipping tel"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" <strong>autocomplete="shipping email"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments" maxlength=1000&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</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>&lt;form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi"&gt;
&lt;p&gt;&lt;label&gt;Customer name: &lt;input name="custname" required autocomplete="shipping name" <strong>inputmode="latin-name"</strong>&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Telephone: &lt;input type=tel name="custtel" autocomplete="shipping tel"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;E-mail address: &lt;input type=email name="custemail" autocomplete="shipping email"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Size &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="small"&gt; Small &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="medium"&gt; Medium &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=radio name=size value="large"&gt; Large &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt; Pizza Toppings &lt;/legend&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="bacon"&gt; Bacon &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="cheese"&gt; Extra Cheese &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="onion"&gt; Onion &lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt; &lt;input type=checkbox name="topping" value="mushroom"&gt; Mushroom &lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;p&gt;&lt;label&gt;Preferred delivery time: &lt;input type=time min="11:00" max="21:00" step="900" name="delivery" required&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Delivery instructions: &lt;textarea name="comments" maxlength=1000 <strong>inputmode="latin-prose"</strong>&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit order&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;</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>

Expand Down Expand Up @@ -54715,6 +54799,11 @@ <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </s
<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>
Expand Down Expand Up @@ -54746,26 +54835,32 @@ <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </s
<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)">&lt;input type=number&gt;</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)">&lt;input type=tel&gt;</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)">&lt;input type=email&gt;</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)">&lt;input type=url&gt;</a></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>

</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
<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>

Expand Down Expand Up @@ -102716,6 +102811,22 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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
Expand Down
Loading

0 comments on commit dbfc773

Please sign in to comment.