[html5] r7198 - [giow] (0) First pass at an inputmode='' attribute based on actual research. Thi [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Jul 20 14:40:16 PDT 2012
Author: ianh
Date: 2012-07-20 14:40:14 -0700 (Fri, 20 Jul 2012)
New Revision: 7198
Modified:
complete.html
index
source
Log:
[giow] (0) First pass at an inputmode='' attribute based on actual research. This only handles Latin-script languages and Japanese, currently; if you want other languages supported, please e-mail the whatwg at whatwg.org mailing list with the relevant data. Wiki page: http://wiki.whatwg.org/wiki/Text_input_keyboard_mode_control
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-07-20 18:35:08 UTC (rev 7197)
+++ complete.html 2012-07-20 21:40:14 UTC (rev 7198)
@@ -696,16 +696,17 @@
<ol>
<li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
<li><a href=#the-dirname-attribute><span class=secno>4.10.7.3.2 </span>The <code title=attr-input-dirname>dirname</code> attribute</a></li>
- <li><a href=#the-list-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-list>list</code> attribute</a></li>
- <li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
- <li><a href=#the-size-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-size>size</code> attribute</a></li>
- <li><a href=#the-required-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-required>required</code> attribute</a></li>
- <li><a href=#the-multiple-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#the-pattern-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
- <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
- <li><a href=#the-step-attribute><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-step>step</code> attribute</a></li>
- <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
+ <li><a href=#the-inputmode-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-inputmode>inputmode</code> attribute</a></li>
+ <li><a href=#the-list-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-list>list</code> attribute</a></li>
+ <li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
+ <li><a href=#the-size-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-size>size</code> attribute</a></li>
+ <li><a href=#the-required-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-required>required</code> attribute</a></li>
+ <li><a href=#the-multiple-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
+ <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-pattern-attribute><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
+ <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
+ <li><a href=#the-step-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-step>step</code> attribute</a></li>
+ <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.3.13 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
<li><a href=#common-input-element-apis><span class=secno>4.10.7.4 </span>Common <code>input</code> element APIs</a></li>
<li><a href=#common-event-behaviors><span class=secno>4.10.7.5 </span>Common event behaviors</a></ol></li>
<li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
@@ -727,7 +728,8 @@
<li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
<li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
<li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></li>
- <li><a href=#submitting-element-directionality><span class=secno>4.10.19.7 </span>Submitting element directionality</a></ol></li>
+ <li><a href=#submitting-element-directionality><span class=secno>4.10.19.7 </span>Submitting element directionality</a></li>
+ <li><a href=#input-modalities><span class=secno>4.10.19.8 </span>Input modalities</a></ol></li>
<li><a href=#textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</a></li>
<li><a href=#constraints><span class=secno>4.10.21 </span>Constraints</a>
<ol>
@@ -45720,6 +45722,7 @@
<dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
<dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
<dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
+ <dd><code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code></dd>
<dd><code title=attr-input-list><a href=#attr-input-list>list</a></code></dd>
<dd><code title=attr-input-max><a href=#attr-input-max>max</a></code></dd>
<dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code></dd>
@@ -45756,6 +45759,7 @@
attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
attribute unsigned long <a href=#dom-input-height title=dom-input-height>height</a>;
attribute boolean <a href=#dom-input-indeterminate title=dom-input-indeterminate>indeterminate</a>;
+ attribute DOMString <a href=#dom-input-inputmode title=dom-input-inputMode>inputMode</a>;
readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-input-list title=dom-input-list>list</a>;
attribute DOMString <a href=#dom-input-max title=dom-input-max>max</a>;
attribute long <a href=#dom-input-maxlength title=dom-input-maxLength>maxLength</a>;
@@ -45906,7 +45910,7 @@
<td> A button
</table><p>The <i>missing value default</i> is the <a href="#text-(type=text)-state-and-search-state-(type=search)" title=attr-input-type-text>Text</a> state.</p>
- <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code tit
le=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>che
cked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and <code title=dom-input-list><a href=#dom-input-list>list</a></code> IDL attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
+ <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></c
ode>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and <code title=dom-input-list><a href=#dom-input-list>list</a></code> IDL attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
<code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
and <code title=dom-textarea/input-selectionDirection><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
IDL attributes, the
@@ -46213,6 +46217,30 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr><th> <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class=no> · <!-- URL, Telephone -->
+ <td class=no> · <!-- E-mail -->
+ <td class=no> · <!-- Password -->
+ <td class=no> · <!-- Date and Time -->
+<!-- <td class="no"> · Date -->
+<!-- <td class="no"> · Month -->
+<!-- <td class="no"> · Week -->
+<!-- <td class="no"> · Time -->
+ <td class=no> · <!-- Local Date and Time -->
+ <td class=no> · <!-- Number -->
+ <td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
+ <td class=no> · <!-- Checkbox -->
+<!-- <td class="no"> · Radio Button -->
+ <td class=no> · <!-- File Upload -->
+ <td class=no> · <!-- Submit Button -->
+ <td class=no> · <!-- Image Button -->
+ <td class=no> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
<tr><th> <code title=attr-input-list><a href=#attr-input-list>list</a></code>
<td class=no> · <!-- Hidden -->
<td class=yes> Yes <!-- Text -->
@@ -47076,7 +47104,9 @@
<p>The <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn> and
<dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes
must <a href=#reflect>reflect</a> the respective content attributes of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
+ same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
<a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>.</p>
@@ -47160,6 +47190,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -47261,6 +47292,7 @@
attributes, IDL attributes, and methods apply to the element:
<code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
<code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
+ <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -47395,6 +47427,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
@@ -47502,6 +47535,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
@@ -47786,6 +47820,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
@@ -47879,6 +47914,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
@@ -48070,6 +48106,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48249,6 +48286,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48404,6 +48442,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48560,6 +48599,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48714,6 +48754,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48865,6 +48906,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49039,6 +49081,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49229,6 +49272,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49386,6 +49430,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
@@ -49499,6 +49544,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49639,6 +49685,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49871,6 +49918,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49965,6 +50013,7 @@
<code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
<code class=no-backref title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50203,6 +50252,7 @@
<code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
<code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
<code class=no-backref title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50307,6 +50357,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50390,6 +50441,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50604,8 +50656,16 @@
</div>
- <h6 id=the-list-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+ <h6 id=the-inputmode-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code> attribute</h6>
+
+ <p>The <dfn id=attr-input-inputmode title=attr-input-inputmode><code>inputmode</code></dfn> attribute,
+ when it applies, is a <a href=#attr-inputmode title=attr-inputmode>form control
+ <code title="">inputmode</code> attribute</a>.</p>
+
+
+ <h6 id=the-list-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+
<p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
attribute is used to identify an element that lists predefined
options suggested to the user.</p>
@@ -50752,7 +50812,7 @@
- <h6 id=the-readonly-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
+ <h6 id=the-readonly-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
<p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
@@ -50801,7 +50861,7 @@
- <h6 id=the-size-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
+ <h6 id=the-size-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
<p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
attribute gives the number of characters that, in a visual
@@ -50827,7 +50887,7 @@
- <h6 id=the-required-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
+ <h6 id=the-required-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
<p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
@@ -50870,7 +50930,7 @@
</div>
- <h6 id=the-multiple-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
+ <h6 id=the-multiple-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
<p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
@@ -50923,7 +50983,7 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
@@ -50949,7 +51009,7 @@
- <h6 id=the-pattern-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
+ <h6 id=the-pattern-attribute><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
<p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
attribute specifies a regular expression against which the control's
@@ -51037,7 +51097,7 @@
- <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
+ <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
<p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
the allowed range of values for the element.</p>
@@ -51118,7 +51178,7 @@
</div>
- <h6 id=the-step-attribute><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
+ <h6 id=the-step-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
<p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
attribute indicates the granularity that is expected (and required)
@@ -51205,7 +51265,7 @@
- <h6 id=the-placeholder-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
+ <h6 id=the-placeholder-attribute><span class=secno>4.10.7.3.13 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
<!-- similar text in the <textarea> section -->
@@ -52648,6 +52708,7 @@
<dd><code title=attr-textarea-dirname><a href=#attr-textarea-dirname>dirname</a></code></dd>
<dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
<dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
+ <dd><code title=attr-textarea-inputmode><a href=#attr-textarea-inputmode>inputmode</a></code></dd>
<dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code></dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
<dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code></dd>
@@ -52663,6 +52724,7 @@
attribute DOMString <a href=#dom-textarea-dirname title=dom-textarea-dirName>dirName</a>;
attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
readonly attribute <a href=#htmlformelement>HTMLFormElement</a>? <a href=#dom-fae-form title=dom-fae-form>form</a>;
+ attribute DOMString <a href=#dom-textarea-inputmode title=dom-textarea-inputMode>inputMode</a>;
attribute long <a href=#dom-textarea-maxlength title=dom-textarea-maxLength>maxLength</a>;
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-textarea-placeholder title=dom-textarea-placeholder>placeholder</a>;
@@ -52941,6 +53003,9 @@
attribute is a <a href=#form-control-dirname-attribute>form control <code title="">dirname</code>
attribute</a>.</p>
+ <p>The <dfn id=attr-textarea-inputmode title=attr-textarea-inputmode><code>inputmode</code></dfn>
+ attribute is a <a href=#attr-inputmode title=attr-inputmode>form control <code title="">inputmode</code> attribute</a>.</p>
+
<p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its
<a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
@@ -52978,7 +53043,9 @@
20. The <code title=dom-textarea-rows><a href=#dom-textarea-rows>rows</a></code> attribute's
default value is 2. The <dfn id=dom-textarea-dirname title=dom-textarea-dirName><code>dirName</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-dirname><a href=#attr-textarea-dirname>dirname</a></code> content attribute. The
- <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
+ <dfn id=dom-textarea-inputmode title=dom-textarea-inputMode><code>inputMode</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-inputmode><a href=#attr-textarea-inputmode>inputmode</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> content attribute,
<a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>. The <dfn id=dom-textarea-readonly title=dom-textarea-readOnly><code>readOnly</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> content
@@ -54595,6 +54662,118 @@
string.</p>
+
+ <h5 id=input-modalities><span class=secno>4.10.19.8 </span>Input modalities</h5>
+
+ <p>A <dfn id=attr-inputmode title=attr-inputmode>form control <code title="">inputmode</code> attribute</dfn> on a form control element
+ is an <a href=#enumerated-attribute>enumerated attribute</a> that specifies what kind of
+ input mechanism would be most helpful for users entering content
+ into the form control.</p>
+
+ <div class=impl>
+
+ <p>User agents must recognise all the keywords and corresponding
+ states given below, but need not support all of the corresponding
+ states. If a keyword's state is not supported, the user agent must
+ act as if the keyword instead mapped to the given state's fallback
+ state, as defined below. This fallback behaviour is transitive.</p>
+
+ <p class=note>For example, if a user agent with a QWERTY keyboard
+ layout does not support text prediction and automatic
+ capitalization, then it could treat the <code title=attr-inputmode-keyword-latin-prose><a href=#attr-inputmode-keyword-latin-prose>latin-prose</a></code>
+ keyword in the same way as the <code title=attr-inputmode-keyword-verbatim><a href=#attr-inputmode-keyword-verbatim>verbatim</a></code> keyword,
+ following the chain <a href=#attr-inputmode-state-latin-prose title=attr-inputmode-state-latin-prose>Latin Prose</a> →
+ <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</a> →
+ <a href=#attr-inputmode-state-verbatim title=attr-inputmode-state-verbatim>Latin
+ Verbatim</a>.</p>
+
+ </div>
+
+ <p>The possible keywords and states for the attributes are listed in
+ the following table. The keywords are listed in the first column.
+ Each maps to the state given in the cell in the second column of
+ that keyword's row, and that state has the fallback state given in
+ the cell in the third column of that row.</p>
+
+ <table><thead><tr><th> Keyword
+ <th> State
+ <th> Fallback state
+ <th> Description
+
+ <tbody><tr><td> <dfn id=attr-inputmode-keyword-verbatim title=attr-inputmode-keyword-verbatim><code>verbatim</code></dfn>
+ <td> <dfn id=attr-inputmode-state-verbatim title=attr-inputmode-state-verbatim>Latin Verbatim</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-inputmode-state-default>Default</a>
+ <td> Alphanumeric Latin-script input of non-prose content, e.g. usernames, passwords, product codes.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-latin title=attr-inputmode-keyword-latin><code>latin</code></dfn>
+ <td> <dfn id=attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</dfn>
+ <td> <a href=#attr-inputmode-state-verbatim title=attr-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-inputmode-keyword-latin-prose title=attr-inputmode-keyword-latin-prose><code>latin-prose</code></dfn>
+ <td> <dfn id=attr-inputmode-state-latin-prose title=attr-inputmode-state-latin-prose>Latin Prose</dfn>
+ <td> <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</a>
+ <td> Latin-script input in the user's preferred language(s), with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for situations such as e-mails and instant messaging.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-full-width-latin title=attr-inputmode-keyword-full-width-latin><code>full-width-latin</code></dfn>
+ <td> <dfn id=attr-inputmode-state-full-width-latin title=attr-inputmode-state-full-width-latin>Full-width Latin</dfn>
+ <td> <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Prose</a>
+ <td> Latin-script input in the user's secondary language(s), using full-width characters, with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for latin text embedded inside CJK text.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-kana title=attr-inputmode-keyword-kana><code>kana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-kana title=attr-inputmode-state-kana>Kana</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-inputmode-state-default>Default</a>
+ <td> Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-katakana title=attr-inputmode-keyword-katakana><code>katakana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-katakana title=attr-inputmode-state-katakana>Katakana</dfn>
+ <td> <a href=#attr-inputmode-state-kana title=attr-inputmode-state-kana>Kana</a>
+ <td> Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-half-width-katakana title=attr-inputmode-keyword-half-width-katakana><code>half-width-katakana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-half-width-katakana title=attr-inputmode-state-half-width-katakana>Half-width Katakana</dfn>
+ <td> <a href=#attr-inputmode-state-katakana title=attr-inputmode-state-katakana>Katakana</a>
+ <td> Katakana input, using half-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-numeric title=attr-inputmode-keyword-numeric><code>numeric</code></dfn>
+ <td> <dfn id=attr-inputmode-state-numeric title=attr-inputmode-state-numeric>Numeric</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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.
+
+ <tr><td> <dfn id=attr-inputmode-keyword title=attr-inputmode-keyword-><code>tel</code></dfn>
+ <td> <dfn id=attr-inputmode-state-telephone title=attr-inputmode-state-telephone>Telephone</dfn>
+ <td> <a href=#attr-inputmode-state-numeric title=attr-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).
+
+ <tr><td> <dfn id=attr-inputmode-keyword-email title=attr-inputmode-keyword-email><code>email</code></dfn>
+ <td> <dfn id=attr-inputmode-state-email title=attr-inputmode-state-email>E-mail</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-url title=attr-inputmode-keyword-url><code>url</code></dfn>
+ <td> <dfn id=attr-inputmode-state-url title=attr-inputmode-state-url>URL</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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".
+
+ </table><p>User agents <span class=impl>must</span> all support the <dfn id=attr-inputmode-state-default title=attr-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-inputmode-state-default title=attr-inputmode-state-default>default input mode</a>
+ state.</p>
+
+ <div class=impl>
+
+ <p>User agents should use the input modality corresponding to the
+ state of the <code title=attr-inputmode><a href=#attr-inputmode>inputmode</a></code> attribute
+ when exposing a user interface for editing the value of a form
+ control to which the attribute applies. This value can change
+ dynamically; user agents should update their interface as the
+ attribute changes state, unless that would go against the user's
+ wishes.</p>
+
+ </div>
+
+
<!--TOPIC:DOM APIs-->
<h4 id=textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</h4>
Modified: index
===================================================================
--- index 2012-07-20 18:35:08 UTC (rev 7197)
+++ index 2012-07-20 21:40:14 UTC (rev 7198)
@@ -696,16 +696,17 @@
<ol>
<li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
<li><a href=#the-dirname-attribute><span class=secno>4.10.7.3.2 </span>The <code title=attr-input-dirname>dirname</code> attribute</a></li>
- <li><a href=#the-list-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-list>list</code> attribute</a></li>
- <li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
- <li><a href=#the-size-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-size>size</code> attribute</a></li>
- <li><a href=#the-required-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-required>required</code> attribute</a></li>
- <li><a href=#the-multiple-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#the-pattern-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
- <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
- <li><a href=#the-step-attribute><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-step>step</code> attribute</a></li>
- <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
+ <li><a href=#the-inputmode-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-inputmode>inputmode</code> attribute</a></li>
+ <li><a href=#the-list-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-list>list</code> attribute</a></li>
+ <li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
+ <li><a href=#the-size-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-size>size</code> attribute</a></li>
+ <li><a href=#the-required-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-required>required</code> attribute</a></li>
+ <li><a href=#the-multiple-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
+ <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-pattern-attribute><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
+ <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
+ <li><a href=#the-step-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-step>step</code> attribute</a></li>
+ <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.3.13 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
<li><a href=#common-input-element-apis><span class=secno>4.10.7.4 </span>Common <code>input</code> element APIs</a></li>
<li><a href=#common-event-behaviors><span class=secno>4.10.7.5 </span>Common event behaviors</a></ol></li>
<li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
@@ -727,7 +728,8 @@
<li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
<li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
<li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></li>
- <li><a href=#submitting-element-directionality><span class=secno>4.10.19.7 </span>Submitting element directionality</a></ol></li>
+ <li><a href=#submitting-element-directionality><span class=secno>4.10.19.7 </span>Submitting element directionality</a></li>
+ <li><a href=#input-modalities><span class=secno>4.10.19.8 </span>Input modalities</a></ol></li>
<li><a href=#textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</a></li>
<li><a href=#constraints><span class=secno>4.10.21 </span>Constraints</a>
<ol>
@@ -45720,6 +45722,7 @@
<dd><code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code></dd>
<dd><code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code></dd>
<dd><code title=attr-dim-height><a href=#attr-dim-height>height</a></code></dd>
+ <dd><code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code></dd>
<dd><code title=attr-input-list><a href=#attr-input-list>list</a></code></dd>
<dd><code title=attr-input-max><a href=#attr-input-max>max</a></code></dd>
<dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code></dd>
@@ -45756,6 +45759,7 @@
attribute DOMString <a href=#dom-fs-formtarget title=dom-fs-formTarget>formTarget</a>;
attribute unsigned long <a href=#dom-input-height title=dom-input-height>height</a>;
attribute boolean <a href=#dom-input-indeterminate title=dom-input-indeterminate>indeterminate</a>;
+ attribute DOMString <a href=#dom-input-inputmode title=dom-input-inputMode>inputMode</a>;
readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-input-list title=dom-input-list>list</a>;
attribute DOMString <a href=#dom-input-max title=dom-input-max>max</a>;
attribute long <a href=#dom-input-maxlength title=dom-input-maxLength>maxLength</a>;
@@ -45906,7 +45910,7 @@
<td> A button
</table><p>The <i>missing value default</i> is the <a href="#text-(type=text)-state-and-search-state-(type=search)" title=attr-input-type-text>Text</a> state.</p>
- <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code tit
le=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>che
cked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and <code title=dom-input-list><a href=#dom-input-list>list</a></code> IDL attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
+ <p>Which of the <code title=attr-input-accept><a href=#attr-input-accept>accept</a></code>, <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>, <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>, <code title=attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code title=attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code title=attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, <code title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>, <code title=attr-dim-height><a href=#attr-dim-height>height</a></code>, <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></c
ode>, <code title=attr-input-list><a href=#attr-input-list>list</a></code>, <code title=attr-input-max><a href=#attr-input-max>max</a></code>, <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code title=attr-input-min><a href=#attr-input-min>min</a></code>, <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>, <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>, <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>, <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>, <code title=attr-input-required><a href=#attr-input-required>required</a></code>, <code title=attr-input-size><a href=#attr-input-size>size</a></code>, <code title=attr-input-src><a href=#attr-input-src>src</a></code>, <code title=attr-input-step><a href=#attr-input-step>step</a></code>, and <code title=attr-dim-width><a href=#attr-dim-width>width</a></code>
content attributes, the <code title=dom-input-checked><a href=#dom-input-checked>checked</a></code>, <code title=dom-input-files><a href=#dom-input-files>files</a></code>, <code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>, <code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and <code title=dom-input-list><a href=#dom-input-list>list</a></code> IDL attributes, the <code title=dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> method, the <code title=dom-textarea/input-selectionStart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code>,
<code title=dom-textarea/input-selectionEnd><a href=#dom-textarea/input-selectionend>selectionEnd</a></code>,
and <code title=dom-textarea/input-selectionDirection><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
IDL attributes, the
@@ -46213,6 +46217,30 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr><th> <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class=no> · <!-- URL, Telephone -->
+ <td class=no> · <!-- E-mail -->
+ <td class=no> · <!-- Password -->
+ <td class=no> · <!-- Date and Time -->
+<!-- <td class="no"> · Date -->
+<!-- <td class="no"> · Month -->
+<!-- <td class="no"> · Week -->
+<!-- <td class="no"> · Time -->
+ <td class=no> · <!-- Local Date and Time -->
+ <td class=no> · <!-- Number -->
+ <td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
+ <td class=no> · <!-- Checkbox -->
+<!-- <td class="no"> · Radio Button -->
+ <td class=no> · <!-- File Upload -->
+ <td class=no> · <!-- Submit Button -->
+ <td class=no> · <!-- Image Button -->
+ <td class=no> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
<tr><th> <code title=attr-input-list><a href=#attr-input-list>list</a></code>
<td class=no> · <!-- Hidden -->
<td class=yes> Yes <!-- Text -->
@@ -47076,7 +47104,9 @@
<p>The <dfn id=dom-input-autocomplete title=dom-input-autocomplete><code>autocomplete</code></dfn> and
<dfn id=dom-input-type title=dom-input-type><code>type</code></dfn> IDL attributes
must <a href=#reflect>reflect</a> the respective content attributes of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
+ same name, <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-inputmode title=dom-input-inputmode><code>inputMode</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-input-maxlength title=dom-input-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> content attribute,
<a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>.</p>
@@ -47160,6 +47190,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -47261,6 +47292,7 @@
attributes, IDL attributes, and methods apply to the element:
<code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
<code title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
+ <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -47395,6 +47427,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
@@ -47502,6 +47535,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
@@ -47786,6 +47820,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
<code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
@@ -47879,6 +47914,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
@@ -48070,6 +48106,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48249,6 +48286,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48404,6 +48442,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48560,6 +48599,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48714,6 +48754,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -48865,6 +48906,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49039,6 +49081,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49229,6 +49272,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
@@ -49386,6 +49430,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
<code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
@@ -49499,6 +49544,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49639,6 +49685,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49871,6 +49918,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -49965,6 +50013,7 @@
<code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
<code class=no-backref title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50203,6 +50252,7 @@
<code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
<code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
<code class=no-backref title=attr-input-dirname><a href=#attr-input-dirname>dirname</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50307,6 +50357,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50390,6 +50441,7 @@
<code class=no-backref title=attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>,
<code class=no-backref title=attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>,
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
+ <code class=no-backref title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code>,
<code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
<code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
<code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
@@ -50604,8 +50656,16 @@
</div>
- <h6 id=the-list-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+ <h6 id=the-inputmode-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-inputmode><a href=#attr-input-inputmode>inputmode</a></code> attribute</h6>
+
+ <p>The <dfn id=attr-input-inputmode title=attr-input-inputmode><code>inputmode</code></dfn> attribute,
+ when it applies, is a <a href=#attr-inputmode title=attr-inputmode>form control
+ <code title="">inputmode</code> attribute</a>.</p>
+
+
+ <h6 id=the-list-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+
<p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
attribute is used to identify an element that lists predefined
options suggested to the user.</p>
@@ -50752,7 +50812,7 @@
- <h6 id=the-readonly-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
+ <h6 id=the-readonly-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
<p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
@@ -50801,7 +50861,7 @@
- <h6 id=the-size-attribute><span class=secno>4.10.7.3.5 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
+ <h6 id=the-size-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
<p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
attribute gives the number of characters that, in a visual
@@ -50827,7 +50887,7 @@
- <h6 id=the-required-attribute><span class=secno>4.10.7.3.6 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
+ <h6 id=the-required-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
<p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
@@ -50870,7 +50930,7 @@
</div>
- <h6 id=the-multiple-attribute><span class=secno>4.10.7.3.7 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
+ <h6 id=the-multiple-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
<p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
@@ -50923,7 +50983,7 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.8 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
@@ -50949,7 +51009,7 @@
- <h6 id=the-pattern-attribute><span class=secno>4.10.7.3.9 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
+ <h6 id=the-pattern-attribute><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
<p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
attribute specifies a regular expression against which the control's
@@ -51037,7 +51097,7 @@
- <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.3.10 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
+ <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
<p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
the allowed range of values for the element.</p>
@@ -51118,7 +51178,7 @@
</div>
- <h6 id=the-step-attribute><span class=secno>4.10.7.3.11 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
+ <h6 id=the-step-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
<p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
attribute indicates the granularity that is expected (and required)
@@ -51205,7 +51265,7 @@
- <h6 id=the-placeholder-attribute><span class=secno>4.10.7.3.12 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
+ <h6 id=the-placeholder-attribute><span class=secno>4.10.7.3.13 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
<!-- similar text in the <textarea> section -->
@@ -52648,6 +52708,7 @@
<dd><code title=attr-textarea-dirname><a href=#attr-textarea-dirname>dirname</a></code></dd>
<dd><code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code></dd>
<dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
+ <dd><code title=attr-textarea-inputmode><a href=#attr-textarea-inputmode>inputmode</a></code></dd>
<dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code></dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
<dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code></dd>
@@ -52663,6 +52724,7 @@
attribute DOMString <a href=#dom-textarea-dirname title=dom-textarea-dirName>dirName</a>;
attribute boolean <a href=#dom-fe-disabled title=dom-fe-disabled>disabled</a>;
readonly attribute <a href=#htmlformelement>HTMLFormElement</a>? <a href=#dom-fae-form title=dom-fae-form>form</a>;
+ attribute DOMString <a href=#dom-textarea-inputmode title=dom-textarea-inputMode>inputMode</a>;
attribute long <a href=#dom-textarea-maxlength title=dom-textarea-maxLength>maxLength</a>;
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-textarea-placeholder title=dom-textarea-placeholder>placeholder</a>;
@@ -52941,6 +53003,9 @@
attribute is a <a href=#form-control-dirname-attribute>form control <code title="">dirname</code>
attribute</a>.</p>
+ <p>The <dfn id=attr-textarea-inputmode title=attr-textarea-inputmode><code>inputmode</code></dfn>
+ attribute is a <a href=#attr-inputmode title=attr-inputmode>form control <code title="">inputmode</code> attribute</a>.</p>
+
<p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
explicitly associate the <code><a href=#the-textarea-element>textarea</a></code> element with its
<a href=#form-owner>form owner</a>. The <code title=attr-fe-name><a href=#attr-fe-name>name</a></code>
@@ -52978,7 +53043,9 @@
20. The <code title=dom-textarea-rows><a href=#dom-textarea-rows>rows</a></code> attribute's
default value is 2. The <dfn id=dom-textarea-dirname title=dom-textarea-dirName><code>dirName</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-dirname><a href=#attr-textarea-dirname>dirname</a></code> content attribute. The
- <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
+ <dfn id=dom-textarea-inputmode title=dom-textarea-inputMode><code>inputMode</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-inputmode><a href=#attr-textarea-inputmode>inputmode</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>. The <dfn id=dom-textarea-maxlength title=dom-textarea-maxLength><code>maxLength</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> content attribute,
<a href=#limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>. The <dfn id=dom-textarea-readonly title=dom-textarea-readOnly><code>readOnly</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> content
@@ -54595,6 +54662,118 @@
string.</p>
+
+ <h5 id=input-modalities><span class=secno>4.10.19.8 </span>Input modalities</h5>
+
+ <p>A <dfn id=attr-inputmode title=attr-inputmode>form control <code title="">inputmode</code> attribute</dfn> on a form control element
+ is an <a href=#enumerated-attribute>enumerated attribute</a> that specifies what kind of
+ input mechanism would be most helpful for users entering content
+ into the form control.</p>
+
+ <div class=impl>
+
+ <p>User agents must recognise all the keywords and corresponding
+ states given below, but need not support all of the corresponding
+ states. If a keyword's state is not supported, the user agent must
+ act as if the keyword instead mapped to the given state's fallback
+ state, as defined below. This fallback behaviour is transitive.</p>
+
+ <p class=note>For example, if a user agent with a QWERTY keyboard
+ layout does not support text prediction and automatic
+ capitalization, then it could treat the <code title=attr-inputmode-keyword-latin-prose><a href=#attr-inputmode-keyword-latin-prose>latin-prose</a></code>
+ keyword in the same way as the <code title=attr-inputmode-keyword-verbatim><a href=#attr-inputmode-keyword-verbatim>verbatim</a></code> keyword,
+ following the chain <a href=#attr-inputmode-state-latin-prose title=attr-inputmode-state-latin-prose>Latin Prose</a> →
+ <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</a> →
+ <a href=#attr-inputmode-state-verbatim title=attr-inputmode-state-verbatim>Latin
+ Verbatim</a>.</p>
+
+ </div>
+
+ <p>The possible keywords and states for the attributes are listed in
+ the following table. The keywords are listed in the first column.
+ Each maps to the state given in the cell in the second column of
+ that keyword's row, and that state has the fallback state given in
+ the cell in the third column of that row.</p>
+
+ <table><thead><tr><th> Keyword
+ <th> State
+ <th> Fallback state
+ <th> Description
+
+ <tbody><tr><td> <dfn id=attr-inputmode-keyword-verbatim title=attr-inputmode-keyword-verbatim><code>verbatim</code></dfn>
+ <td> <dfn id=attr-inputmode-state-verbatim title=attr-inputmode-state-verbatim>Latin Verbatim</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-inputmode-state-default>Default</a>
+ <td> Alphanumeric Latin-script input of non-prose content, e.g. usernames, passwords, product codes.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-latin title=attr-inputmode-keyword-latin><code>latin</code></dfn>
+ <td> <dfn id=attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</dfn>
+ <td> <a href=#attr-inputmode-state-verbatim title=attr-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-inputmode-keyword-latin-prose title=attr-inputmode-keyword-latin-prose><code>latin-prose</code></dfn>
+ <td> <dfn id=attr-inputmode-state-latin-prose title=attr-inputmode-state-latin-prose>Latin Prose</dfn>
+ <td> <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Text</a>
+ <td> Latin-script input in the user's preferred language(s), with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for situations such as e-mails and instant messaging.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-full-width-latin title=attr-inputmode-keyword-full-width-latin><code>full-width-latin</code></dfn>
+ <td> <dfn id=attr-inputmode-state-full-width-latin title=attr-inputmode-state-full-width-latin>Full-width Latin</dfn>
+ <td> <a href=#attr-inputmode-state-latin title=attr-inputmode-state-latin>Latin Prose</a>
+ <td> Latin-script input in the user's secondary language(s), using full-width characters, with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for latin text embedded inside CJK text.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-kana title=attr-inputmode-keyword-kana><code>kana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-kana title=attr-inputmode-state-kana>Kana</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-inputmode-state-default>Default</a>
+ <td> Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-katakana title=attr-inputmode-keyword-katakana><code>katakana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-katakana title=attr-inputmode-state-katakana>Katakana</dfn>
+ <td> <a href=#attr-inputmode-state-kana title=attr-inputmode-state-kana>Kana</a>
+ <td> Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-half-width-katakana title=attr-inputmode-keyword-half-width-katakana><code>half-width-katakana</code></dfn>
+ <td> <dfn id=attr-inputmode-state-half-width-katakana title=attr-inputmode-state-half-width-katakana>Half-width Katakana</dfn>
+ <td> <a href=#attr-inputmode-state-katakana title=attr-inputmode-state-katakana>Katakana</a>
+ <td> Katakana input, using half-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-numeric title=attr-inputmode-keyword-numeric><code>numeric</code></dfn>
+ <td> <dfn id=attr-inputmode-state-numeric title=attr-inputmode-state-numeric>Numeric</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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.
+
+ <tr><td> <dfn id=attr-inputmode-keyword title=attr-inputmode-keyword-><code>tel</code></dfn>
+ <td> <dfn id=attr-inputmode-state-telephone title=attr-inputmode-state-telephone>Telephone</dfn>
+ <td> <a href=#attr-inputmode-state-numeric title=attr-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).
+
+ <tr><td> <dfn id=attr-inputmode-keyword-email title=attr-inputmode-keyword-email><code>email</code></dfn>
+ <td> <dfn id=attr-inputmode-state-email title=attr-inputmode-state-email>E-mail</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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.
+
+ <tr><td> <dfn id=attr-inputmode-keyword-url title=attr-inputmode-keyword-url><code>url</code></dfn>
+ <td> <dfn id=attr-inputmode-state-url title=attr-inputmode-state-url>URL</dfn>
+ <td> <a href=#attr-inputmode-state-default title=attr-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".
+
+ </table><p>User agents <span class=impl>must</span> all support the <dfn id=attr-inputmode-state-default title=attr-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-inputmode-state-default title=attr-inputmode-state-default>default input mode</a>
+ state.</p>
+
+ <div class=impl>
+
+ <p>User agents should use the input modality corresponding to the
+ state of the <code title=attr-inputmode><a href=#attr-inputmode>inputmode</a></code> attribute
+ when exposing a user interface for editing the value of a form
+ control to which the attribute applies. This value can change
+ dynamically; user agents should update their interface as the
+ attribute changes state, unless that would go against the user's
+ wishes.</p>
+
+ </div>
+
+
<!--TOPIC:DOM APIs-->
<h4 id=textFieldSelection><span class=secno>4.10.20 </span>APIs for the text field selections</h4>
Modified: source
===================================================================
--- source 2012-07-20 18:35:08 UTC (rev 7197)
+++ source 2012-07-20 21:40:14 UTC (rev 7198)
@@ -53436,6 +53436,7 @@
<dd><code title="attr-fs-formnovalidate">formnovalidate</code></dd>
<dd><code title="attr-fs-formtarget">formtarget</code></dd>
<dd><code title="attr-dim-height">height</code></dd>
+ <dd><code title="attr-input-inputmode">inputmode</code></dd>
<dd><code title="attr-input-list">list</code></dd>
<dd><code title="attr-input-max">max</code></dd>
<dd><code title="attr-input-maxlength">maxlength</code></dd>
@@ -53472,6 +53473,7 @@
attribute DOMString <span title="dom-fs-formTarget">formTarget</span>;
attribute unsigned long <span title="dom-input-height">height</span>;
attribute boolean <span title="dom-input-indeterminate">indeterminate</span>;
+ attribute DOMString <span title="dom-input-inputMode">inputMode</span>;
readonly attribute <span>HTMLElement</span>? <span title="dom-input-list">list</span>;
attribute DOMString <span title="dom-input-max">max</span>;
attribute long <span title="dom-input-maxLength">maxLength</span>;
@@ -53665,6 +53667,7 @@
title="attr-fs-formnovalidate">formnovalidate</code>, <code
title="attr-fs-formtarget">formtarget</code>, <code
title="attr-dim-height">height</code>, <code
+ title="attr-input-inputmode">inputmode</code>, <code
title="attr-input-list">list</code>, <code
title="attr-input-max">max</code>, <code
title="attr-input-maxlength">maxlength</code>, <code
@@ -54012,6 +54015,31 @@
<!-- <td class="no"> · Button -->
<tr>
+ <th> <code title="attr-input-inputmode">inputmode</code>
+ <td class="no"> · <!-- Hidden -->
+ <td class="yes"> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class="no"> · <!-- URL, Telephone -->
+ <td class="no"> · <!-- E-mail -->
+ <td class="no"> · <!-- Password -->
+ <td class="no"> · <!-- Date and Time -->
+<!-- <td class="no"> · Date -->
+<!-- <td class="no"> · Month -->
+<!-- <td class="no"> · Week -->
+<!-- <td class="no"> · Time -->
+ <td class="no"> · <!-- Local Date and Time -->
+ <td class="no"> · <!-- Number -->
+ <td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
+ <td class="no"> · <!-- Checkbox -->
+<!-- <td class="no"> · Radio Button -->
+ <td class="no"> · <!-- File Upload -->
+ <td class="no"> · <!-- Submit Button -->
+ <td class="no"> · <!-- Image Button -->
+ <td class="no"> · <!-- Reset Button -->
+<!-- <td class="no"> · Button -->
+
+ <tr>
<th> <code title="attr-input-list">list</code>
<td class="no"> · <!-- Hidden -->
<td class="yes"> Yes <!-- Text -->
@@ -54995,6 +55023,10 @@
<dfn title="dom-input-type"><code>type</code></dfn> IDL attributes
must <span>reflect</span> the respective content attributes of the
same name, <span>limited to only known values</span>. The <dfn
+ title="dom-input-inputmode"><code>inputMode</code></dfn> IDL
+ attribute must <span>reflect</span> the <code
+ title="attr-input-inputmode">inputmode</code> content attribute,
+ <span>limited to only known values</span>. The <dfn
title="dom-input-maxLength"><code>maxLength</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-input-maxlength">maxlength</code> content attribute,
@@ -55100,6 +55132,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -55217,6 +55250,7 @@
attributes, IDL attributes, and methods apply to the element:
<code title="attr-input-autocomplete">autocomplete</code>,
<code title="attr-input-dirname">dirname</code>,
+ <code title="attr-input-inputmode">inputmode</code>,
<code title="attr-input-list">list</code>,
<code title="attr-input-maxlength">maxlength</code>,
<code title="attr-input-pattern">pattern</code>,
@@ -55362,6 +55396,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-min">min</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
@@ -55477,6 +55512,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-min">min</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
@@ -55802,6 +55838,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-min">min</code>,
<code class="no-backref" title="attr-input-src">src</code>,
@@ -55901,6 +55938,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-min">min</code>,
@@ -56120,6 +56158,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -56325,6 +56364,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -56503,6 +56543,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -56684,6 +56725,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -56862,6 +56904,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -57030,6 +57073,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -57215,6 +57259,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -57431,6 +57476,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
@@ -57596,6 +57642,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
<code class="no-backref" title="attr-input-min">min</code>,
@@ -57727,6 +57774,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -57888,6 +57936,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58137,6 +58186,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58243,6 +58293,7 @@
<code class="no-backref" title="attr-input-checked">checked</code>,
<code class="no-backref" title="attr-input-dirname">dirname</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58552,6 +58603,7 @@
<code class="no-backref" title="attr-input-autocomplete">autocomplete</code>,
<code class="no-backref" title="attr-input-checked">checked</code>,
<code class="no-backref" title="attr-input-dirname">dirname</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58665,6 +58717,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58755,6 +58808,7 @@
<code class="no-backref" title="attr-fs-formnovalidate">formnovalidate</code>,
<code class="no-backref" title="attr-fs-formtarget">formtarget</code>,
<code class="no-backref" title="attr-dim-height">height</code>,
+ <code class="no-backref" title="attr-input-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-list">list</code>,
<code class="no-backref" title="attr-input-max">max</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
@@ -58993,6 +59047,15 @@
</div>
+
+ <h6>The <code title="attr-input-inputmode">inputmode</code> attribute</h6>
+
+ <p>The <dfn
+ title="attr-input-inputmode"><code>inputmode</code></dfn> attribute,
+ when it applies, is a <span title="attr-inputmode">form control
+ <code title="">inputmode</code> attribute</span>.</p>
+
+
<h6>The <code title="attr-input-list">list</code> attribute</h6>
<p>The <dfn title="attr-input-list"><code>list</code></dfn>
@@ -61439,6 +61502,7 @@
<dd><code title="attr-textarea-dirname">dirname</code></dd>
<dd><code title="attr-fe-disabled">disabled</code></dd>
<dd><code title="attr-fae-form">form</code></dd>
+ <dd><code title="attr-textarea-inputmode">inputmode</code></dd>
<dd><code title="attr-textarea-maxlength">maxlength</code></dd>
<dd><code title="attr-fe-name">name</code></dd>
<dd><code title="attr-textarea-placeholder">placeholder</code></dd>
@@ -61454,6 +61518,7 @@
attribute DOMString <span title="dom-textarea-dirName">dirName</span>;
attribute boolean <span title="dom-fe-disabled">disabled</span>;
readonly attribute <span>HTMLFormElement</span>? <span title="dom-fae-form">form</span>;
+ attribute DOMString <span title="dom-textarea-inputMode">inputMode</span>;
attribute long <span title="dom-textarea-maxLength">maxLength</span>;
attribute DOMString <span title="dom-fe-name">name</span>;
attribute DOMString <span title="dom-textarea-placeholder">placeholder</span>;
@@ -61786,6 +61851,11 @@
attribute is a <span>form control <code title="">dirname</code>
attribute</span>.</p>
+ <p>The <dfn
+ title="attr-textarea-inputmode"><code>inputmode</code></dfn>
+ attribute is a <span title="attr-inputmode">form control <code
+ title="">inputmode</code> attribute</span>.</p>
+
<p>The <code title="attr-fae-form">form</code> attribute is used to
explicitly associate the <code>textarea</code> element with its
<span>form owner</span>. The <code title="attr-fe-name">name</code>
@@ -61835,8 +61905,12 @@
title="dom-textarea-dirName"><code>dirName</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-textarea-dirname">dirname</code> content attribute. The
- <dfn title="dom-textarea-maxLength"><code>maxLength</code></dfn> IDL
+ <dfn title="dom-textarea-inputMode"><code>inputMode</code></dfn> IDL
attribute must <span>reflect</span> the <code
+ title="attr-textarea-inputmode">inputmode</code> content attribute,
+ <span>limited to only known values</span>. The <dfn
+ title="dom-textarea-maxLength"><code>maxLength</code></dfn> IDL
+ attribute must <span>reflect</span> the <code
title="attr-textarea-maxlength">maxlength</code> content attribute,
<span>limited to only non-negative numbers</span>. The <dfn
title="dom-textarea-readOnly"><code>readOnly</code></dfn> IDL
@@ -63744,6 +63818,144 @@
string.</p>
+
+ <h5>Input modalities</h5>
+
+ <p>A <dfn title="attr-inputmode">form control <code
+ title="">inputmode</code> attribute</dfn> on a form control element
+ is an <span>enumerated attribute</span> that specifies what kind of
+ input mechanism would be most helpful for users entering content
+ into the form control.</p>
+
+ <div class="impl">
+
+ <p>User agents must recognise all the keywords and corresponding
+ states given below, but need not support all of the corresponding
+ states. If a keyword's state is not supported, the user agent must
+ act as if the keyword instead mapped to the given state's fallback
+ state, as defined below. This fallback behaviour is transitive.</p>
+
+ <p class="note">For example, if a user agent with a QWERTY keyboard
+ layout does not support text prediction and automatic
+ capitalization, then it could treat the <code
+ title="attr-inputmode-keyword-latin-prose">latin-prose</code>
+ keyword in the same way as the <code
+ title="attr-inputmode-keyword-verbatim">verbatim</code> keyword,
+ following the chain <span
+ title="attr-inputmode-state-latin-prose">Latin Prose</span> →
+ <span title="attr-inputmode-state-latin">Latin Text</span> →
+ <span title="attr-inputmode-state-verbatim">Latin
+ Verbatim</span>.</p>
+
+ </div>
+
+ <p>The possible keywords and states for the attributes are listed in
+ the following table. The keywords are listed in the first column.
+ Each maps to the state given in the cell in the second column of
+ that keyword's row, and that state has the fallback state given in
+ the cell in the third column of that row.</p>
+
+ <table>
+
+ <thead>
+ <tr>
+ <th> Keyword
+ <th> State
+ <th> Fallback state
+ <th> Description
+
+ <tbody>
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-verbatim"><code>verbatim</code></dfn>
+ <td> <dfn title="attr-inputmode-state-verbatim">Latin Verbatim</dfn>
+ <td> <span title="attr-inputmode-state-default">Default</span>
+ <td> Alphanumeric Latin-script input of non-prose content, e.g. usernames, passwords, product codes.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-latin"><code>latin</code></dfn>
+ <td> <dfn title="attr-inputmode-state-latin">Latin Text</dfn>
+ <td> <span title="attr-inputmode-state-verbatim">Latin Verbatim</span>
+ <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-inputmode-keyword-latin-prose"><code>latin-prose</code></dfn>
+ <td> <dfn title="attr-inputmode-state-latin-prose">Latin Prose</dfn>
+ <td> <span title="attr-inputmode-state-latin">Latin Text</span>
+ <td> Latin-script input in the user's preferred language(s), with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for situations such as e-mails and instant messaging.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-full-width-latin"><code>full-width-latin</code></dfn>
+ <td> <dfn title="attr-inputmode-state-full-width-latin">Full-width Latin</dfn>
+ <td> <span title="attr-inputmode-state-latin">Latin Prose</span>
+ <td> Latin-script input in the user's secondary language(s), using full-width characters, with aggressive typing aids intended for human-to-human communications enabled (e.g. text prediction and automatic capitalisation at the start of sentences). Intended for latin text embedded inside CJK text.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-kana"><code>kana</code></dfn>
+ <td> <dfn title="attr-inputmode-state-kana">Kana</dfn>
+ <td> <span title="attr-inputmode-state-default">Default</span>
+ <td> Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-katakana"><code>katakana</code></dfn>
+ <td> <dfn title="attr-inputmode-state-katakana">Katakana</dfn>
+ <td> <span title="attr-inputmode-state-kana">Kana</span>
+ <td> Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-half-width-katakana"><code>half-width-katakana</code></dfn>
+ <td> <dfn title="attr-inputmode-state-half-width-katakana">Half-width Katakana</dfn>
+ <td> <span title="attr-inputmode-state-katakana">Katakana</span>
+ <td> Katakana input, using half-width characters, with support for converting to kanji. Intended for Japanese text input.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-numeric"><code>numeric</code></dfn>
+ <td> <dfn title="attr-inputmode-state-numeric">Numeric</dfn>
+ <td> <span title="attr-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.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-"><code>tel</code></dfn>
+ <td> <dfn title="attr-inputmode-state-telephone">Telephone</dfn>
+ <td> <span title="attr-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).
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-email"><code>email</code></dfn>
+ <td> <dfn title="attr-inputmode-state-email">E-mail</dfn>
+ <td> <span title="attr-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.
+
+ <tr>
+ <td> <dfn title="attr-inputmode-keyword-url"><code>url</code></dfn>
+ <td> <dfn title="attr-inputmode-state-url">URL</dfn>
+ <td> <span title="attr-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".
+
+ </table>
+
+ <p>User agents <span class="impl">must</span> all support the <dfn
+ title="attr-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-inputmode-state-default">default input mode</span>
+ state.</p>
+
+ <div class="impl">
+
+ <p>User agents should use the input modality corresponding to the
+ state of the <code title="attr-inputmode">inputmode</code> attribute
+ when exposing a user interface for editing the value of a form
+ control to which the attribute applies. This value can change
+ dynamically; user agents should update their interface as the
+ attribute changes state, unless that would go against the user's
+ wishes.</p>
+
+ </div>
+
+
<!--TOPIC:DOM APIs-->
<h4 id="textFieldSelection">APIs for the text field selections</h4>
More information about the Commit-Watchers
mailing list