[html5] r8206 - [cgiow] (0) Add minlength='', since data shows people are using pattern='' to wo [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Oct 3 11:22:07 PDT 2013
Author: ianh
Date: 2013-10-03 11:22:06 -0700 (Thu, 03 Oct 2013)
New Revision: 8206
Modified:
complete.html
index
source
Log:
[cgiow] (0) Add minlength='', since data shows people are using pattern='' to work around the absence of this feature.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=10053
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2013-10-02 19:50:55 UTC (rev 8205)
+++ complete.html 2013-10-03 18:22:06 UTC (rev 8206)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 October 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 3 October 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -723,7 +723,7 @@
<li><a href=#input-impl-notes><span class=secno>4.10.7.2 </span>Implemention notes regarding localization of form controls</a></li>
<li><a href=#common-input-element-attributes><span class=secno>4.10.7.3 </span>Common <code>input</code> element attributes</a>
<ol>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-maxlength-and-minlength-attributes><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength>maxlength</code> and <code title=attr-input-minlength>minlength</code> attributes</a></li>
<li><a href=#the-size-attribute><span class=secno>4.10.7.3.2 </span>The <code title=attr-input-size>size</code> attribute</a></li>
<li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
<li><a href=#the-required-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-required>required</code> attribute</a></li>
@@ -755,11 +755,12 @@
<li><a href=#naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1 </span>Naming form controls: the <code title=attr-fe-name>name</code> attribute</a></li>
<li><a href=#submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2 </span>Submitting element directionality: the <code title=attr-fe-dirname>dirname</code> attribute</a></li>
<li><a href=#limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3 </span>Limiting user input length: the <code title=attr-fe-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.4 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled>disabled</code> attribute</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.19.5 </span>Form submission</a></li>
- <li><a href=#autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.6 </span>Autofocusing a form control: the <code title=attr-fe-autofocus>autofocus</code> attribute</a></li>
- <li><a href=#input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </span>Input modalities: the <code title=attr-fe-inputmode>inputmode</code> attribute</a></li>
- <li><a href=#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.8 </span>Autofilling form controls: the <code title=attr-fe-autocomplete>autocomplete</code> attribute</a></ol></li>
+ <li><a href=#setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4 </span>Setting minimum input length requirements: the <code title=attr-fe-minlength>minlength</code> attribute</a></li>
+ <li><a href=#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled>disabled</code> attribute</a></li>
+ <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></li>
+ <li><a href=#autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.7 </span>Autofocusing a form control: the <code title=attr-fe-autofocus>autofocus</code> attribute</a></li>
+ <li><a href=#input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.8 </span>Input modalities: the <code title=attr-fe-inputmode>inputmode</code> attribute</a></li>
+ <li><a href=#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.9 </span>Autofilling form controls: the <code title=attr-fe-autocomplete>autocomplete</code> attribute</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>
@@ -45104,6 +45105,7 @@
<dd><code title=attr-input-max><a href=#attr-input-max>max</a></code> — Maximum value</dd>
<dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> — Maximum length of value</dd>
<dd><code title=attr-input-min><a href=#attr-input-min>min</a></code> — Minimum value</dd>
+ <dd><code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> — Minimum length of value</dd>
<dd><code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> — Whether to allow multiple values</dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code> — Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API</dd>
<dd><code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> — Pattern to be matched by the form control's value</dd>
@@ -45141,6 +45143,7 @@
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>;
attribute DOMString <a href=#dom-input-min title=dom-input-min>min</a>;
+ attribute long <a href=#dom-input-minlength title=dom-input-minLength>minLength</a>;
attribute boolean <a href=#dom-input-multiple title=dom-input-multiple>multiple</a>;
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-input-pattern title=dom-input-pattern>pattern</a>;
@@ -45287,7 +45290,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-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fe-dirname><a href=#attr-fe-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-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>, <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>,
+ <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-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fe-dirname><a href=#attr-fe-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-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>, <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-minlength><a href=#attr-input-minlength>minlength</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 <code title=dom-textarea/input-setRangeText><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods, the <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()<
/a></code> and <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
@@ -45711,6 +45714,30 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr><th> <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class=yes> Yes <!-- URL, Telephone -->
+ <td class=yes> Yes <!-- E-mail -->
+ <td class=yes> Yes <!-- 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-multiple><a href=#attr-input-multiple>multiple</a></code>
<td class=no> · <!-- Hidden -->
<td class=no> · <!-- Text -->
@@ -46452,6 +46479,8 @@
<a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-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>. The <dfn id=dom-input-minlength title=dom-input-minLength><code>minLength</code></dfn> IDL attribute must <a href=#reflect>reflect</a>
+ the <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> content attribute, <a href=#limited-to-only-non-negative-numbers>limited to only
non-negative numbers</a>.</p>
<p>The IDL attributes <dfn id=dom-input-width title=dom-input-width><code>width</code></dfn> and <dfn id=dom-input-height title=dom-input-height><code>height</code></dfn> must return the rendered width and height of
@@ -46523,6 +46552,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -46615,6 +46645,7 @@
<code title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -46709,6 +46740,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -46808,6 +46840,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47067,6 +47100,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47163,6 +47197,7 @@
attributes, IDL attributes, and methods <a href=#concept-input-apply title=concept-input-apply>apply</a> to the element:
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>,
<code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
+ <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47362,6 +47397,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47528,6 +47564,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47667,6 +47704,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47807,6 +47845,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47946,6 +47985,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48081,6 +48121,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48243,6 +48284,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -48422,6 +48464,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48589,6 +48632,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48695,6 +48739,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48823,6 +48868,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49042,6 +49088,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
<code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
@@ -49138,6 +49185,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49338,6 +49386,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49446,6 +49495,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49527,6 +49577,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49597,15 +49648,20 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-and-minlength-attributes><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> and <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> attributes</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn> attribute<span class=impl>, when it <a href=#concept-input-apply title=concept-input-apply>applies</a>,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl> controlled by the <code><a href=#the-input-element>input</a></code>
element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a></span>.</p>
+ <p>The <dfn id=attr-input-minlength title=attr-input-minlength><code>minlength</code></dfn> attribute<span class=impl>, when it <a href=#concept-input-apply title=concept-input-apply>applies</a>,</span> is a <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a><span class=impl> controlled by the <code><a href=#the-input-element>input</a></code>
+ element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a></span>.</p>
+
<p>If the <code><a href=#the-input-element>input</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed value length</a>, then the
<a href=#code-unit-length>code-unit length</a> of the value of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute must be equal to or less than the element's
<a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
<div class=example>
<p>The following extract shows how a messaging client's text entry could be arbitrarily
@@ -49616,8 +49672,17 @@
</div>
+ <div class=example>
+ <p>Here, a password is given a minimum length:</p>
+ <pre><p><label>Username: <input name=u required></label>
+<p><label>Password: <input name=p required minlength=12></label></pre>
+
+ </div>
+
+
+
<h6 id=the-size-attribute><span class=secno>4.10.7.3.2 </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
@@ -51672,6 +51737,7 @@
<dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code> — Associates the control with a <code><a href=#the-form-element>form</a></code> element</dd>
<dd><code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> — Hint for selecting an input modality</dd>
<dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> — Maximum length of value</dd>
+ <dd><code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code> — Minimum length of value</dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code> — Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API</dd>
<dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code> — User-visible label to be placed within the form control</dd>
<dd><code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> — Whether to allow the value to be edited by the user</dd>
@@ -51689,6 +51755,7 @@
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 long <a href=#dom-textarea-minlength title=dom-textarea-minLength>minLength</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>;
attribute boolean <a href=#dom-textarea-readonly title=dom-textarea-readOnly>readOnly</a>;
@@ -51938,6 +52005,12 @@
<code><a href=#textcontent>textContent</a></code> IDL attribute is equal to or less than the
element's <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+ <p>The <dfn id=attr-textarea-minlength title=attr-textarea-minlength><code>minlength</code></dfn>
+ attribute is a <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a> controlled by the
+ <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a>.</p>
+
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
<p>The <dfn id=attr-textarea-required title=attr-textarea-required><code>required</code></dfn> attribute
is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the user will
be required to enter a value before submitting the form.</p>
@@ -52032,6 +52105,8 @@
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-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-minlength title=dom-textarea-minLength><code>minLength</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</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
attribute.</p>
@@ -52089,6 +52164,31 @@
<pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p></pre>
+ <p>You can also give a minimum length. Here, a letter needs to be filled out by the user; a
+ template (which is shorter than the minimum length) is provided, but is insufficient to submit
+ the form:</p>
+
+ <pre><textarea required minlength="500">Dear Madam Speaker,
+
+Regarding your letter dated ...
+
+...
+
+Yours Sincerely,
+
+...</textarea></pre>
+
+ <p>A placeholder can be given as well, to suggest the basic form to the user, without providing
+ an explicit template:</p>
+
+ <pre><textarea placeholder="Dear Francine,
+
+They closed the parks this week, so we won't be able to
+meet your there. Should we just have dinner?
+
+Love,
+Daddy"></textarea></pre>
+
<p>To have the browser submit <a href=#the-directionality>the directionality</a> of
the element along with the value, the <code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute can be
specified:</p>
@@ -53290,6 +53390,7 @@
</div>
+<!--CLEANUP-->
<h5 id=submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2 </span>Submitting element directionality: the <code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute</h5>
<p>The <dfn id=attr-fe-dirname title=attr-fe-dirname><code>dirname</code></dfn> attribute
@@ -53325,7 +53426,7 @@
</div>
-
+<!--CLEANUP-->
<h5 id=limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3 </span>Limiting user input length: the <code title=attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute</h5>
<p>A <dfn id=attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a limit on the number of
@@ -53358,8 +53459,65 @@
</div>
- <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.4 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute</h5>
+<!--CLEANUP-->
+ <h5 id=setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4 </span>Setting minimum input length requirements: the <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute</h5>
+ <p>A <dfn id=attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a lower bound on the number of
+ characters a user can input.</p>
+
+ <p class=note>The <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute does not imply the
+ <code title="">required</code> attribute. If the form control has no <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute, then the value can still be omitted; the
+ <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute only kicks in once the user has entered
+ a value at all. If the empty string is not allowed, then the <code title="">required</code>
+ attribute also needs to be set.</p>
+
+ <p>If an element has its <a href=#attr-fe-minlength title=attr-fe-minlength>form
+ control <code title="">minlength</code> attribute</a> specified,
+ the attribute's value must be a <a href=#valid-non-negative-integer>valid non-negative
+ integer</a>. If the attribute is specified and applying the
+ <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value
+ results in a number, then that number is the element's <dfn id=minimum-allowed-value-length>minimum
+ allowed value length</dfn>. If the attribute is omitted or parsing
+ its value results in an error, then there is no <a href=#minimum-allowed-value-length>minimum
+ allowed value length</a>.</p>
+
+ <p>If an element hs both a <a href=#maximum-allowed-value-length>maximum allowed value length</a> and a <a href=#minimum-allowed-value-length>minimum allowed
+ value length</a>, the <a href=#minimum-allowed-value-length>minimum allowed value length</a> must be smaller than or equal
+ to the <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+
+ <div class=impl>
+
+ <p><strong>Constraint validation</strong>: If an element has a
+ <a href=#minimum-allowed-value-length>minimum allowed value length</a>, its <a href=#concept-fe-value title=concept-fe-value>value</a> is not the empty string, and the
+ <a href=#code-unit-length>code-unit length</a> of the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is less than the element's
+ <a href=#minimum-allowed-value-length>minimum allowed value length</a>, then the element is
+ <a href=#suffering-from-being-too-short>suffering from being too short</a>.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, there are four text fields. The first is required, and has to be at least 5
+ characters long. The other three are optional, but if the user fills one in, the user has to
+ enter at least 10 characters.</p>
+
+ <pre><form action="/events/menu.cgi" method="post">
+ <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
+ <p><label>Describe what you would like for breakfast, if anything:
+ <textarea name="breakfast" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for lunch, if anything:
+ <textarea name="lunch" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for dinner, if anything:
+ <textarea name="dinner" minlength="10"></textarea></label></p>
+ <p><input type=submit value="Submit Request"></p>
+</form></pre>
+
+
+ </div>
+
+
+ <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute</h5>
+
<p>The <dfn id=attr-fe-disabled title=attr-fe-disabled><code>disabled</code></dfn>
content attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
@@ -53386,7 +53544,7 @@
</div>
- <h5 id=form-submission-0><span class=secno>4.10.19.5 </span>Form submission</h5>
+ <h5 id=form-submission-0><span class=secno>4.10.19.6 </span>Form submission</h5>
<p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both
on <code><a href=#the-form-element>form</a></code> elements and on <a href=#concept-submit-button title=concept-submit-button>submit buttons</a> (elements that
@@ -53544,7 +53702,7 @@
</div>
- <h5 id=autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.6 </span>Autofocusing a form control: the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute</h5>
+ <h5 id=autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.7 </span>Autofocusing a form control: the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -53641,7 +53799,7 @@
</div>
- <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </span>Input modalities: the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute</h5>
+ <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.8 </span>Input modalities: the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -53769,7 +53927,7 @@
</div>
- <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.8 </span>Autofilling form controls: the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute</h5>
+ <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.9 </span>Autofilling form controls: the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute</h5>
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
@@ -54347,6 +54505,7 @@
<td>Contact
</table></li>
+<!--CLEANUP-->
<li><p>If <var title="">category</var> is Off, let the element's
<a href=#autofill-field-name>autofill field name</a> be the string "<code title="">off</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
@@ -54571,7 +54730,8 @@
<a href=#suffering-from-a-type-mismatch title="suffering from a type mismatch">suffer from a type
mismatch</a>, <a href=#suffering-from-a-pattern-mismatch title="suffering from a pattern
mismatch">suffer from a pattern mismatch</a>, <a href=#suffering-from-being-too-long title="suffering from being too long">suffer from being too
- long</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
+ long</a>, <a href=#suffering-from-being-too-short title="suffering from being too short">suffer from being too
+ short</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
an underflow</a>, <a href=#suffering-from-an-overflow title="suffering from an overflow">suffer
from an overflow</a>, or <a href=#suffering-from-a-step-mismatch title="suffering from a step
mismatch">suffer from a step mismatch</a>. Where possible given the control's constraints, user
@@ -55069,6 +55229,13 @@
(<code><a href=#the-input-element>input</a></code> <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
<code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>). </dd>
+ <dt> <dfn id=suffering-from-being-too-short>Suffering from being too short</dfn> </dt>
+
+ <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too short for the
+ <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a>
+ (<code><a href=#the-input-element>input</a></code> <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code>). </dd>
+
<dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> </dt>
<dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the
@@ -55235,6 +55402,14 @@
</dd>
+ <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-tooShort><a href=#dom-validitystate-tooshort>tooShort</a></code></dt>
+
+ <dd>
+
+ <p>Returns true if the element's value, if it is not the empty string, is shorter than the provided minimum length; false otherwise.</p>
+
+ </dd>
+
<dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeUnderflow><a href=#dom-validitystate-rangeunderflow>rangeUnderflow</a></code></dt>
<dd>
@@ -55354,6 +55529,7 @@
readonly attribute boolean <a href=#dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch>typeMismatch</a>;
readonly attribute boolean <a href=#dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch>patternMismatch</a>;
readonly attribute boolean <a href=#dom-validitystate-toolong title=dom-ValidityState-tooLong>tooLong</a>;
+ readonly attribute boolean <a href=#dom-validitystate-tooshort title=dom-ValidityState-tooShort>tooShort</a>;
readonly attribute boolean <a href=#dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow>rangeUnderflow</a>;
readonly attribute boolean <a href=#dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow>rangeOverflow</a>;
readonly attribute boolean <a href=#dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch>stepMismatch</a>;
@@ -55379,6 +55555,9 @@
<dt><dfn id=dom-validitystate-toolong title=dom-ValidityState-tooLong><code>tooLong</code></dfn></dt>
<dd> <p>The control is <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p> </dd>
+ <dt><dfn id=dom-validitystate-tooshort title=dom-ValidityState-tooShort><code>tooShort</code></dfn></dt>
+ <dd> <p>The control is <a href=#suffering-from-being-too-short>suffering from being too short</a>.</p> </dd>
+
<dt><dfn id=dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow><code>rangeUnderflow</code></dfn></dt>
<dd> <p>The control is <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p> </dd>
@@ -100255,6 +100434,7 @@
<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-minlength><a href=#attr-input-minlength>minlength</a></code>;
<code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>;
<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
<code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>;
@@ -100811,6 +100991,7 @@
<code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
<code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>;
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code>;
<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
<code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>;
<code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code>;
@@ -101794,6 +101975,11 @@
<td> <code title=attr-meter-min><a href=#attr-meter-min>meter</a></code>
<td> Lower bound of range
<td> <a href=#valid-floating-point-number>Valid floating-point number</a>*
+ <tr><th> <code title="">minlength</code>
+ <td> <code title=attr-input-minlength><a href=#attr-input-minlength>input</a></code>;
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>textarea</a></code>
+ <td> Minimum length of value
+ <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
<tr><th> <code title="">multiple</code>
<td> <code title=attr-input-multiple><a href=#attr-input-multiple>input</a></code>;
<code title=attr-select-multiple><a href=#attr-select-multiple>select</a></code>
Modified: index
===================================================================
--- index 2013-10-02 19:50:55 UTC (rev 8205)
+++ index 2013-10-03 18:22:06 UTC (rev 8206)
@@ -256,7 +256,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 October 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 3 October 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -723,7 +723,7 @@
<li><a href=#input-impl-notes><span class=secno>4.10.7.2 </span>Implemention notes regarding localization of form controls</a></li>
<li><a href=#common-input-element-attributes><span class=secno>4.10.7.3 </span>Common <code>input</code> element attributes</a>
<ol>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-maxlength-and-minlength-attributes><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength>maxlength</code> and <code title=attr-input-minlength>minlength</code> attributes</a></li>
<li><a href=#the-size-attribute><span class=secno>4.10.7.3.2 </span>The <code title=attr-input-size>size</code> attribute</a></li>
<li><a href=#the-readonly-attribute><span class=secno>4.10.7.3.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
<li><a href=#the-required-attribute><span class=secno>4.10.7.3.4 </span>The <code title=attr-input-required>required</code> attribute</a></li>
@@ -755,11 +755,12 @@
<li><a href=#naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1 </span>Naming form controls: the <code title=attr-fe-name>name</code> attribute</a></li>
<li><a href=#submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2 </span>Submitting element directionality: the <code title=attr-fe-dirname>dirname</code> attribute</a></li>
<li><a href=#limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3 </span>Limiting user input length: the <code title=attr-fe-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.4 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled>disabled</code> attribute</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.19.5 </span>Form submission</a></li>
- <li><a href=#autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.6 </span>Autofocusing a form control: the <code title=attr-fe-autofocus>autofocus</code> attribute</a></li>
- <li><a href=#input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </span>Input modalities: the <code title=attr-fe-inputmode>inputmode</code> attribute</a></li>
- <li><a href=#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.8 </span>Autofilling form controls: the <code title=attr-fe-autocomplete>autocomplete</code> attribute</a></ol></li>
+ <li><a href=#setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4 </span>Setting minimum input length requirements: the <code title=attr-fe-minlength>minlength</code> attribute</a></li>
+ <li><a href=#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled>disabled</code> attribute</a></li>
+ <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></li>
+ <li><a href=#autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.7 </span>Autofocusing a form control: the <code title=attr-fe-autofocus>autofocus</code> attribute</a></li>
+ <li><a href=#input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.8 </span>Input modalities: the <code title=attr-fe-inputmode>inputmode</code> attribute</a></li>
+ <li><a href=#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.9 </span>Autofilling form controls: the <code title=attr-fe-autocomplete>autocomplete</code> attribute</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>
@@ -45104,6 +45105,7 @@
<dd><code title=attr-input-max><a href=#attr-input-max>max</a></code> — Maximum value</dd>
<dd><code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> — Maximum length of value</dd>
<dd><code title=attr-input-min><a href=#attr-input-min>min</a></code> — Minimum value</dd>
+ <dd><code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> — Minimum length of value</dd>
<dd><code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> — Whether to allow multiple values</dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code> — Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API</dd>
<dd><code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> — Pattern to be matched by the form control's value</dd>
@@ -45141,6 +45143,7 @@
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>;
attribute DOMString <a href=#dom-input-min title=dom-input-min>min</a>;
+ attribute long <a href=#dom-input-minlength title=dom-input-minLength>minLength</a>;
attribute boolean <a href=#dom-input-multiple title=dom-input-multiple>multiple</a>;
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-input-pattern title=dom-input-pattern>pattern</a>;
@@ -45287,7 +45290,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-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fe-dirname><a href=#attr-fe-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-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>, <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>,
+ <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-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>, <code title=attr-input-checked><a href=#attr-input-checked>checked</a></code>, <code title=attr-fe-dirname><a href=#attr-fe-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-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code>, <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-minlength><a href=#attr-input-minlength>minlength</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 <code title=dom-textarea/input-setRangeText><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> and <code title=dom-textarea/input-setSelectionRange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods, the <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()<
/a></code> and <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
@@ -45711,6 +45714,30 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
+ <tr><th> <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>
+ <td class=no> · <!-- Hidden -->
+ <td class=yes> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class=yes> Yes <!-- URL, Telephone -->
+ <td class=yes> Yes <!-- E-mail -->
+ <td class=yes> Yes <!-- 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-multiple><a href=#attr-input-multiple>multiple</a></code>
<td class=no> · <!-- Hidden -->
<td class=no> · <!-- Text -->
@@ -46452,6 +46479,8 @@
<a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-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>. The <dfn id=dom-input-minlength title=dom-input-minLength><code>minLength</code></dfn> IDL attribute must <a href=#reflect>reflect</a>
+ the <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> content attribute, <a href=#limited-to-only-non-negative-numbers>limited to only
non-negative numbers</a>.</p>
<p>The IDL attributes <dfn id=dom-input-width title=dom-input-width><code>width</code></dfn> and <dfn id=dom-input-height title=dom-input-height><code>height</code></dfn> must return the rendered width and height of
@@ -46523,6 +46552,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -46615,6 +46645,7 @@
<code title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -46709,6 +46740,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -46808,6 +46840,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47067,6 +47100,7 @@
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</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-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47163,6 +47197,7 @@
attributes, IDL attributes, and methods <a href=#concept-input-apply title=concept-input-apply>apply</a> to the element:
<code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code>,
<code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
+ <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
@@ -47362,6 +47397,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47528,6 +47564,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47667,6 +47704,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47807,6 +47845,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -47946,6 +47985,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48081,6 +48121,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48243,6 +48284,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>,
@@ -48422,6 +48464,7 @@
<code class=no-backref title=attr-dim-height><a href=#attr-dim-height>height</a></code>,
<code class=no-backref title=attr-fe-inputmode><a href=#attr-fe-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-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48589,6 +48632,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48695,6 +48739,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -48823,6 +48868,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49042,6 +49088,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>,
<code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
<code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
@@ -49138,6 +49185,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49338,6 +49386,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49446,6 +49495,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49527,6 +49577,7 @@
<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>,
+ <code class=no-backref title=attr-input-minlength><a href=#attr-input-minlength>minlength</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>,
<code class=no-backref title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code>,
@@ -49597,15 +49648,20 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-and-minlength-attributes><span class=secno>4.10.7.3.1 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> and <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> attributes</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn> attribute<span class=impl>, when it <a href=#concept-input-apply title=concept-input-apply>applies</a>,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl> controlled by the <code><a href=#the-input-element>input</a></code>
element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a></span>.</p>
+ <p>The <dfn id=attr-input-minlength title=attr-input-minlength><code>minlength</code></dfn> attribute<span class=impl>, when it <a href=#concept-input-apply title=concept-input-apply>applies</a>,</span> is a <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a><span class=impl> controlled by the <code><a href=#the-input-element>input</a></code>
+ element's <a href=#concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</a></span>.</p>
+
<p>If the <code><a href=#the-input-element>input</a></code> element has a <a href=#maximum-allowed-value-length>maximum allowed value length</a>, then the
<a href=#code-unit-length>code-unit length</a> of the value of the element's <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute must be equal to or less than the element's
<a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
<div class=example>
<p>The following extract shows how a messaging client's text entry could be arbitrarily
@@ -49616,8 +49672,17 @@
</div>
+ <div class=example>
+ <p>Here, a password is given a minimum length:</p>
+ <pre><p><label>Username: <input name=u required></label>
+<p><label>Password: <input name=p required minlength=12></label></pre>
+
+ </div>
+
+
+
<h6 id=the-size-attribute><span class=secno>4.10.7.3.2 </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
@@ -51672,6 +51737,7 @@
<dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code> — Associates the control with a <code><a href=#the-form-element>form</a></code> element</dd>
<dd><code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> — Hint for selecting an input modality</dd>
<dd><code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> — Maximum length of value</dd>
+ <dd><code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code> — Minimum length of value</dd>
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code> — Name of form control to use for <a href=#form-submission>form submission</a> and in the <code title=dom-form-elements><a href=#dom-form-elements>form.elements</a></code> API</dd>
<dd><code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code> — User-visible label to be placed within the form control</dd>
<dd><code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> — Whether to allow the value to be edited by the user</dd>
@@ -51689,6 +51755,7 @@
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 long <a href=#dom-textarea-minlength title=dom-textarea-minLength>minLength</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>;
attribute boolean <a href=#dom-textarea-readonly title=dom-textarea-readOnly>readOnly</a>;
@@ -51938,6 +52005,12 @@
<code><a href=#textcontent>textContent</a></code> IDL attribute is equal to or less than the
element's <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+ <p>The <dfn id=attr-textarea-minlength title=attr-textarea-minlength><code>minlength</code></dfn>
+ attribute is a <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a> controlled by the
+ <code><a href=#the-textarea-element>textarea</a></code> element's <a href=#concept-textarea-dirty title=concept-textarea-dirty>dirty value flag</a>.</p>
+
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
<p>The <dfn id=attr-textarea-required title=attr-textarea-required><code>required</code></dfn> attribute
is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the user will
be required to enter a value before submitting the form.</p>
@@ -52032,6 +52105,8 @@
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-inputmode><a href=#attr-fe-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-minlength title=dom-textarea-minLength><code>minLength</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</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
attribute.</p>
@@ -52089,6 +52164,31 @@
<pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p></pre>
+ <p>You can also give a minimum length. Here, a letter needs to be filled out by the user; a
+ template (which is shorter than the minimum length) is provided, but is insufficient to submit
+ the form:</p>
+
+ <pre><textarea required minlength="500">Dear Madam Speaker,
+
+Regarding your letter dated ...
+
+...
+
+Yours Sincerely,
+
+...</textarea></pre>
+
+ <p>A placeholder can be given as well, to suggest the basic form to the user, without providing
+ an explicit template:</p>
+
+ <pre><textarea placeholder="Dear Francine,
+
+They closed the parks this week, so we won't be able to
+meet your there. Should we just have dinner?
+
+Love,
+Daddy"></textarea></pre>
+
<p>To have the browser submit <a href=#the-directionality>the directionality</a> of
the element along with the value, the <code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute can be
specified:</p>
@@ -53290,6 +53390,7 @@
</div>
+<!--CLEANUP-->
<h5 id=submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2 </span>Submitting element directionality: the <code title=attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute</h5>
<p>The <dfn id=attr-fe-dirname title=attr-fe-dirname><code>dirname</code></dfn> attribute
@@ -53325,7 +53426,7 @@
</div>
-
+<!--CLEANUP-->
<h5 id=limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3 </span>Limiting user input length: the <code title=attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute</h5>
<p>A <dfn id=attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a limit on the number of
@@ -53358,8 +53459,65 @@
</div>
- <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.4 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute</h5>
+<!--CLEANUP-->
+ <h5 id=setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4 </span>Setting minimum input length requirements: the <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute</h5>
+ <p>A <dfn id=attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a lower bound on the number of
+ characters a user can input.</p>
+
+ <p class=note>The <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute does not imply the
+ <code title="">required</code> attribute. If the form control has no <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute, then the value can still be omitted; the
+ <code title=attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute only kicks in once the user has entered
+ a value at all. If the empty string is not allowed, then the <code title="">required</code>
+ attribute also needs to be set.</p>
+
+ <p>If an element has its <a href=#attr-fe-minlength title=attr-fe-minlength>form
+ control <code title="">minlength</code> attribute</a> specified,
+ the attribute's value must be a <a href=#valid-non-negative-integer>valid non-negative
+ integer</a>. If the attribute is specified and applying the
+ <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value
+ results in a number, then that number is the element's <dfn id=minimum-allowed-value-length>minimum
+ allowed value length</dfn>. If the attribute is omitted or parsing
+ its value results in an error, then there is no <a href=#minimum-allowed-value-length>minimum
+ allowed value length</a>.</p>
+
+ <p>If an element hs both a <a href=#maximum-allowed-value-length>maximum allowed value length</a> and a <a href=#minimum-allowed-value-length>minimum allowed
+ value length</a>, the <a href=#minimum-allowed-value-length>minimum allowed value length</a> must be smaller than or equal
+ to the <a href=#maximum-allowed-value-length>maximum allowed value length</a>.</p>
+
+ <div class=impl>
+
+ <p><strong>Constraint validation</strong>: If an element has a
+ <a href=#minimum-allowed-value-length>minimum allowed value length</a>, its <a href=#concept-fe-value title=concept-fe-value>value</a> is not the empty string, and the
+ <a href=#code-unit-length>code-unit length</a> of the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is less than the element's
+ <a href=#minimum-allowed-value-length>minimum allowed value length</a>, then the element is
+ <a href=#suffering-from-being-too-short>suffering from being too short</a>.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>In this example, there are four text fields. The first is required, and has to be at least 5
+ characters long. The other three are optional, but if the user fills one in, the user has to
+ enter at least 10 characters.</p>
+
+ <pre><form action="/events/menu.cgi" method="post">
+ <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
+ <p><label>Describe what you would like for breakfast, if anything:
+ <textarea name="breakfast" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for lunch, if anything:
+ <textarea name="lunch" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for dinner, if anything:
+ <textarea name="dinner" minlength="10"></textarea></label></p>
+ <p><input type=submit value="Submit Request"></p>
+</form></pre>
+
+
+ </div>
+
+
+ <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5 </span>Enabling and disabling form controls: the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute</h5>
+
<p>The <dfn id=attr-fe-disabled title=attr-fe-disabled><code>disabled</code></dfn>
content attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
@@ -53386,7 +53544,7 @@
</div>
- <h5 id=form-submission-0><span class=secno>4.10.19.5 </span>Form submission</h5>
+ <h5 id=form-submission-0><span class=secno>4.10.19.6 </span>Form submission</h5>
<p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both
on <code><a href=#the-form-element>form</a></code> elements and on <a href=#concept-submit-button title=concept-submit-button>submit buttons</a> (elements that
@@ -53544,7 +53702,7 @@
</div>
- <h5 id=autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.6 </span>Autofocusing a form control: the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute</h5>
+ <h5 id=autofocusing-a-form-control:-the-autofocus-attribute><span class=secno>4.10.19.7 </span>Autofocusing a form control: the <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -53641,7 +53799,7 @@
</div>
- <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.7 </span>Input modalities: the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute</h5>
+ <h5 id=input-modalities:-the-inputmode-attribute><span class=secno>4.10.19.8 </span>Input modalities: the <code title=attr-fe-inputmode><a href=#attr-fe-inputmode>inputmode</a></code> attribute</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -53769,7 +53927,7 @@
</div>
- <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.8 </span>Autofilling form controls: the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute</h5>
+ <h5 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.9 </span>Autofilling form controls: the <code title=attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute</h5>
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
@@ -54347,6 +54505,7 @@
<td>Contact
</table></li>
+<!--CLEANUP-->
<li><p>If <var title="">category</var> is Off, let the element's
<a href=#autofill-field-name>autofill field name</a> be the string "<code title="">off</code>", let its <a href=#autofill-hint-set>autofill hint set</a> be
empty, and let its <a href=#idl-exposed-autofill-value>IDL-exposed autofill value</a> be the
@@ -54571,7 +54730,8 @@
<a href=#suffering-from-a-type-mismatch title="suffering from a type mismatch">suffer from a type
mismatch</a>, <a href=#suffering-from-a-pattern-mismatch title="suffering from a pattern
mismatch">suffer from a pattern mismatch</a>, <a href=#suffering-from-being-too-long title="suffering from being too long">suffer from being too
- long</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
+ long</a>, <a href=#suffering-from-being-too-short title="suffering from being too short">suffer from being too
+ short</a>, <a href=#suffering-from-an-underflow title="suffering from an underflow">suffer from
an underflow</a>, <a href=#suffering-from-an-overflow title="suffering from an overflow">suffer
from an overflow</a>, or <a href=#suffering-from-a-step-mismatch title="suffering from a step
mismatch">suffer from a step mismatch</a>. Where possible given the control's constraints, user
@@ -55069,6 +55229,13 @@
(<code><a href=#the-input-element>input</a></code> <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
<code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>). </dd>
+ <dt> <dfn id=suffering-from-being-too-short>Suffering from being too short</dfn> </dt>
+
+ <dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too short for the
+ <a href=#attr-fe-minlength title=attr-fe-minlength>form control <code title="">minlength</code> attribute</a>
+ (<code><a href=#the-input-element>input</a></code> <code title=attr-input-minlength><a href=#attr-input-minlength>minlength</a></code>, <code><a href=#the-textarea-element>textarea</a></code>
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code>). </dd>
+
<dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> </dt>
<dd> <p>When a control has a <a href=#concept-fe-value title=concept-fe-value>value</a> that is too low for the
@@ -55235,6 +55402,14 @@
</dd>
+ <dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-tooShort><a href=#dom-validitystate-tooshort>tooShort</a></code></dt>
+
+ <dd>
+
+ <p>Returns true if the element's value, if it is not the empty string, is shorter than the provided minimum length; false otherwise.</p>
+
+ </dd>
+
<dt><var title="">element</var> . <code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code> . <code title=dom-validitystate-rangeUnderflow><a href=#dom-validitystate-rangeunderflow>rangeUnderflow</a></code></dt>
<dd>
@@ -55354,6 +55529,7 @@
readonly attribute boolean <a href=#dom-validitystate-typemismatch title=dom-ValidityState-typeMismatch>typeMismatch</a>;
readonly attribute boolean <a href=#dom-validitystate-patternmismatch title=dom-ValidityState-patternMismatch>patternMismatch</a>;
readonly attribute boolean <a href=#dom-validitystate-toolong title=dom-ValidityState-tooLong>tooLong</a>;
+ readonly attribute boolean <a href=#dom-validitystate-tooshort title=dom-ValidityState-tooShort>tooShort</a>;
readonly attribute boolean <a href=#dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow>rangeUnderflow</a>;
readonly attribute boolean <a href=#dom-validitystate-rangeoverflow title=dom-ValidityState-rangeOverflow>rangeOverflow</a>;
readonly attribute boolean <a href=#dom-validitystate-stepmismatch title=dom-ValidityState-stepMismatch>stepMismatch</a>;
@@ -55379,6 +55555,9 @@
<dt><dfn id=dom-validitystate-toolong title=dom-ValidityState-tooLong><code>tooLong</code></dfn></dt>
<dd> <p>The control is <a href=#suffering-from-being-too-long>suffering from being too long</a>.</p> </dd>
+ <dt><dfn id=dom-validitystate-tooshort title=dom-ValidityState-tooShort><code>tooShort</code></dfn></dt>
+ <dd> <p>The control is <a href=#suffering-from-being-too-short>suffering from being too short</a>.</p> </dd>
+
<dt><dfn id=dom-validitystate-rangeunderflow title=dom-ValidityState-rangeUnderflow><code>rangeUnderflow</code></dfn></dt>
<dd> <p>The control is <a href=#suffering-from-an-underflow>suffering from an underflow</a>.</p> </dd>
@@ -100255,6 +100434,7 @@
<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-minlength><a href=#attr-input-minlength>minlength</a></code>;
<code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code>;
<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
<code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>;
@@ -100811,6 +100991,7 @@
<code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
<code title=attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code>;
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code>;
<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>;
<code title=attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code>;
<code title=attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code>;
@@ -101794,6 +101975,11 @@
<td> <code title=attr-meter-min><a href=#attr-meter-min>meter</a></code>
<td> Lower bound of range
<td> <a href=#valid-floating-point-number>Valid floating-point number</a>*
+ <tr><th> <code title="">minlength</code>
+ <td> <code title=attr-input-minlength><a href=#attr-input-minlength>input</a></code>;
+ <code title=attr-textarea-minlength><a href=#attr-textarea-minlength>textarea</a></code>
+ <td> Minimum length of value
+ <td> <a href=#valid-non-negative-integer>Valid non-negative integer</a>
<tr><th> <code title="">multiple</code>
<td> <code title=attr-input-multiple><a href=#attr-input-multiple>input</a></code>;
<code title=attr-select-multiple><a href=#attr-select-multiple>select</a></code>
Modified: source
===================================================================
--- source 2013-10-02 19:50:55 UTC (rev 8205)
+++ source 2013-10-03 18:22:06 UTC (rev 8206)
@@ -49404,6 +49404,7 @@
<dd><code title="attr-input-max">max</code></dd>
<dd><code title="attr-input-maxlength">maxlength</code></dd>
<dd><code title="attr-input-min">min</code></dd>
+ <dd><code title="attr-input-minlength">minlength</code></dd>
<dd><code title="attr-input-multiple">multiple</code></dd>
<dd><code title="attr-fe-name">name</code></dd>
<dd><code title="attr-input-pattern">pattern</code></dd>
@@ -49441,6 +49442,7 @@
attribute DOMString <span title="dom-input-max">max</span>;
attribute long <span title="dom-input-maxLength">maxLength</span>;
attribute DOMString <span title="dom-input-min">min</span>;
+ attribute long <span title="dom-input-minLength">minLength</span>;
attribute boolean <span title="dom-input-multiple">multiple</span>;
attribute DOMString <span title="dom-fe-name">name</span>;
attribute DOMString <span title="dom-input-pattern">pattern</span>;
@@ -49627,7 +49629,7 @@
title="attr-fs-formtarget">formtarget</code>, <code title="attr-dim-height">height</code>, <code
title="attr-fe-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
- title="attr-input-min">min</code>, <code title="attr-input-multiple">multiple</code>, <code
+ title="attr-input-min">min</code>, <code title="attr-input-minlength">minlength</code>, <code title="attr-input-multiple">multiple</code>, <code
title="attr-input-pattern">pattern</code>, <code
title="attr-input-placeholder">placeholder</code>, <code
title="attr-input-readonly">readonly</code>, <code title="attr-input-required">required</code>,
@@ -50087,6 +50089,31 @@
<!-- <td class="no"> · Button -->
<tr>
+ <th> <code title="attr-input-minlength">minlength</code>
+ <td class="no"> · <!-- Hidden -->
+ <td class="yes"> Yes <!-- Text -->
+<!-- <td class="yes"> Yes Search -->
+ <td class="yes"> Yes <!-- URL, Telephone -->
+ <td class="yes"> Yes <!-- E-mail -->
+ <td class="yes"> Yes <!-- 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-multiple">multiple</code>
<td class="no"> · <!-- Hidden -->
<td class="no"> · <!-- Text -->
@@ -50911,6 +50938,9 @@
<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, <span>limited to only
+ non-negative numbers</span>. The <dfn
+ title="dom-input-minLength"><code>minLength</code></dfn> IDL attribute must <span>reflect</span>
+ the <code title="attr-input-minlength">minlength</code> content attribute, <span>limited to only
non-negative numbers</span>.</p>
<p>The IDL attributes <dfn title="dom-input-width"><code>width</code></dfn> and <dfn
@@ -51001,6 +51031,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -51104,6 +51135,7 @@
<code title="attr-fe-inputmode">inputmode</code>,
<code title="attr-input-list">list</code>,
<code title="attr-input-maxlength">maxlength</code>,
+ <code title="attr-input-minlength">minlength</code>,
<code title="attr-input-pattern">pattern</code>,
<code title="attr-input-placeholder">placeholder</code>,
<code title="attr-input-readonly">readonly</code>,
@@ -51203,6 +51235,7 @@
<code title="attr-fe-autocomplete">autocomplete</code>,
<code title="attr-input-list">list</code>,
<code title="attr-input-maxlength">maxlength</code>,
+ <code title="attr-input-minlength">minlength</code>,
<code title="attr-input-pattern">pattern</code>,
<code title="attr-input-placeholder">placeholder</code>,
<code title="attr-input-readonly">readonly</code>,
@@ -51306,6 +51339,7 @@
<code title="attr-fe-autocomplete">autocomplete</code>,
<code title="attr-input-list">list</code>,
<code title="attr-input-maxlength">maxlength</code>,
+ <code title="attr-input-minlength">minlength</code>,
<code title="attr-input-pattern">pattern</code>,
<code title="attr-input-placeholder">placeholder</code>,
<code title="attr-input-readonly">readonly</code>,
@@ -51595,6 +51629,7 @@
<code title="attr-fe-autocomplete">autocomplete</code>,
<code title="attr-input-list">list</code>,
<code title="attr-input-maxlength">maxlength</code>,
+ <code title="attr-input-minlength">minlength</code>,
<code title="attr-input-multiple">multiple</code>,
<code title="attr-input-pattern">pattern</code>,
<code title="attr-input-placeholder">placeholder</code>,
@@ -51694,6 +51729,7 @@
attributes, IDL attributes, and methods <span title="concept-input-apply">apply</span> to the element:
<code title="attr-fe-autocomplete">autocomplete</code>,
<code title="attr-input-maxlength">maxlength</code>,
+ <code title="attr-input-minlength">minlength</code>,
<code title="attr-input-pattern">pattern</code>,
<code title="attr-input-placeholder">placeholder</code>,
<code title="attr-input-readonly">readonly</code>,
@@ -51909,6 +51945,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52091,6 +52128,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52242,6 +52280,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52396,6 +52435,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52547,6 +52587,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52693,6 +52734,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -52859,6 +52901,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-size">size</code>,
@@ -53052,6 +53095,7 @@
<code class="no-backref" title="attr-dim-height">height</code>,
<code class="no-backref" title="attr-fe-inputmode">inputmode</code>,
<code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -53227,6 +53271,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -53347,6 +53392,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -53494,6 +53540,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -53725,6 +53772,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
<code class="no-backref" title="attr-input-readonly">readonly</code>,
@@ -53827,6 +53875,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -54082,6 +54131,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -54195,6 +54245,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -54281,6 +54332,7 @@
<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>,
+ <code class="no-backref" title="attr-input-minlength">minlength</code>,
<code class="no-backref" title="attr-input-multiple">multiple</code>,
<code class="no-backref" title="attr-input-pattern">pattern</code>,
<code class="no-backref" title="attr-input-placeholder">placeholder</code>,
@@ -54354,18 +54406,25 @@
</div>
- <h6>The <code title="attr-input-maxlength">maxlength</code> attribute</h6>
+ <h6>The <code title="attr-input-maxlength">maxlength</code> and <code title="attr-input-minlength">minlength</code> attributes</h6>
<p>The <dfn title="attr-input-maxlength"><code>maxlength</code></dfn> attribute<span
class="impl">, when it <span title="concept-input-apply">applies</span>,</span> is a <span title="attr-fe-maxlength">form control <code
title="">maxlength</code> attribute</span><span class="impl"> controlled by the <code>input</code>
element's <span title="concept-input-value-dirty-flag">dirty value flag</span></span>.</p>
+ <p>The <dfn title="attr-input-minlength"><code>minlength</code></dfn> attribute<span
+ class="impl">, when it <span title="concept-input-apply">applies</span>,</span> is a <span title="attr-fe-minlength">form control <code
+ title="">minlength</code> attribute</span><span class="impl"> controlled by the <code>input</code>
+ element's <span title="concept-input-value-dirty-flag">dirty value flag</span></span>.</p>
+
<p>If the <code>input</code> element has a <span>maximum allowed value length</span>, then the
<span>code-unit length</span> of the value of the element's <code
title="attr-input-value">value</code> attribute must be equal to or less than the element's
<span>maximum allowed value length</span>.</p>
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
<div class="example">
<p>The following extract shows how a messaging client's text entry could be arbitrarily
@@ -54376,8 +54435,17 @@
</div>
+ <div class="example">
+ <p>Here, a password is given a minimum length:</p>
+ <pre><p><label>Username: <input name=u required></label>
+<p><label>Password: <input name=p required minlength=12></label></pre>
+
+ </div>
+
+
+
<h6>The <code title="attr-input-size">size</code> attribute</h6>
<p>The <dfn title="attr-input-size"><code>size</code></dfn> attribute gives the number of
@@ -56737,6 +56805,7 @@
<dd><code title="attr-fae-form">form</code></dd>
<dd><code title="attr-fe-inputmode">inputmode</code></dd>
<dd><code title="attr-textarea-maxlength">maxlength</code></dd>
+ <dd><code title="attr-textarea-minlength">minlength</code></dd>
<dd><code title="attr-fe-name">name</code></dd>
<dd><code title="attr-textarea-placeholder">placeholder</code></dd>
<dd><code title="attr-textarea-readonly">readonly</code></dd>
@@ -56754,6 +56823,7 @@
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 long <span title="dom-textarea-minLength">minLength</span>;
attribute DOMString <span title="dom-fe-name">name</span>;
attribute DOMString <span title="dom-textarea-placeholder">placeholder</span>;
attribute boolean <span title="dom-textarea-readOnly">readOnly</span>;
@@ -57056,6 +57126,15 @@
element's <span>maximum allowed value length</span>.</p>
<p>The <dfn
+ title="attr-textarea-minlength"><code>minlength</code></dfn>
+ attribute is a <span title="attr-fe-minlength">form control <code
+ title="">minlength</code> attribute</span> controlled by the
+ <code>textarea</code> element's <span
+ title="concept-textarea-dirty">dirty value flag</span>.</p>
+
+ <!-- we allow the default to be smaller than the minimum, so that you can have incomplete, but not empty, input already in the form, like a template that needs to be filled in -->
+
+ <p>The <dfn
title="attr-textarea-required"><code>required</code></dfn> attribute
is a <span>boolean attribute</span>. When specified, the user will
be required to enter a value before submitting the form.</p>
@@ -57169,6 +57248,10 @@
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-minLength"><code>minLength</code></dfn> IDL
+ attribute must <span>reflect</span> the <code
+ title="attr-textarea-minlength">minlength</code> content attribute,
+ <span>limited to only non-negative numbers</span>. The <dfn
title="dom-textarea-readOnly"><code>readOnly</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-textarea-readonly">readonly</code> content
@@ -57242,6 +57325,31 @@
<pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p></pre>
+ <p>You can also give a minimum length. Here, a letter needs to be filled out by the user; a
+ template (which is shorter than the minimum length) is provided, but is insufficient to submit
+ the form:</p>
+
+ <pre><textarea required minlength="500">Dear Madam Speaker,
+
+Regarding your letter dated ...
+
+...
+
+Yours Sincerely,
+
+...</textarea></pre>
+
+ <p>A placeholder can be given as well, to suggest the basic form to the user, without providing
+ an explicit template:</p>
+
+ <pre><textarea placeholder="Dear Francine,
+
+They closed the parks this week, so we won't be able to
+meet your there. Should we just have dinner?
+
+Love,
+Daddy"></textarea></pre>
+
<p>To have the browser submit <span>the directionality</span> of
the element along with the value, the <code
title="attr-fe-dirname">dirname</code> attribute can be
@@ -58615,6 +58723,7 @@
</div>
+<!--CLEANUP-->
<h5>Submitting element directionality: the <code title="attr-fe-dirname">dirname</code> attribute</h5>
<p>The <dfn title="attr-fe-dirname"><code>dirname</code></dfn> attribute
@@ -58651,7 +58760,7 @@
</div>
-
+<!--CLEANUP-->
<h5>Limiting user input length: the <code title="attr-fe-maxlength">maxlength</code> attribute</h5>
<p>A <dfn title="attr-fe-maxlength">form control <code
@@ -58689,6 +58798,68 @@
</div>
+<!--CLEANUP-->
+ <h5>Setting minimum input length requirements: the <code title="attr-fe-minlength">minlength</code> attribute</h5>
+
+ <p>A <dfn title="attr-fe-minlength">form control <code
+ title="">minlength</code> attribute</dfn>, controlled by a <var
+ title="">dirty value flag</var>, declares a lower bound on the number of
+ characters a user can input.</p>
+
+ <p class="note">The <code title="attr-fe-minlength">minlength</code> attribute does not imply the
+ <code title="">required</code> attribute. If the form control has no <code
+ title="attr-fe-minlength">minlength</code> attribute, then the value can still be omitted; the
+ <code title="attr-fe-minlength">minlength</code> attribute only kicks in once the user has entered
+ a value at all. If the empty string is not allowed, then the <code title="">required</code>
+ attribute also needs to be set.</p>
+
+ <p>If an element has its <span title="attr-fe-minlength">form
+ control <code title="">minlength</code> attribute</span> specified,
+ the attribute's value must be a <span>valid non-negative
+ integer</span>. If the attribute is specified and applying the
+ <span>rules for parsing non-negative integers</span> to its value
+ results in a number, then that number is the element's <dfn>minimum
+ allowed value length</dfn>. If the attribute is omitted or parsing
+ its value results in an error, then there is no <span>minimum
+ allowed value length</span>.</p>
+
+ <p>If an element hs both a <span>maximum allowed value length</span> and a <span>minimum allowed
+ value length</span>, the <span>minimum allowed value length</span> must be smaller than or equal
+ to the <span>maximum allowed value length</span>.</p>
+
+ <div class="impl">
+
+ <p><strong>Constraint validation</strong>: If an element has a
+ <span>minimum allowed value length</span>, its <span
+ title="concept-fe-value">value</span> is not the empty string, and the
+ <span>code-unit length</span> of the element's <span
+ title="concept-fe-value">value</span> is less than the element's
+ <span>minimum allowed value length</span>, then the element is
+ <span>suffering from being too short</span>.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>In this example, there are four text fields. The first is required, and has to be at least 5
+ characters long. The other three are optional, but if the user fills one in, the user has to
+ enter at least 10 characters.</p>
+
+ <pre><form action="/events/menu.cgi" method="post">
+ <p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
+ <p><label>Describe what you would like for breakfast, if anything:
+ <textarea name="breakfast" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for lunch, if anything:
+ <textarea name="lunch" minlength="10"></textarea></label></p>
+ <p><label>Describe what you would like for dinner, if anything:
+ <textarea name="dinner" minlength="10"></textarea></label></p>
+ <p><input type=submit value="Submit Request"></p>
+</form></pre>
+
+
+ </div>
+
+
<h5>Enabling and disabling form controls: the <code title="attr-fe-disabled">disabled</code> attribute</h5>
<p>The <dfn title="attr-fe-disabled"><code>disabled</code></dfn>
@@ -59931,6 +60102,7 @@
</li>
+<!--CLEANUP-->
<li><p>If <var title="">category</var> is Off, let the element's
<span>autofill field name</span> be the string "<code
title="">off</code>", let its <span>autofill hint set</span> be
@@ -60206,7 +60378,9 @@
mismatch</span>, <span title="suffering from a pattern
mismatch">suffer from a pattern mismatch</span>, <span
title="suffering from being too long">suffer from being too
- long</span>, <span title="suffering from an underflow">suffer from
+ long</span>, <span
+ title="suffering from being too short">suffer from being too
+ short</span>, <span title="suffering from an underflow">suffer from
an underflow</span>, <span title="suffering from an overflow">suffer
from an overflow</span>, or <span title="suffering from a step
mismatch">suffer from a step mismatch</span>. Where possible given the control's constraints, user
@@ -60776,6 +60950,13 @@
(<code>input</code> <code title="attr-input-maxlength">maxlength</code>, <code>textarea</code>
<code title="attr-textarea-maxlength">maxlength</code>). </p></dd>
+ <dt> <dfn>Suffering from being too short</dfn> </dt>
+
+ <dd> <p>When a control has a <span title="concept-fe-value">value</span> that is too short for the
+ <span title="attr-fe-minlength">form control <code title="">minlength</code> attribute</span>
+ (<code>input</code> <code title="attr-input-minlength">minlength</code>, <code>textarea</code>
+ <code title="attr-textarea-minlength">minlength</code>). </p></dd>
+
<dt> <dfn>Suffering from an underflow</dfn> </dt>
<dd> <p>When a control has a <span title="concept-fe-value">value</span> that is too low for the
@@ -60968,6 +61149,14 @@
</dd>
+ <dt><var title="">element</var> . <code title="dom-cva-validity">validity</code> . <code title="dom-validitystate-tooShort">tooShort</code></dt>
+
+ <dd>
+
+ <p>Returns true if the element's value, if it is not the empty string, is shorter than the provided minimum length; false otherwise.</p>
+
+ </dd>
+
<dt><var title="">element</var> . <code title="dom-cva-validity">validity</code> . <code title="dom-validitystate-rangeUnderflow">rangeUnderflow</code></dt>
<dd>
@@ -61095,6 +61284,7 @@
readonly attribute boolean <span title="dom-ValidityState-typeMismatch">typeMismatch</span>;
readonly attribute boolean <span title="dom-ValidityState-patternMismatch">patternMismatch</span>;
readonly attribute boolean <span title="dom-ValidityState-tooLong">tooLong</span>;
+ readonly attribute boolean <span title="dom-ValidityState-tooShort">tooShort</span>;
readonly attribute boolean <span title="dom-ValidityState-rangeUnderflow">rangeUnderflow</span>;
readonly attribute boolean <span title="dom-ValidityState-rangeOverflow">rangeOverflow</span>;
readonly attribute boolean <span title="dom-ValidityState-stepMismatch">stepMismatch</span>;
@@ -61121,6 +61311,9 @@
<dt><dfn title="dom-ValidityState-tooLong"><code>tooLong</code></dfn></dt>
<dd> <p>The control is <span>suffering from being too long</span>.</p> </dd>
+ <dt><dfn title="dom-ValidityState-tooShort"><code>tooShort</code></dfn></dt>
+ <dd> <p>The control is <span>suffering from being too short</span>.</p> </dd>
+
<dt><dfn title="dom-ValidityState-rangeUnderflow"><code>rangeUnderflow</code></dfn></dt>
<dd> <p>The control is <span>suffering from an underflow</span>.</p> </dd>
@@ -112093,6 +112286,7 @@
<code title="attr-input-max">max</code>;
<code title="attr-input-maxlength">maxlength</code>;
<code title="attr-input-min">min</code>;
+ <code title="attr-input-minlength">minlength</code>;
<code title="attr-input-multiple">multiple</code>;
<code title="attr-fe-name">name</code>;
<code title="attr-input-pattern">pattern</code>;
@@ -112790,6 +112984,7 @@
<code title="attr-fe-disabled">disabled</code>;
<code title="attr-fae-form">form</code>;
<code title="attr-textarea-maxlength">maxlength</code>;
+ <code title="attr-textarea-minlength">minlength</code>;
<code title="attr-fe-name">name</code>;
<code title="attr-textarea-placeholder">placeholder</code>;
<code title="attr-textarea-readonly">readonly</code>;
@@ -113926,6 +114121,12 @@
<td> Lower bound of range
<td> <span>Valid floating-point number</span>*
<tr>
+ <th> <code title="">minlength</code>
+ <td> <code title="attr-input-minlength">input</code>;
+ <code title="attr-textarea-minlength">textarea</code>
+ <td> Minimum length of value
+ <td> <span>Valid non-negative integer</span>
+ <tr>
<th> <code title="">multiple</code>
<td> <code title="attr-input-multiple">input</code>;
<code title="attr-select-multiple">select</code>
More information about the Commit-Watchers
mailing list