Skip to content
Permalink
Browse files

[giow] (0) Add inputmode=latin-name; add some introductory material f…

…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 committed Aug 2, 2012
1 parent b0bb24b commit dbfc7730012eb140f401a25246429a308be37b2a
Showing with 366 additions and 34 deletions.
  1. +123 −12 complete.html
  2. +123 −12 index
  3. +120 −10 source


<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> <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> <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> </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd> <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt> <dt>Multiple-page version:</dt>
<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=#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=#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=#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=#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-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> <li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
<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> <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> <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> <p><i>This section is non-normative.</i></p>
&lt;/form&gt;</pre> &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> <p><i>This section is non-normative.</i></p>


<td> <a href=#attr-fe-inputmode-state-verbatim title=attr-fe-inputmode-state-verbatim>Latin Verbatim</a> <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. <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> <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> <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> <td> <a href=#attr-fe-inputmode-state-latin title=attr-fe-inputmode-state-latin>Latin Text</a>
<tr><td> <dfn id=attr-fe-inputmode-keyword-numeric title=attr-fe-inputmode-keyword-numeric><code>numeric</code></dfn> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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, <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
which corresponds to the user agent's default input modality. <span class=impl>This specification does not define how the user agent's state, which corresponds to the user agent's default input modality.
default modality is to operate.</span> The <i>missing value <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> default</i> is the <a href=#attr-fe-inputmode-state-default title=attr-fe-inputmode-state-default>default input mode</a>
state.</p> state.</p>


<td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a> <td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a>
<td> Whether the element is inert <td> Whether the element is inert
<td> <a href=#boolean-attribute>Boolean attribute</a> <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> <tr><th> <code title="">ismap</code>
<td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></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 <td> Whether the image is a server-side image map

0 comments on commit dbfc773

Please sign in to comment.
You can’t perform that action at this time.