[html5] r4752 - [e] (0) An introduction to forms. Fixing http://www.w3.org/Bugs/Public/show_bug. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Feb 16 20:49:59 PST 2010
Author: ianh
Date: 2010-02-16 20:49:57 -0800 (Tue, 16 Feb 2010)
New Revision: 4752
Modified:
complete.html
index
source
Log:
[e] (0) An introduction to forms.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8933
Modified: complete.html
===================================================================
--- complete.html 2010-02-16 09:00:58 UTC (rev 4751)
+++ complete.html 2010-02-17 04:49:57 UTC (rev 4752)
@@ -157,7 +157,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<hgroup><h1>Web Applications 1.0</h1>
- <h2 class="no-num no-toc">Draft Standard — 16 February 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 17 February 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -540,86 +540,92 @@
<li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#the-form-element><span class=secno>4.10.1 </span>The <code>form</code> element</a></li>
- <li><a href=#the-fieldset-element><span class=secno>4.10.2 </span>The <code>fieldset</code> element</a></li>
- <li><a href=#the-legend-element><span class=secno>4.10.3 </span>The <code>legend</code> element</a></li>
- <li><a href=#the-label-element><span class=secno>4.10.4 </span>The <code>label</code> element</a></li>
- <li><a href=#the-input-element><span class=secno>4.10.5 </span>The <code>input</code> element</a>
+ <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
<ol>
- <li><a href=#states-of-the-type-attribute><span class=secno>4.10.5.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
+ <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
+ <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
+ <li><a href=#configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</a></ol></li>
+ <li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
+ <li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
+ <li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
+ <li><a href=#the-legend-element><span class=secno>4.10.5 </span>The <code>legend</code> element</a></li>
+ <li><a href=#the-label-element><span class=secno>4.10.6 </span>The <code>label</code> element</a></li>
+ <li><a href=#the-input-element><span class=secno>4.10.7 </span>The <code>input</code> element</a>
+ <ol>
+ <li><a href=#states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
<ol>
- <li><a href=#hidden-state><span class=secno>4.10.5.1.1 </span>Hidden state</a></li>
- <li><a href=#text-state-and-search-state><span class=secno>4.10.5.1.2 </span>Text state and Search state</a></li>
- <li><a href=#telephone-state><span class=secno>4.10.5.1.3 </span>Telephone state</a></li>
- <li><a href=#url-state><span class=secno>4.10.5.1.4 </span>URL state</a></li>
- <li><a href=#e-mail-state><span class=secno>4.10.5.1.5 </span>E-mail state</a></li>
- <li><a href=#password-state><span class=secno>4.10.5.1.6 </span>Password state</a></li>
- <li><a href=#date-and-time-state><span class=secno>4.10.5.1.7 </span>Date and Time state</a></li>
- <li><a href=#date-state><span class=secno>4.10.5.1.8 </span>Date state</a></li>
- <li><a href=#month-state><span class=secno>4.10.5.1.9 </span>Month state</a></li>
- <li><a href=#week-state><span class=secno>4.10.5.1.10 </span>Week state</a></li>
- <li><a href=#time-state><span class=secno>4.10.5.1.11 </span>Time state</a></li>
- <li><a href=#local-date-and-time-state><span class=secno>4.10.5.1.12 </span>Local Date and Time state</a></li>
- <li><a href=#number-state><span class=secno>4.10.5.1.13 </span>Number state</a></li>
- <li><a href=#range-state><span class=secno>4.10.5.1.14 </span>Range state</a></li>
- <li><a href=#color-state><span class=secno>4.10.5.1.15 </span>Color state</a></li>
- <li><a href=#checkbox-state><span class=secno>4.10.5.1.16 </span>Checkbox state</a></li>
- <li><a href=#radio-button-state><span class=secno>4.10.5.1.17 </span>Radio Button state</a></li>
- <li><a href=#file-upload-state><span class=secno>4.10.5.1.18 </span>File Upload state</a></li>
- <li><a href=#submit-button-state><span class=secno>4.10.5.1.19 </span>Submit Button state</a></li>
- <li><a href=#image-button-state><span class=secno>4.10.5.1.20 </span>Image Button state</a></li>
- <li><a href=#reset-button-state><span class=secno>4.10.5.1.21 </span>Reset Button state</a></li>
- <li><a href=#button-state><span class=secno>4.10.5.1.22 </span>Button state</a></ol></li>
- <li><a href=#common-input-element-attributes><span class=secno>4.10.5.2 </span>Common <code>input</code> element attributes</a>
+ <li><a href=#hidden-state><span class=secno>4.10.7.1.1 </span>Hidden state</a></li>
+ <li><a href=#text-state-and-search-state><span class=secno>4.10.7.1.2 </span>Text state and Search state</a></li>
+ <li><a href=#telephone-state><span class=secno>4.10.7.1.3 </span>Telephone state</a></li>
+ <li><a href=#url-state><span class=secno>4.10.7.1.4 </span>URL state</a></li>
+ <li><a href=#e-mail-state><span class=secno>4.10.7.1.5 </span>E-mail state</a></li>
+ <li><a href=#password-state><span class=secno>4.10.7.1.6 </span>Password state</a></li>
+ <li><a href=#date-and-time-state><span class=secno>4.10.7.1.7 </span>Date and Time state</a></li>
+ <li><a href=#date-state><span class=secno>4.10.7.1.8 </span>Date state</a></li>
+ <li><a href=#month-state><span class=secno>4.10.7.1.9 </span>Month state</a></li>
+ <li><a href=#week-state><span class=secno>4.10.7.1.10 </span>Week state</a></li>
+ <li><a href=#time-state><span class=secno>4.10.7.1.11 </span>Time state</a></li>
+ <li><a href=#local-date-and-time-state><span class=secno>4.10.7.1.12 </span>Local Date and Time state</a></li>
+ <li><a href=#number-state><span class=secno>4.10.7.1.13 </span>Number state</a></li>
+ <li><a href=#range-state><span class=secno>4.10.7.1.14 </span>Range state</a></li>
+ <li><a href=#color-state><span class=secno>4.10.7.1.15 </span>Color state</a></li>
+ <li><a href=#checkbox-state><span class=secno>4.10.7.1.16 </span>Checkbox state</a></li>
+ <li><a href=#radio-button-state><span class=secno>4.10.7.1.17 </span>Radio Button state</a></li>
+ <li><a href=#file-upload-state><span class=secno>4.10.7.1.18 </span>File Upload state</a></li>
+ <li><a href=#submit-button-state><span class=secno>4.10.7.1.19 </span>Submit Button state</a></li>
+ <li><a href=#image-button-state><span class=secno>4.10.7.1.20 </span>Image Button state</a></li>
+ <li><a href=#reset-button-state><span class=secno>4.10.7.1.21 </span>Reset Button state</a></li>
+ <li><a href=#button-state><span class=secno>4.10.7.1.22 </span>Button state</a></ol></li>
+ <li><a href=#common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code>input</code> element attributes</a>
<ol>
- <li><a href=#the-autocomplete-attribute><span class=secno>4.10.5.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
- <li><a href=#the-list-attribute><span class=secno>4.10.5.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
- <li><a href=#the-readonly-attribute><span class=secno>4.10.5.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
- <li><a href=#the-size-attribute><span class=secno>4.10.5.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
- <li><a href=#the-required-attribute><span class=secno>4.10.5.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
- <li><a href=#the-multiple-attribute><span class=secno>4.10.5.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.5.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#the-pattern-attribute><span class=secno>4.10.5.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
- <li><a href=#the-min-and-max-attributes><span class=secno>4.10.5.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
- <li><a href=#the-step-attribute><span class=secno>4.10.5.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
- <li><a href=#the-placeholder-attribute><span class=secno>4.10.5.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
- <li><a href=#common-input-element-apis><span class=secno>4.10.5.3 </span>Common <code>input</code> element APIs</a></li>
- <li><a href=#common-event-behaviors><span class=secno>4.10.5.4 </span>Common event behaviors</a></ol></li>
- <li><a href=#the-button-element><span class=secno>4.10.6 </span>The <code>button</code> element</a></li>
- <li><a href=#the-select-element><span class=secno>4.10.7 </span>The <code>select</code> element</a></li>
- <li><a href=#the-datalist-element><span class=secno>4.10.8 </span>The <code>datalist</code> element</a></li>
- <li><a href=#the-optgroup-element><span class=secno>4.10.9 </span>The <code>optgroup</code> element</a></li>
- <li><a href=#the-option-element><span class=secno>4.10.10 </span>The <code>option</code> element</a></li>
- <li><a href=#the-textarea-element><span class=secno>4.10.11 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-keygen-element><span class=secno>4.10.12 </span>The <code>keygen</code> element</a></li>
- <li><a href=#the-output-element><span class=secno>4.10.13 </span>The <code>output</code> element</a></li>
- <li><a href=#the-progress-element><span class=secno>4.10.14 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-meter-element><span class=secno>4.10.15 </span>The <code>meter</code> element</a></li>
- <li><a href=#association-of-controls-and-forms><span class=secno>4.10.16 </span>Association of controls and forms</a></li>
- <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.17 </span>Attributes common to form controls</a>
+ <li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
+ <li><a href=#the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
+ <li><a href=#the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
+ <li><a href=#the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
+ <li><a href=#the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
+ <li><a href=#the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
+ <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
+ <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
+ <li><a href=#the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
+ <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
+ <li><a href=#common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code>input</code> element APIs</a></li>
+ <li><a href=#common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</a></ol></li>
+ <li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-select-element><span class=secno>4.10.9 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-datalist-element><span class=secno>4.10.10 </span>The <code>datalist</code> element</a></li>
+ <li><a href=#the-optgroup-element><span class=secno>4.10.11 </span>The <code>optgroup</code> element</a></li>
+ <li><a href=#the-option-element><span class=secno>4.10.12 </span>The <code>option</code> element</a></li>
+ <li><a href=#the-textarea-element><span class=secno>4.10.13 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-keygen-element><span class=secno>4.10.14 </span>The <code>keygen</code> element</a></li>
+ <li><a href=#the-output-element><span class=secno>4.10.15 </span>The <code>output</code> element</a></li>
+ <li><a href=#the-progress-element><span class=secno>4.10.16 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-meter-element><span class=secno>4.10.17 </span>The <code>meter</code> element</a></li>
+ <li><a href=#association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</a></li>
+ <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.19 </span>Attributes common to form controls</a>
<ol>
- <li><a href=#naming-form-controls><span class=secno>4.10.17.1 </span>Naming form controls</a></li>
- <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.17.2 </span>Enabling and disabling form controls</a></li>
- <li><a href="#a-form-control's-value"><span class=secno>4.10.17.3 </span>A form control's value</a></li>
- <li><a href=#autofocusing-a-form-control><span class=secno>4.10.17.4 </span>Autofocusing a form control</a></li>
- <li><a href=#limiting-user-input-length><span class=secno>4.10.17.5 </span>Limiting user input length</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.17.6 </span>Form submission</a></ol></li>
- <li><a href=#constraints><span class=secno>4.10.18 </span>Constraints</a>
+ <li><a href=#naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</a></li>
+ <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</a></li>
+ <li><a href="#a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</a></li>
+ <li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
+ <li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
+ <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></ol></li>
+ <li><a href=#constraints><span class=secno>4.10.20 </span>Constraints</a>
<ol>
- <li><a href=#definitions><span class=secno>4.10.18.1 </span>Definitions</a></li>
- <li><a href=#constraint-validation><span class=secno>4.10.18.2 </span>Constraint validation</a></li>
- <li><a href=#the-constraint-validation-api><span class=secno>4.10.18.3 </span>The constraint validation API</a></li>
- <li><a href=#security-0><span class=secno>4.10.18.4 </span>Security</a></ol></li>
- <li><a href=#form-submission><span class=secno>4.10.19 </span>Form submission</a>
+ <li><a href=#definitions><span class=secno>4.10.20.1 </span>Definitions</a></li>
+ <li><a href=#constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</a></li>
+ <li><a href=#the-constraint-validation-api><span class=secno>4.10.20.3 </span>The constraint validation API</a></li>
+ <li><a href=#security-0><span class=secno>4.10.20.4 </span>Security</a></ol></li>
+ <li><a href=#form-submission><span class=secno>4.10.21 </span>Form submission</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.19.1 </span>Introduction</a></li>
- <li><a href=#implicit-submission><span class=secno>4.10.19.2 </span>Implicit submission</a></li>
- <li><a href=#form-submission-algorithm><span class=secno>4.10.19.3 </span>Form submission algorithm</a></li>
- <li><a href=#url-encoded-form-data><span class=secno>4.10.19.4 </span>URL-encoded form data</a></li>
- <li><a href=#multipart-form-data><span class=secno>4.10.19.5 </span>Multipart form data</a></li>
- <li><a href=#plain-text-form-data><span class=secno>4.10.19.6 </span>Plain text form data</a></ol></li>
- <li><a href=#resetting-a-form><span class=secno>4.10.20 </span>Resetting a form</a></li>
- <li><a href=#event-dispatch><span class=secno>4.10.21 </span>Event dispatch</a></ol></li>
+ <li><a href=#introduction-1><span class=secno>4.10.21.1 </span>Introduction</a></li>
+ <li><a href=#implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</a></li>
+ <li><a href=#form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</a></li>
+ <li><a href=#url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</a></li>
+ <li><a href=#multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</a></li>
+ <li><a href=#plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</a></ol></li>
+ <li><a href=#resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</a></li>
+ <li><a href=#event-dispatch><span class=secno>4.10.23 </span>Event dispatch</a></ol></li>
<li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
<ol>
<li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
@@ -691,7 +697,7 @@
<li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-1><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-2><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -781,7 +787,7 @@
<li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-2><span class=secno>6.6.1 </span>Introduction</a>
+ <li><a href=#introduction-3><span class=secno>6.6.1 </span>Introduction</a>
<ol>
<li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
<li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -800,7 +806,7 @@
<ol>
<li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-3><span class=secno>7.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-4><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
<ol>
@@ -858,7 +864,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</a></li>
<li><a href=#dnd><span class=secno>8.9 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-4><span class=secno>8.9.1 </span>Introduction</a></li>
+ <li><a href=#introduction-5><span class=secno>8.9.1 </span>Introduction</a></li>
<li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
<li><a href=#dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</a></li>
<li><a href=#drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</a>
@@ -880,7 +886,7 @@
<li><a href=#editing-apis><span class=secno>8.11 </span>Editing APIs</a></ol></li>
<li><a href=#workers><span class=secno>9 </span>Web workers</a>
<ol>
- <li><a href=#introduction-5><span class=secno>9.1 </span>Introduction</a>
+ <li><a href=#introduction-6><span class=secno>9.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>9.1.1 </span>Scope</a></li>
<li><a href=#tutorial><span class=secno>9.1.2 </span>Tutorial</a>
@@ -951,7 +957,7 @@
multiple HTTP connections (e.g. using XMLHttpRequest or
<iframe>s and long polling)."><span class=secno>10.3.4 </span>The Web Socket protocol</a>
<ol>
- <li><a href=#introduction-6><span class=secno>10.3.4.1 </span>Introduction</a>
+ <li><a href=#introduction-7><span class=secno>10.3.4.1 </span>Introduction</a>
<ol>
<li><a href=#background-0><span class=secno>10.3.4.1.1 </span>Background</a></li>
<li><a href=#protocol-overview><span class=secno>10.3.4.1.2 </span>Protocol overview</a></li>
@@ -991,7 +997,7 @@
<li><a href=#using-the-web-socket-protocol-from-other-specifications><span class=secno>10.3.4.8 </span>Using the Web Socket protocol from other specifications</a></ol></ol></li>
<li><a href=#crossDocumentMessages><span class=secno>10.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-7><span class=secno>10.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>10.4.1 </span>Introduction</a></li>
<li><a href=#security-4><span class=secno>10.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>10.4.2.1 </span>Authors</a></li>
@@ -1000,14 +1006,14 @@
<li><a href=#posting-messages-with-message-ports><span class=secno>10.4.4 </span>Posting messages with message ports</a></ol></li>
<li><a href=#channel-messaging><span class=secno>10.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-8><span class=secno>10.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>10.5.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>10.5.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>10.5.3 </span>Message ports</a>
<ol>
<li><a href=#ports-and-garbage-collection><span class=secno>10.5.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
- <li><a href=#introduction-9><span class=secno>11.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1181,10 +1187,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
- <li><a href=#introduction-10><span class=secno>14.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-11><span class=secno>14.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-12><span class=secno>14.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>14.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>14.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>14.2.4 </span>Alignment</a></li>
@@ -1202,7 +1208,7 @@
<li><a href=#toolbars-0><span class=secno>14.3.5 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>14.4 </span>Bindings</a>
<ol>
- <li><a href=#introduction-12><span class=secno>14.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-13><span class=secno>14.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -30855,6 +30861,10 @@
<td> 11.6% <td> 12.3% <td> 12.6%
</table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+ <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>
+
+ <p><i>This section is non-normative.</i></p>
+
<p>Forms allow unscripted client-server interaction: given a form, a
user can provide data, submit it to the server, and have the server
act on it accordingly (e.g. returning the results of a search or
@@ -30862,6 +30872,251 @@
interaction with no associated submission mechanism, in conjunction
with scripts.</p>
+ <p>Writing a form consists of several steps, which can be performed
+ in any order: writing the user interface, implementing the
+ server-side processing, and configuring the user interface to
+ communicate with the server.</p>
+
+
+ <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>For the purposes of this brief introduction, we will create a
+ pizza ordering form.</p>
+
+ <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
+ are placed the controls. Most controls are represented by the
+ <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
+ text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
+ used; the label text and the control itself go inside the
+ <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
+ <a href=#paragraph>paragraph</a>, and is typically separated from other parts
+ using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
+ one might ask for the customer's name:</p>
+
+ <pre><strong><form>
+ <p><label>Customer name: <input></label></p>
+</form></strong></pre>
+
+ <p>To let the user select the size of the pizza, we can use a set of
+ radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
+ element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute with the value <code title=attr-input-type-radio><a href=#radio-button-state>radio</a></code>. To make the radio
+ buttons work as a group, they are given a common name using the
+ <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one
+ can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
+ of controls is given by the first element in the
+ <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
+ element.</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>To pick toppings, we can use checkboxes. These use the
+ <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href=#checkbox-state>checkbox</a></code>:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+<strong> <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>The pizzeria for which this form is being written is always
+ making mistakes, so it needs a way to contact the customer. For this
+ purpose, we can use form controls specifically for telephone numbers
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href=#telephone-state>tel</a></code>) and e-mail addresses
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href=#e-mail-state>email</a></code>):</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p></strong>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+</form></pre>
+
+ <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href=#time-state>time</a></code> to ask for a delivery
+ time. Many of these form controls have attributes to control exactly
+ what values can be specified; in this case, three attributes of
+ particular interest are <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
+ <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. These set the minimum time, the
+ maximum time, and the interval between allowed values (in
+ seconds). This pizzeria only delivers between 11am and 9pm, and
+ doesn't promise anything better than 15 minute increments, which we
+ can mark up as follows:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
+</form></pre>
+
+ <p>Finally, to make the form submittable we use the
+ <code><a href=#the-button-element>button</a></code> element:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
+<strong> <p><button>Submit order</button><p></strong>
+</form></pre>
+
+
+ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The exact details for writing a server-side processor are out of
+ scope for this specification. For the purposes of this introduction,
+ we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
+ accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
+ format, expecting the following parameters sent in an HTTP POST
+ body:</p>
+
+ <dl><dt><code title="">custname</code></dt>
+ <dd>Customer's name</dd>
+
+ <dt><code title="">custtel</code></dt>
+ <dd>Customer's telephone number</dd>
+
+ <dt><code title="">custemail</code></dt>
+ <dd>Customer's e-mail address</dd>
+
+ <dt><code title="">size</code></dt>
+ <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
+
+ <dt><code title="">toppings</code></dt>
+ <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>
+
+ <dt><code title="">delivery</code></dt>
+ <dd>The requested delivery time</dd>
+
+ </dl><h5 id=configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Form submissions are exposed to servers in a variety of ways,
+ most commonly as HTTP GET or POST requests. To specify the exact
+ method used, the <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
+ attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
+ doesn't specify how the form data is encoded, though; to specify
+ that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
+ attribute. You also have to specify the <a href=#url>URL</a> of the
+ service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
+
+ <p>For each form control you want submitted, you then have to give a
+ name that will be used to refer to the data in the submission. We
+ already specified the name for the group of radio buttons; the same
+ attribute (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
+ the submission name. Radio buttons can be distinguished from each
+ other in the submission by giving them different values, using the
+ <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
+
+ <p>Multiple controls can have the same name; for example, here we
+ give all the checkboxes the same name, and the server distinguishes
+ which checkbox was checked by seeing which values are submitted with
+ that name — like the radio buttons, they are also given unique
+ values with the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
+ attribute.</p>
+
+ <p>Given the settings in the previous section, this all becomes:</p>
+
+ <pre><form<strong> method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi"</strong>>
+ <p><label>Customer name: <input<strong> name="custname"</strong>></label></p>
+ <p><label>Telephone: <input type=tel<strong> name="custtel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email<strong> name="custemail"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size<strong> value="small"</strong>> Small </label></p>
+ <p><label> <input type=radio name=size<strong> value="medium"</strong>> Medium </label></p>
+ <p><label> <input type=radio name=size<strong> value="large"</strong>> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox<strong> name="topping" value="bacon"</strong>> Bacon </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="cheese"</strong>> Extra Cheese </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="onion"</strong>> Onion </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+ <p>For example, if the customer entered "Denise Lawrence" as their
+ name, "555-321-8642" as their telephone number, did not specify an
+ e-mail address, asked for a medium-sized pizza, selected the Extra
+ Cheese and Mushroom toppings, and entered a delivery time of 7pm,
+ the user agent would submit the following to the online Web
+ service:</p>
+
+ <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+
+
+
+
+ <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>
+
<p>Mostly for historical reasons, elements in this section fall into
several overlapping (but subtly different) categories in addition to
the usual ones like <a href=#flow-content>flow content</a>, <a href=#phrasing-content>phrasing
@@ -30959,7 +31214,7 @@
submission</a>.</p>
- <h4 id=the-form-element><span class=secno>4.10.1 </span>The <dfn><code>form</code></dfn> element</h4>
+ <h4 id=the-form-element><span class=secno>4.10.3 </span>The <dfn><code>form</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31278,7 +31533,7 @@
- <h4 id=the-fieldset-element><span class=secno>4.10.2 </span>The <dfn><code>fieldset</code></dfn> element</h4>
+ <h4 id=the-fieldset-element><span class=secno>4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31392,7 +31647,7 @@
</div>
- <h4 id=the-legend-element><span class=secno>4.10.3 </span>The <dfn><code>legend</code></dfn> element</h4>
+ <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -31436,7 +31691,7 @@
- <h4 id=the-label-element><span class=secno>4.10.4 </span>The <dfn><code>label</code></dfn> element</h4>
+ <h4 id=the-label-element><span class=secno>4.10.6 </span>The <dfn><code>label</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31574,7 +31829,7 @@
</div>
- <h4 id=the-input-element><span class=secno>4.10.5 </span>The <dfn><code>input</code></dfn> element</h4>
+ <h4 id=the-input-element><span class=secno>4.10.7 </span>The <dfn><code>input</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -32879,10 +33134,10 @@
- <h5 id=states-of-the-type-attribute><span class=secno>4.10.5.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>
+ <h5 id=states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>
- <h6 id=hidden-state><span class=secno>4.10.5.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
+ <h6 id=hidden-state><span class=secno>4.10.7.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
<div class=impl>
@@ -32962,7 +33217,7 @@
</div>
- <h6 id=text-state-and-search-state><span class=secno>4.10.5.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>
+ <h6 id=text-state-and-search-state><span class=secno>4.10.7.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>
<!-- v2 idea: applying input masks to <input>, e.g. for entering
data with slashes and dashes (ack Greg Kilwein)
@@ -33059,7 +33314,7 @@
</div>
- <h6 id=telephone-state><span class=secno>4.10.5.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>
+ <h6 id=telephone-state><span class=secno>4.10.7.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>
<div class=impl>
@@ -33155,7 +33410,7 @@
</div>
- <h6 id=url-state><span class=secno>4.10.5.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>
+ <h6 id=url-state><span class=secno>4.10.7.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>
<div class=impl>
@@ -33292,7 +33547,7 @@
</div>
- <h6 id=e-mail-state><span class=secno>4.10.5.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>
+ <h6 id=e-mail-state><span class=secno>4.10.7.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>
<div class=impl>
@@ -33422,7 +33677,7 @@
</div>
- <h6 id=password-state><span class=secno>4.10.5.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>
+ <h6 id=password-state><span class=secno>4.10.7.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>
<div class=impl>
@@ -33510,7 +33765,7 @@
</div>
- <h6 id=date-and-time-state><span class=secno>4.10.5.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>
+ <h6 id=date-and-time-state><span class=secno>4.10.7.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>
<div class=impl>
@@ -33686,7 +33941,7 @@
</div>
- <h6 id=date-state><span class=secno>4.10.5.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>
+ <h6 id=date-state><span class=secno>4.10.7.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>
<div class=impl>
@@ -33833,7 +34088,7 @@
</div>
- <h6 id=month-state><span class=secno>4.10.5.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>
+ <h6 id=month-state><span class=secno>4.10.7.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>
<div class=impl>
@@ -33981,7 +34236,7 @@
</div>
- <h6 id=week-state><span class=secno>4.10.5.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>
+ <h6 id=week-state><span class=secno>4.10.7.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>
<div class=impl>
@@ -34129,7 +34384,7 @@
</div>
- <h6 id=time-state><span class=secno>4.10.5.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>
+ <h6 id=time-state><span class=secno>4.10.7.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>
<!-- v2: allow min="" and max="" to be set such that the range
crosses midnight, as in <input type=time min="23:00" max="02:00">
@@ -34275,7 +34530,7 @@
</div>
- <h6 id=local-date-and-time-state><span class=secno>4.10.5.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>
+ <h6 id=local-date-and-time-state><span class=secno>4.10.7.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>
<div class=impl>
@@ -34438,7 +34693,7 @@
</div>
- <h6 id=number-state><span class=secno>4.10.5.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>
+ <h6 id=number-state><span class=secno>4.10.7.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>
<div class=impl>
@@ -34568,7 +34823,7 @@
</div>
- <h6 id=range-state><span class=secno>4.10.5.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>
+ <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>
<div class=impl>
@@ -34788,7 +35043,7 @@
- <h6 id=color-state><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
+ <h6 id=color-state><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
<div class=impl>
@@ -34889,7 +35144,7 @@
</div>
- <h6 id=checkbox-state><span class=secno>4.10.5.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
+ <h6 id=checkbox-state><span class=secno>4.10.7.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
<div class=impl>
@@ -35000,7 +35255,7 @@
- <h6 id=radio-button-state><span class=secno>4.10.5.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
+ <h6 id=radio-button-state><span class=secno>4.10.7.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
<div class=impl>
@@ -35135,7 +35390,7 @@
- <h6 id=file-upload-state><span class=secno>4.10.5.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
+ <h6 id=file-upload-state><span class=secno>4.10.7.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
<!-- v2 ideas:
* maximum height/width or required ratio for image uploads? - Leons Petrazickis
@@ -35313,7 +35568,7 @@
- <h6 id=submit-button-state><span class=secno>4.10.5.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
+ <h6 id=submit-button-state><span class=secno>4.10.7.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
<div class=impl>
@@ -35403,7 +35658,7 @@
</div>
- <h6 id=image-button-state><span class=secno>4.10.5.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
+ <h6 id=image-button-state><span class=secno>4.10.7.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
<div class=impl>
@@ -35605,7 +35860,7 @@
- <h6 id=reset-button-state><span class=secno>4.10.5.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
+ <h6 id=reset-button-state><span class=secno>4.10.7.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
<div class=impl>
@@ -35686,7 +35941,7 @@
</div>
- <h6 id=button-state><span class=secno>4.10.5.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
+ <h6 id=button-state><span class=secno>4.10.7.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
<div class=impl>
@@ -35764,7 +36019,7 @@
- <h5 id=common-input-element-attributes><span class=secno>4.10.5.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>
+ <h5 id=common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>
<div class=impl>
@@ -35778,7 +36033,7 @@
</div>
- <h6 id=the-autocomplete-attribute><span class=secno>4.10.5.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>
+ <h6 id=the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
@@ -35882,7 +36137,7 @@
- <h6 id=the-list-attribute><span class=secno>4.10.5.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+ <h6 id=the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
<p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
attribute is used to identify an element that lists predefined
@@ -36003,7 +36258,7 @@
- <h6 id=the-readonly-attribute><span class=secno>4.10.5.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
+ <h6 id=the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
<p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
@@ -36052,7 +36307,7 @@
- <h6 id=the-size-attribute><span class=secno>4.10.5.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
+ <h6 id=the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
<p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
attribute gives the number of characters that, in a visual
@@ -36078,7 +36333,7 @@
- <h6 id=the-required-attribute><span class=secno>4.10.5.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
+ <h6 id=the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
<p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
@@ -36120,7 +36375,7 @@
</div>
- <h6 id=the-multiple-attribute><span class=secno>4.10.5.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
+ <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
<p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
@@ -36173,7 +36428,7 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.5.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
@@ -36199,7 +36454,7 @@
- <h6 id=the-pattern-attribute><span class=secno>4.10.5.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
+ <h6 id=the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
<p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
attribute specifies a regular expression against which the control's
@@ -36265,7 +36520,7 @@
- <h6 id=the-min-and-max-attributes><span class=secno>4.10.5.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
+ <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
<p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
the allowed range of values for the element.</p>
@@ -36343,7 +36598,7 @@
</div>
- <h6 id=the-step-attribute><span class=secno>4.10.5.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
+ <h6 id=the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
<p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
attribute indicates the granularity that is expected (and required)
@@ -36428,7 +36683,7 @@
- <h6 id=the-placeholder-attribute><span class=secno>4.10.5.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
+ <h6 id=the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
<!-- similar text in the <textarea> section -->
@@ -36473,7 +36728,7 @@
- <h5 id=common-input-element-apis><span class=secno>4.10.5.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
+ <h5 id=common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
<dl class=domintro><dt><var title="">input</var> . <code title=dom-input-value><a href=#dom-input-value>value</a></code> [ = <var title="">value</var> ]</dt>
@@ -36743,7 +36998,7 @@
<div class=impl>
- <h5 id=common-event-behaviors><span class=secno>4.10.5.4 </span>Common event behaviors</h5>
+ <h5 id=common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</h5>
<p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
event applies, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, the user agent must
@@ -36821,7 +37076,7 @@
- <h4 id=the-button-element><span class=secno>4.10.6 </span>The <dfn><code>button</code></dfn> element</h4>
+ <h4 id=the-button-element><span class=secno>4.10.8 </span>The <dfn><code>button</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -36988,7 +37243,7 @@
- <h4 id=the-select-element><span class=secno>4.10.7 </span>The <dfn><code>select</code></dfn> element</h4>
+ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -37372,7 +37627,7 @@
- <h4 id=the-datalist-element><span class=secno>4.10.8 </span>The <dfn><code>datalist</code></dfn> element</h4>
+ <h4 id=the-datalist-element><span class=secno>4.10.10 </span>The <dfn><code>datalist</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -37431,7 +37686,7 @@
</div>
- <h4 id=the-optgroup-element><span class=secno>4.10.9 </span>The <dfn><code>optgroup</code></dfn> element</h4>
+ <h4 id=the-optgroup-element><span class=secno>4.10.11 </span>The <dfn><code>optgroup</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -37516,7 +37771,7 @@
- <h4 id=the-option-element><span class=secno>4.10.10 </span>The <dfn><code>option</code></dfn> element</h4>
+ <h4 id=the-option-element><span class=secno>4.10.12 </span>The <dfn><code>option</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -37724,7 +37979,7 @@
- <h4 id=the-textarea-element><span class=secno>4.10.11 </span>The <dfn><code>textarea</code></dfn> element</h4>
+ <h4 id=the-textarea-element><span class=secno>4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38043,7 +38298,7 @@
- <h4 id=the-keygen-element><span class=secno>4.10.12 </span>The <dfn><code>keygen</code></dfn> element</h4>
+ <h4 id=the-keygen-element><span class=secno>4.10.14 </span>The <dfn><code>keygen</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38333,7 +38588,7 @@
- <h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output</code></dfn> element</h4>
+ <h4 id=the-output-element><span class=secno>4.10.15 </span>The <dfn><code>output</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38500,7 +38755,7 @@
- <h4 id=the-progress-element><span class=secno>4.10.14 </span>The <dfn><code>progress</code></dfn> element</h4>
+ <h4 id=the-progress-element><span class=secno>4.10.16 </span>The <dfn><code>progress</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38654,7 +38909,7 @@
- <h4 id=the-meter-element><span class=secno>4.10.15 </span>The <dfn><code>meter</code></dfn> element</h4>
+ <h4 id=the-meter-element><span class=secno>4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4>
<!-- Keep this after <progress> and NOT close to <time> -->
<dl class=element><dt>Categories</dt>
@@ -39007,7 +39262,7 @@
- <h4 id=association-of-controls-and-forms><span class=secno>4.10.16 </span>Association of controls and forms</h4>
+ <h4 id=association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</h4>
<p>A <a href=#form-associated-element>form-associated element</a> can have a relationship
with a <code><a href=#the-form-element>form</a></code> element, which is called the element's
@@ -39142,9 +39397,9 @@
- <h4 id=attributes-common-to-form-controls><span class=secno>4.10.17 </span><dfn>Attributes common to form controls</dfn></h4>
+ <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19 </span><dfn>Attributes common to form controls</dfn></h4>
- <h5 id=naming-form-controls><span class=secno>4.10.17.1 </span>Naming form controls</h5>
+ <h5 id=naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</h5>
<p>The <dfn id=attr-fe-name title=attr-fe-name><code>name</code></dfn> content
attribute gives the name of the form control, as used in <a href=#form-submission>form
@@ -39168,7 +39423,7 @@
</div>
- <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.17.2 </span>Enabling and disabling form controls</h5>
+ <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</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>
@@ -39202,7 +39457,7 @@
<div class=impl>
- <h5 id="a-form-control's-value"><span class=secno>4.10.17.3 </span>A form control's value</h5>
+ <h5 id="a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</h5>
<p>Form controls have a <dfn id=concept-fe-value title=concept-fe-value>value</dfn>
and a <dfn id=concept-fe-checked title=concept-fe-checked>checkedness</dfn>. (The latter
@@ -39213,7 +39468,7 @@
- <h5 id=autofocusing-a-form-control><span class=secno>4.10.17.4 </span>Autofocusing a form control</h5>
+ <h5 id=autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -39265,7 +39520,7 @@
</div>
- <h5 id=limiting-user-input-length><span class=secno>4.10.17.5 </span>Limiting user input length</h5>
+ <h5 id=limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</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
characters a user can input.</p>
@@ -39296,7 +39551,7 @@
- <h5 id=form-submission-0><span class=secno>4.10.17.6 </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
@@ -39445,9 +39700,9 @@
- <h4 id=constraints><span class=secno>4.10.18 </span>Constraints</h4>
+ <h4 id=constraints><span class=secno>4.10.20 </span>Constraints</h4>
- <h5 id=definitions><span class=secno>4.10.18.1 </span>Definitions</h5>
+ <h5 id=definitions><span class=secno>4.10.20.1 </span>Definitions</h5>
<div class=impl>
@@ -39534,7 +39789,7 @@
<div class=impl>
- <h5 id=constraint-validation><span class=secno>4.10.18.2 </span>Constraint validation</h5>
+ <h5 id=constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</h5>
<p>When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the
constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps, which return
@@ -39618,7 +39873,7 @@
- <h5 id=the-constraint-validation-api><span class=secno>4.10.18.3 </span>The <dfn>constraint validation API</dfn></h5>
+ <h5 id=the-constraint-validation-api><span class=secno>4.10.20.3 </span>The <dfn>constraint validation API</dfn></h5>
<dl class=domintro><dt><var title="">element</var> . <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code></dt>
@@ -39845,7 +40100,7 @@
</div>
- <h5 id=security-0><span class=secno>4.10.18.4 </span>Security</h5>
+ <h5 id=security-0><span class=secno>4.10.20.4 </span>Security</h5>
<p>Servers should not rely on client-side validation. Client-side
validation can be intentionally bypassed by hostile users, and
@@ -39857,11 +40112,11 @@
- <h4 id=form-submission><span class=secno>4.10.19 </span><dfn>Form submission</dfn></h4>
+ <h4 id=form-submission><span class=secno>4.10.21 </span><dfn>Form submission</dfn></h4>
<div class=impl>
- <h5 id=introduction-0><span class=secno>4.10.19.1 </span>Introduction</h5>
+ <h5 id=introduction-1><span class=secno>4.10.21.1 </span>Introduction</h5>
</div>
@@ -39909,7 +40164,7 @@
<div class=impl>
- <h5 id=implicit-submission><span class=secno>4.10.19.2 </span>Implicit submission</h5>
+ <h5 id=implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</h5>
<p>User agents may establish a <a href=#concept-button title=concept-button>button</a> in each form as being the
form's <dfn id=default-button>default button</dfn>. This should be the first <a href=#concept-submit-button title=concept-submit-button>submit button</a> in <a href=#tree-order>tree
@@ -39938,7 +40193,7 @@
<div class=impl>
- <h5 id=form-submission-algorithm><span class=secno>4.10.19.3 </span>Form submission algorithm</h5>
+ <h5 id=form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</h5>
<p>When a form <var title="">form</var> is <dfn id=concept-form-submit title=concept-form-submit>submitted</dfn> from an element <var title="">submitter</var> (typically a button), optionally with a
<var title="">scripted-submit</var> flag set, the user agent must
@@ -40484,7 +40739,7 @@
<div class=impl>
- <h5 id=url-encoded-form-data><span class=secno>4.10.19.4 </span>URL-encoded form data</h5>
+ <h5 id=url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</h5>
<p>The <dfn id=application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
algorithm</dfn> is as follows:</p>
@@ -40584,7 +40839,7 @@
<div class=impl>
- <h5 id=multipart-form-data><span class=secno>4.10.19.5 </span>Multipart form data</h5>
+ <h5 id=multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</h5>
<p>The <dfn id=multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
algorithm</dfn> is to encode the <var title="">form data set</var>
@@ -40606,7 +40861,7 @@
<div class=impl>
- <h5 id=plain-text-form-data><span class=secno>4.10.19.6 </span>Plain text form data</h5>
+ <h5 id=plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</h5>
<p>The <dfn id=text/plain-encoding-algorithm><code title="">text/plain</code> encoding
algorithm</dfn> is as follows:</p>
@@ -40665,7 +40920,7 @@
<div class=impl>
- <h4 id=resetting-a-form><span class=secno>4.10.20 </span>Resetting a form</h4>
+ <h4 id=resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</h4>
<p>When a form <var title="">form</var> is <dfn id=concept-form-reset title=concept-form-reset>reset</dfn>, the user agent must
<a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-reset>reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must
@@ -40686,7 +40941,7 @@
<div class=impl>
- <h4 id=event-dispatch><span class=secno>4.10.21 </span>Event dispatch</h4>
+ <h4 id=event-dispatch><span class=secno>4.10.23 </span>Event dispatch</h4>
<p>When the user agent is to <dfn id=broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</dfn> or
<dfn id=broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
@@ -46655,7 +46910,7 @@
-->
- <h3 id=introduction-1><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-2><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -55156,7 +55411,7 @@
-->
- <h4 id=introduction-2><span class=secno>6.6.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>6.6.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -57132,7 +57387,7 @@
<h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
- <h4 id=introduction-3><span class=secno>7.1.1 </span>Introduction</h4>
+ <h4 id=introduction-4><span class=secno>7.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to
run in the context of a document. These mechanisms include, but are
@@ -61319,7 +61574,7 @@
</div>
- <h4 id=introduction-4><span class=secno>8.9.1 </span>Introduction</h4>
+ <h4 id=introduction-5><span class=secno>8.9.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -63347,7 +63602,7 @@
- <h3 id=introduction-5><span class=secno>9.1 </span>Introduction</h3>
+ <h3 id=introduction-6><span class=secno>9.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>9.1.1 </span>Scope</h4>
@@ -66509,7 +66764,7 @@
<iframe>s and long polling)."><span class=secno>10.3.4 </span>The Web Socket protocol</h4>
- <h5 id=introduction-6><span class=secno>10.3.4.1 </span>Introduction</h5>
+ <h5 id=introduction-7><span class=secno>10.3.4.1 </span>Introduction</h5>
<h6 id=background-0><span class=secno>10.3.4.1.1 </span>Background</h6>
@@ -68384,7 +68639,7 @@
</div>
- <h4 id=introduction-7><span class=secno>10.4.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>10.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -68711,7 +68966,7 @@
<h3 id=channel-messaging><span class=secno>10.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-8><span class=secno>10.5.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>10.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -69156,7 +69411,7 @@
- <h3 id=introduction-9><span class=secno>11.1 </span>Introduction</h3>
+ <h3 id=introduction-10><span class=secno>11.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -80958,7 +81213,7 @@
lead to this experience.</i></p>
- <h3 id=introduction-10><span class=secno>14.1 </span>Introduction</h3>
+ <h3 id=introduction-11><span class=secno>14.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
@@ -80996,7 +81251,7 @@
<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <h4 id=introduction-11><span class=secno>14.2.1 </span>Introduction</h4>
+ <h4 id=introduction-12><span class=secno>14.2.1 </span>Introduction</h4>
<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
@@ -82210,7 +82465,7 @@
<h3 id=bindings><span class=secno>14.4 </span>Bindings</h3>
- <h4 id=introduction-12><span class=secno>14.4.1 </span>Introduction</h4>
+ <h4 id=introduction-13><span class=secno>14.4.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
Modified: index
===================================================================
--- index 2010-02-16 09:00:58 UTC (rev 4751)
+++ index 2010-02-17 04:49:57 UTC (rev 4752)
@@ -159,7 +159,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<hgroup><h1>HTML5 (including next generation additions still in development)</h1>
- <h2 class="no-num no-toc">Draft Standard — 16 February 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 17 February 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -547,86 +547,92 @@
<li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#the-form-element><span class=secno>4.10.1 </span>The <code>form</code> element</a></li>
- <li><a href=#the-fieldset-element><span class=secno>4.10.2 </span>The <code>fieldset</code> element</a></li>
- <li><a href=#the-legend-element><span class=secno>4.10.3 </span>The <code>legend</code> element</a></li>
- <li><a href=#the-label-element><span class=secno>4.10.4 </span>The <code>label</code> element</a></li>
- <li><a href=#the-input-element><span class=secno>4.10.5 </span>The <code>input</code> element</a>
+ <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
<ol>
- <li><a href=#states-of-the-type-attribute><span class=secno>4.10.5.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
+ <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
+ <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
+ <li><a href=#configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</a></ol></li>
+ <li><a href=#categories><span class=secno>4.10.2 </span>Categories</a></li>
+ <li><a href=#the-form-element><span class=secno>4.10.3 </span>The <code>form</code> element</a></li>
+ <li><a href=#the-fieldset-element><span class=secno>4.10.4 </span>The <code>fieldset</code> element</a></li>
+ <li><a href=#the-legend-element><span class=secno>4.10.5 </span>The <code>legend</code> element</a></li>
+ <li><a href=#the-label-element><span class=secno>4.10.6 </span>The <code>label</code> element</a></li>
+ <li><a href=#the-input-element><span class=secno>4.10.7 </span>The <code>input</code> element</a>
+ <ol>
+ <li><a href=#states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type>type</code> attribute</a>
<ol>
- <li><a href=#hidden-state><span class=secno>4.10.5.1.1 </span>Hidden state</a></li>
- <li><a href=#text-state-and-search-state><span class=secno>4.10.5.1.2 </span>Text state and Search state</a></li>
- <li><a href=#telephone-state><span class=secno>4.10.5.1.3 </span>Telephone state</a></li>
- <li><a href=#url-state><span class=secno>4.10.5.1.4 </span>URL state</a></li>
- <li><a href=#e-mail-state><span class=secno>4.10.5.1.5 </span>E-mail state</a></li>
- <li><a href=#password-state><span class=secno>4.10.5.1.6 </span>Password state</a></li>
- <li><a href=#date-and-time-state><span class=secno>4.10.5.1.7 </span>Date and Time state</a></li>
- <li><a href=#date-state><span class=secno>4.10.5.1.8 </span>Date state</a></li>
- <li><a href=#month-state><span class=secno>4.10.5.1.9 </span>Month state</a></li>
- <li><a href=#week-state><span class=secno>4.10.5.1.10 </span>Week state</a></li>
- <li><a href=#time-state><span class=secno>4.10.5.1.11 </span>Time state</a></li>
- <li><a href=#local-date-and-time-state><span class=secno>4.10.5.1.12 </span>Local Date and Time state</a></li>
- <li><a href=#number-state><span class=secno>4.10.5.1.13 </span>Number state</a></li>
- <li><a href=#range-state><span class=secno>4.10.5.1.14 </span>Range state</a></li>
- <li><a href=#color-state><span class=secno>4.10.5.1.15 </span>Color state</a></li>
- <li><a href=#checkbox-state><span class=secno>4.10.5.1.16 </span>Checkbox state</a></li>
- <li><a href=#radio-button-state><span class=secno>4.10.5.1.17 </span>Radio Button state</a></li>
- <li><a href=#file-upload-state><span class=secno>4.10.5.1.18 </span>File Upload state</a></li>
- <li><a href=#submit-button-state><span class=secno>4.10.5.1.19 </span>Submit Button state</a></li>
- <li><a href=#image-button-state><span class=secno>4.10.5.1.20 </span>Image Button state</a></li>
- <li><a href=#reset-button-state><span class=secno>4.10.5.1.21 </span>Reset Button state</a></li>
- <li><a href=#button-state><span class=secno>4.10.5.1.22 </span>Button state</a></ol></li>
- <li><a href=#common-input-element-attributes><span class=secno>4.10.5.2 </span>Common <code>input</code> element attributes</a>
+ <li><a href=#hidden-state><span class=secno>4.10.7.1.1 </span>Hidden state</a></li>
+ <li><a href=#text-state-and-search-state><span class=secno>4.10.7.1.2 </span>Text state and Search state</a></li>
+ <li><a href=#telephone-state><span class=secno>4.10.7.1.3 </span>Telephone state</a></li>
+ <li><a href=#url-state><span class=secno>4.10.7.1.4 </span>URL state</a></li>
+ <li><a href=#e-mail-state><span class=secno>4.10.7.1.5 </span>E-mail state</a></li>
+ <li><a href=#password-state><span class=secno>4.10.7.1.6 </span>Password state</a></li>
+ <li><a href=#date-and-time-state><span class=secno>4.10.7.1.7 </span>Date and Time state</a></li>
+ <li><a href=#date-state><span class=secno>4.10.7.1.8 </span>Date state</a></li>
+ <li><a href=#month-state><span class=secno>4.10.7.1.9 </span>Month state</a></li>
+ <li><a href=#week-state><span class=secno>4.10.7.1.10 </span>Week state</a></li>
+ <li><a href=#time-state><span class=secno>4.10.7.1.11 </span>Time state</a></li>
+ <li><a href=#local-date-and-time-state><span class=secno>4.10.7.1.12 </span>Local Date and Time state</a></li>
+ <li><a href=#number-state><span class=secno>4.10.7.1.13 </span>Number state</a></li>
+ <li><a href=#range-state><span class=secno>4.10.7.1.14 </span>Range state</a></li>
+ <li><a href=#color-state><span class=secno>4.10.7.1.15 </span>Color state</a></li>
+ <li><a href=#checkbox-state><span class=secno>4.10.7.1.16 </span>Checkbox state</a></li>
+ <li><a href=#radio-button-state><span class=secno>4.10.7.1.17 </span>Radio Button state</a></li>
+ <li><a href=#file-upload-state><span class=secno>4.10.7.1.18 </span>File Upload state</a></li>
+ <li><a href=#submit-button-state><span class=secno>4.10.7.1.19 </span>Submit Button state</a></li>
+ <li><a href=#image-button-state><span class=secno>4.10.7.1.20 </span>Image Button state</a></li>
+ <li><a href=#reset-button-state><span class=secno>4.10.7.1.21 </span>Reset Button state</a></li>
+ <li><a href=#button-state><span class=secno>4.10.7.1.22 </span>Button state</a></ol></li>
+ <li><a href=#common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code>input</code> element attributes</a>
<ol>
- <li><a href=#the-autocomplete-attribute><span class=secno>4.10.5.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
- <li><a href=#the-list-attribute><span class=secno>4.10.5.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
- <li><a href=#the-readonly-attribute><span class=secno>4.10.5.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
- <li><a href=#the-size-attribute><span class=secno>4.10.5.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
- <li><a href=#the-required-attribute><span class=secno>4.10.5.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
- <li><a href=#the-multiple-attribute><span class=secno>4.10.5.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
- <li><a href=#the-maxlength-attribute><span class=secno>4.10.5.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
- <li><a href=#the-pattern-attribute><span class=secno>4.10.5.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
- <li><a href=#the-min-and-max-attributes><span class=secno>4.10.5.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
- <li><a href=#the-step-attribute><span class=secno>4.10.5.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
- <li><a href=#the-placeholder-attribute><span class=secno>4.10.5.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
- <li><a href=#common-input-element-apis><span class=secno>4.10.5.3 </span>Common <code>input</code> element APIs</a></li>
- <li><a href=#common-event-behaviors><span class=secno>4.10.5.4 </span>Common event behaviors</a></ol></li>
- <li><a href=#the-button-element><span class=secno>4.10.6 </span>The <code>button</code> element</a></li>
- <li><a href=#the-select-element><span class=secno>4.10.7 </span>The <code>select</code> element</a></li>
- <li><a href=#the-datalist-element><span class=secno>4.10.8 </span>The <code>datalist</code> element</a></li>
- <li><a href=#the-optgroup-element><span class=secno>4.10.9 </span>The <code>optgroup</code> element</a></li>
- <li><a href=#the-option-element><span class=secno>4.10.10 </span>The <code>option</code> element</a></li>
- <li><a href=#the-textarea-element><span class=secno>4.10.11 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-keygen-element><span class=secno>4.10.12 </span>The <code>keygen</code> element</a></li>
- <li><a href=#the-output-element><span class=secno>4.10.13 </span>The <code>output</code> element</a></li>
- <li><a href=#the-progress-element><span class=secno>4.10.14 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-meter-element><span class=secno>4.10.15 </span>The <code>meter</code> element</a></li>
- <li><a href=#association-of-controls-and-forms><span class=secno>4.10.16 </span>Association of controls and forms</a></li>
- <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.17 </span>Attributes common to form controls</a>
+ <li><a href=#the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
+ <li><a href=#the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list>list</code> attribute</a></li>
+ <li><a href=#the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly>readonly</code> attribute</a></li>
+ <li><a href=#the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size>size</code> attribute</a></li>
+ <li><a href=#the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required>required</code> attribute</a></li>
+ <li><a href=#the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple>multiple</code> attribute</a></li>
+ <li><a href=#the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength>maxlength</code> attribute</a></li>
+ <li><a href=#the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern>pattern</code> attribute</a></li>
+ <li><a href=#the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min>min</code> and <code title=attr-input-max>max</code> attributes</a></li>
+ <li><a href=#the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step>step</code> attribute</a></li>
+ <li><a href=#the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder>placeholder</code> attribute</a></ol></li>
+ <li><a href=#common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code>input</code> element APIs</a></li>
+ <li><a href=#common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</a></ol></li>
+ <li><a href=#the-button-element><span class=secno>4.10.8 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-select-element><span class=secno>4.10.9 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-datalist-element><span class=secno>4.10.10 </span>The <code>datalist</code> element</a></li>
+ <li><a href=#the-optgroup-element><span class=secno>4.10.11 </span>The <code>optgroup</code> element</a></li>
+ <li><a href=#the-option-element><span class=secno>4.10.12 </span>The <code>option</code> element</a></li>
+ <li><a href=#the-textarea-element><span class=secno>4.10.13 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-keygen-element><span class=secno>4.10.14 </span>The <code>keygen</code> element</a></li>
+ <li><a href=#the-output-element><span class=secno>4.10.15 </span>The <code>output</code> element</a></li>
+ <li><a href=#the-progress-element><span class=secno>4.10.16 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-meter-element><span class=secno>4.10.17 </span>The <code>meter</code> element</a></li>
+ <li><a href=#association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</a></li>
+ <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.19 </span>Attributes common to form controls</a>
<ol>
- <li><a href=#naming-form-controls><span class=secno>4.10.17.1 </span>Naming form controls</a></li>
- <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.17.2 </span>Enabling and disabling form controls</a></li>
- <li><a href="#a-form-control's-value"><span class=secno>4.10.17.3 </span>A form control's value</a></li>
- <li><a href=#autofocusing-a-form-control><span class=secno>4.10.17.4 </span>Autofocusing a form control</a></li>
- <li><a href=#limiting-user-input-length><span class=secno>4.10.17.5 </span>Limiting user input length</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.17.6 </span>Form submission</a></ol></li>
- <li><a href=#constraints><span class=secno>4.10.18 </span>Constraints</a>
+ <li><a href=#naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</a></li>
+ <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</a></li>
+ <li><a href="#a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</a></li>
+ <li><a href=#autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</a></li>
+ <li><a href=#limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</a></li>
+ <li><a href=#form-submission-0><span class=secno>4.10.19.6 </span>Form submission</a></ol></li>
+ <li><a href=#constraints><span class=secno>4.10.20 </span>Constraints</a>
<ol>
- <li><a href=#definitions><span class=secno>4.10.18.1 </span>Definitions</a></li>
- <li><a href=#constraint-validation><span class=secno>4.10.18.2 </span>Constraint validation</a></li>
- <li><a href=#the-constraint-validation-api><span class=secno>4.10.18.3 </span>The constraint validation API</a></li>
- <li><a href=#security-0><span class=secno>4.10.18.4 </span>Security</a></ol></li>
- <li><a href=#form-submission><span class=secno>4.10.19 </span>Form submission</a>
+ <li><a href=#definitions><span class=secno>4.10.20.1 </span>Definitions</a></li>
+ <li><a href=#constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</a></li>
+ <li><a href=#the-constraint-validation-api><span class=secno>4.10.20.3 </span>The constraint validation API</a></li>
+ <li><a href=#security-0><span class=secno>4.10.20.4 </span>Security</a></ol></li>
+ <li><a href=#form-submission><span class=secno>4.10.21 </span>Form submission</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.19.1 </span>Introduction</a></li>
- <li><a href=#implicit-submission><span class=secno>4.10.19.2 </span>Implicit submission</a></li>
- <li><a href=#form-submission-algorithm><span class=secno>4.10.19.3 </span>Form submission algorithm</a></li>
- <li><a href=#url-encoded-form-data><span class=secno>4.10.19.4 </span>URL-encoded form data</a></li>
- <li><a href=#multipart-form-data><span class=secno>4.10.19.5 </span>Multipart form data</a></li>
- <li><a href=#plain-text-form-data><span class=secno>4.10.19.6 </span>Plain text form data</a></ol></li>
- <li><a href=#resetting-a-form><span class=secno>4.10.20 </span>Resetting a form</a></li>
- <li><a href=#event-dispatch><span class=secno>4.10.21 </span>Event dispatch</a></ol></li>
+ <li><a href=#introduction-1><span class=secno>4.10.21.1 </span>Introduction</a></li>
+ <li><a href=#implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</a></li>
+ <li><a href=#form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</a></li>
+ <li><a href=#url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</a></li>
+ <li><a href=#multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</a></li>
+ <li><a href=#plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</a></ol></li>
+ <li><a href=#resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</a></li>
+ <li><a href=#event-dispatch><span class=secno>4.10.23 </span>Event dispatch</a></ol></li>
<li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
<ol>
<li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
@@ -698,7 +704,7 @@
<li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-1><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-2><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -788,7 +794,7 @@
<li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-2><span class=secno>6.6.1 </span>Introduction</a>
+ <li><a href=#introduction-3><span class=secno>6.6.1 </span>Introduction</a>
<ol>
<li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
<li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -807,7 +813,7 @@
<ol>
<li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-3><span class=secno>7.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-4><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
<ol>
@@ -865,7 +871,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.8 </span>Spelling and grammar checking</a></li>
<li><a href=#dnd><span class=secno>8.9 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-4><span class=secno>8.9.1 </span>Introduction</a></li>
+ <li><a href=#introduction-5><span class=secno>8.9.1 </span>Introduction</a></li>
<li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
<li><a href=#dndevents><span class=secno>8.9.3 </span>Events fired during a drag-and-drop action</a></li>
<li><a href=#drag-and-drop-processing-model><span class=secno>8.9.4 </span>Drag-and-drop processing model</a>
@@ -890,7 +896,7 @@
<li><a href=#event-definitions-0><span class=secno>9.1 </span>Event definitions</a></li>
<li><a href=#crossDocumentMessages><span class=secno>9.2 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-5><span class=secno>9.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-6><span class=secno>9.2.1 </span>Introduction</a></li>
<li><a href=#security-4><span class=secno>9.2.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.2.2.1 </span>Authors</a></li>
@@ -899,7 +905,7 @@
<li><a href=#posting-messages-with-message-ports><span class=secno>9.2.4 </span>Posting messages with message ports</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.3 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-6><span class=secno>9.3.1 </span>Introduction</a></li>
+ <li><a href=#introduction-7><span class=secno>9.3.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>9.3.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>9.3.3 </span>Message ports</a>
<ol>
@@ -1058,10 +1064,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>11.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>12 </span>Rendering</a>
<ol>
- <li><a href=#introduction-7><span class=secno>12.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>12.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-8><span class=secno>12.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>12.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>12.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>12.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>12.2.4 </span>Alignment</a></li>
@@ -1079,7 +1085,7 @@
<li><a href=#toolbars-0><span class=secno>12.3.5 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>12.4 </span>Bindings</a>
<ol>
- <li><a href=#introduction-9><span class=secno>12.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>12.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>12.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>12.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>12.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -30757,6 +30763,10 @@
<td> 11.6% <td> 12.3% <td> 12.6%
</table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+ <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>
+
+ <p><i>This section is non-normative.</i></p>
+
<p>Forms allow unscripted client-server interaction: given a form, a
user can provide data, submit it to the server, and have the server
act on it accordingly (e.g. returning the results of a search or
@@ -30764,6 +30774,251 @@
interaction with no associated submission mechanism, in conjunction
with scripts.</p>
+ <p>Writing a form consists of several steps, which can be performed
+ in any order: writing the user interface, implementing the
+ server-side processing, and configuring the user interface to
+ communicate with the server.</p>
+
+
+ <h5 id="writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>For the purposes of this brief introduction, we will create a
+ pizza ordering form.</p>
+
+ <p>Any form starts with a <code><a href=#the-form-element>form</a></code> element, inside which
+ are placed the controls. Most controls are represented by the
+ <code><a href=#the-input-element>input</a></code> element, which by default provides a one-line
+ text field. To label a control, the <code><a href=#the-label-element>label</a></code> element is
+ used; the label text and the control itself go inside the
+ <code><a href=#the-label-element>label</a></code> element. Each part of a form is considered a
+ <a href=#paragraph>paragraph</a>, and is typically separated from other parts
+ using <code><a href=#the-p-element>p</a></code> elements. Putting this together, here is how
+ one might ask for the customer's name:</p>
+
+ <pre><strong><form>
+ <p><label>Customer name: <input></label></p>
+</form></strong></pre>
+
+ <p>To let the user select the size of the pizza, we can use a set of
+ radio buttons. Radio buttons also use the <code><a href=#the-input-element>input</a></code>
+ element, this time with a <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute with the value <code title=attr-input-type-radio><a href=#radio-button-state>radio</a></code>. To make the radio
+ buttons work as a group, they are given a common name using the
+ <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one
+ can use the <code><a href=#the-fieldset-element>fieldset</a></code> element. The title of such a group
+ of controls is given by the first element in the
+ <code><a href=#the-fieldset-element>fieldset</a></code>, which has to be a <code><a href=#the-legend-element>legend</a></code>
+ element.</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>To pick toppings, we can use checkboxes. These use the
+ <code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute with the value <code title=attr-input-type-checkbox><a href=#checkbox-state>checkbox</a></code>:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+<strong> <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>The pizzeria for which this form is being written is always
+ making mistakes, so it needs a way to contact the customer. For this
+ purpose, we can use form controls specifically for telephone numbers
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-tel><a href=#telephone-state>tel</a></code>) and e-mail addresses
+ (<code><a href=#the-input-element>input</a></code> elements with their <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-email><a href=#e-mail-state>email</a></code>):</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p></strong>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+</form></pre>
+
+ <p>We can use an <code><a href=#the-input-element>input</a></code> element with its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute set to <code title=attr-input-type-time><a href=#time-state>time</a></code> to ask for a delivery
+ time. Many of these form controls have attributes to control exactly
+ what values can be specified; in this case, three attributes of
+ particular interest are <code title=attr-input-min><a href=#attr-input-min>min</a></code>,
+ <code title=attr-input-max><a href=#attr-input-max>max</a></code>, and <code title=attr-input-step><a href=#attr-input-step>step</a></code>. These set the minimum time, the
+ maximum time, and the interval between allowed values (in
+ seconds). This pizzeria only delivers between 11am and 9pm, and
+ doesn't promise anything better than 15 minute increments, which we
+ can mark up as follows:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
+</form></pre>
+
+ <p>Finally, to make the form submittable we use the
+ <code><a href=#the-button-element>button</a></code> element:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
+<strong> <p><button>Submit order</button><p></strong>
+</form></pre>
+
+
+ <h5 id=implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The exact details for writing a server-side processor are out of
+ scope for this specification. For the purposes of this introduction,
+ we will assume that the script at <code title="">https://pizza.example.com/order.cgi</code> is configured to
+ accept submissions using the <code title=attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code>
+ format, expecting the following parameters sent in an HTTP POST
+ body:</p>
+
+ <dl><dt><code title="">custname</code></dt>
+ <dd>Customer's name</dd>
+
+ <dt><code title="">custtel</code></dt>
+ <dd>Customer's telephone number</dd>
+
+ <dt><code title="">custemail</code></dt>
+ <dd>Customer's e-mail address</dd>
+
+ <dt><code title="">size</code></dt>
+ <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
+
+ <dt><code title="">toppings</code></dt>
+ <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>
+
+ <dt><code title="">delivery</code></dt>
+ <dd>The requested delivery time</dd>
+
+ </dl><h5 id=configuring-o-form-to-communicate-with-a-server><span class=secno>4.10.1.3 </span>Configuring o form to communicate with a server</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Form submissions are exposed to servers in a variety of ways,
+ most commonly as HTTP GET or POST requests. To specify the exact
+ method used, the <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>
+ attribute is specified on the <code><a href=#the-form-element>form</a></code> element. This
+ doesn't specify how the form data is encoded, though; to specify
+ that, you use the <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>
+ attribute. You also have to specify the <a href=#url>URL</a> of the
+ service that will handle the submitted data, using the <code title=attr-fs-action><a href=#attr-fs-action>action</a></code> attribute.</p>
+
+ <p>For each form control you want submitted, you then have to give a
+ name that will be used to refer to the data in the submission. We
+ already specified the name for the group of radio buttons; the same
+ attribute (<code title=attr-fe-name><a href=#attr-fe-name>name</a></code>) also specifies
+ the submission name. Radio buttons can be distinguished from each
+ other in the submission by giving them different values, using the
+ <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute.</p>
+
+ <p>Multiple controls can have the same name; for example, here we
+ give all the checkboxes the same name, and the server distinguishes
+ which checkbox was checked by seeing which values are submitted with
+ that name — like the radio buttons, they are also given unique
+ values with the <code title=attr-input-value><a href=#attr-input-value>value</a></code>
+ attribute.</p>
+
+ <p>Given the settings in the previous section, this all becomes:</p>
+
+ <pre><form<strong> method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi"</strong>>
+ <p><label>Customer name: <input<strong> name="custname"</strong>></label></p>
+ <p><label>Telephone: <input type=tel<strong> name="custtel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email<strong> name="custemail"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size<strong> value="small"</strong>> Small </label></p>
+ <p><label> <input type=radio name=size<strong> value="medium"</strong>> Medium </label></p>
+ <p><label> <input type=radio name=size<strong> value="large"</strong>> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox<strong> name="topping" value="bacon"</strong>> Bacon </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="cheese"</strong>> Extra Cheese </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="onion"</strong>> Onion </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+ <p>For example, if the customer entered "Denise Lawrence" as their
+ name, "555-321-8642" as their telephone number, did not specify an
+ e-mail address, asked for a medium-sized pizza, selected the Extra
+ Cheese and Mushroom toppings, and entered a delivery time of 7pm,
+ the user agent would submit the following to the online Web
+ service:</p>
+
+ <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+
+
+
+
+ <h4 id=categories><span class=secno>4.10.2 </span>Categories</h4>
+
<p>Mostly for historical reasons, elements in this section fall into
several overlapping (but subtly different) categories in addition to
the usual ones like <a href=#flow-content>flow content</a>, <a href=#phrasing-content>phrasing
@@ -30861,7 +31116,7 @@
submission</a>.</p>
- <h4 id=the-form-element><span class=secno>4.10.1 </span>The <dfn><code>form</code></dfn> element</h4>
+ <h4 id=the-form-element><span class=secno>4.10.3 </span>The <dfn><code>form</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31180,7 +31435,7 @@
- <h4 id=the-fieldset-element><span class=secno>4.10.2 </span>The <dfn><code>fieldset</code></dfn> element</h4>
+ <h4 id=the-fieldset-element><span class=secno>4.10.4 </span>The <dfn><code>fieldset</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31294,7 +31549,7 @@
</div>
- <h4 id=the-legend-element><span class=secno>4.10.3 </span>The <dfn><code>legend</code></dfn> element</h4>
+ <h4 id=the-legend-element><span class=secno>4.10.5 </span>The <dfn><code>legend</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -31338,7 +31593,7 @@
- <h4 id=the-label-element><span class=secno>4.10.4 </span>The <dfn><code>label</code></dfn> element</h4>
+ <h4 id=the-label-element><span class=secno>4.10.6 </span>The <dfn><code>label</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31476,7 +31731,7 @@
</div>
- <h4 id=the-input-element><span class=secno>4.10.5 </span>The <dfn><code>input</code></dfn> element</h4>
+ <h4 id=the-input-element><span class=secno>4.10.7 </span>The <dfn><code>input</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -32781,10 +33036,10 @@
- <h5 id=states-of-the-type-attribute><span class=secno>4.10.5.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>
+ <h5 id=states-of-the-type-attribute><span class=secno>4.10.7.1 </span>States of the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute</h5>
- <h6 id=hidden-state><span class=secno>4.10.5.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
+ <h6 id=hidden-state><span class=secno>4.10.7.1.1 </span><dfn title=attr-input-type-hidden>Hidden</dfn> state</h6>
<div class=impl>
@@ -32864,7 +33119,7 @@
</div>
- <h6 id=text-state-and-search-state><span class=secno>4.10.5.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>
+ <h6 id=text-state-and-search-state><span class=secno>4.10.7.1.2 </span><dfn title=attr-input-type-text>Text</dfn> state and <dfn title=attr-input-type-search>Search</dfn> state</h6>
<!-- v2 idea: applying input masks to <input>, e.g. for entering
data with slashes and dashes (ack Greg Kilwein)
@@ -32961,7 +33216,7 @@
</div>
- <h6 id=telephone-state><span class=secno>4.10.5.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>
+ <h6 id=telephone-state><span class=secno>4.10.7.1.3 </span><dfn title=attr-input-type-tel>Telephone</dfn> state</h6>
<div class=impl>
@@ -33057,7 +33312,7 @@
</div>
- <h6 id=url-state><span class=secno>4.10.5.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>
+ <h6 id=url-state><span class=secno>4.10.7.1.4 </span><dfn title=attr-input-type-url>URL</dfn> state</h6>
<div class=impl>
@@ -33194,7 +33449,7 @@
</div>
- <h6 id=e-mail-state><span class=secno>4.10.5.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>
+ <h6 id=e-mail-state><span class=secno>4.10.7.1.5 </span><dfn title=attr-input-type-email>E-mail</dfn> state</h6>
<div class=impl>
@@ -33324,7 +33579,7 @@
</div>
- <h6 id=password-state><span class=secno>4.10.5.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>
+ <h6 id=password-state><span class=secno>4.10.7.1.6 </span><dfn title=attr-input-type-password>Password</dfn> state</h6>
<div class=impl>
@@ -33412,7 +33667,7 @@
</div>
- <h6 id=date-and-time-state><span class=secno>4.10.5.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>
+ <h6 id=date-and-time-state><span class=secno>4.10.7.1.7 </span><dfn title=attr-input-type-datetime>Date and Time</dfn> state</h6>
<div class=impl>
@@ -33588,7 +33843,7 @@
</div>
- <h6 id=date-state><span class=secno>4.10.5.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>
+ <h6 id=date-state><span class=secno>4.10.7.1.8 </span><dfn title=attr-input-type-date>Date</dfn> state</h6>
<div class=impl>
@@ -33735,7 +33990,7 @@
</div>
- <h6 id=month-state><span class=secno>4.10.5.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>
+ <h6 id=month-state><span class=secno>4.10.7.1.9 </span><dfn title=attr-input-type-month>Month</dfn> state</h6>
<div class=impl>
@@ -33883,7 +34138,7 @@
</div>
- <h6 id=week-state><span class=secno>4.10.5.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>
+ <h6 id=week-state><span class=secno>4.10.7.1.10 </span><dfn title=attr-input-type-week>Week</dfn> state</h6>
<div class=impl>
@@ -34031,7 +34286,7 @@
</div>
- <h6 id=time-state><span class=secno>4.10.5.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>
+ <h6 id=time-state><span class=secno>4.10.7.1.11 </span><dfn title=attr-input-type-time>Time</dfn> state</h6>
<!-- v2: allow min="" and max="" to be set such that the range
crosses midnight, as in <input type=time min="23:00" max="02:00">
@@ -34177,7 +34432,7 @@
</div>
- <h6 id=local-date-and-time-state><span class=secno>4.10.5.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>
+ <h6 id=local-date-and-time-state><span class=secno>4.10.7.1.12 </span><dfn title=attr-input-type-datetime-local>Local Date and Time</dfn> state</h6>
<div class=impl>
@@ -34340,7 +34595,7 @@
</div>
- <h6 id=number-state><span class=secno>4.10.5.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>
+ <h6 id=number-state><span class=secno>4.10.7.1.13 </span><dfn title=attr-input-type-number>Number</dfn> state</h6>
<div class=impl>
@@ -34470,7 +34725,7 @@
</div>
- <h6 id=range-state><span class=secno>4.10.5.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>
+ <h6 id=range-state><span class=secno>4.10.7.1.14 </span><dfn title=attr-input-type-range>Range</dfn> state</h6>
<div class=impl>
@@ -34690,7 +34945,7 @@
- <h6 id=color-state><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
+ <h6 id=color-state><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
<div class=impl>
@@ -34791,7 +35046,7 @@
</div>
- <h6 id=checkbox-state><span class=secno>4.10.5.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
+ <h6 id=checkbox-state><span class=secno>4.10.7.1.16 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
<div class=impl>
@@ -34902,7 +35157,7 @@
- <h6 id=radio-button-state><span class=secno>4.10.5.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
+ <h6 id=radio-button-state><span class=secno>4.10.7.1.17 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
<div class=impl>
@@ -35037,7 +35292,7 @@
- <h6 id=file-upload-state><span class=secno>4.10.5.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
+ <h6 id=file-upload-state><span class=secno>4.10.7.1.18 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
<!-- v2 ideas:
* maximum height/width or required ratio for image uploads? - Leons Petrazickis
@@ -35215,7 +35470,7 @@
- <h6 id=submit-button-state><span class=secno>4.10.5.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
+ <h6 id=submit-button-state><span class=secno>4.10.7.1.19 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
<div class=impl>
@@ -35305,7 +35560,7 @@
</div>
- <h6 id=image-button-state><span class=secno>4.10.5.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
+ <h6 id=image-button-state><span class=secno>4.10.7.1.20 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
<div class=impl>
@@ -35507,7 +35762,7 @@
- <h6 id=reset-button-state><span class=secno>4.10.5.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
+ <h6 id=reset-button-state><span class=secno>4.10.7.1.21 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
<div class=impl>
@@ -35588,7 +35843,7 @@
</div>
- <h6 id=button-state><span class=secno>4.10.5.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
+ <h6 id=button-state><span class=secno>4.10.7.1.22 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
<div class=impl>
@@ -35666,7 +35921,7 @@
- <h5 id=common-input-element-attributes><span class=secno>4.10.5.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>
+ <h5 id=common-input-element-attributes><span class=secno>4.10.7.2 </span>Common <code><a href=#the-input-element>input</a></code> element attributes</h5>
<div class=impl>
@@ -35680,7 +35935,7 @@
</div>
- <h6 id=the-autocomplete-attribute><span class=secno>4.10.5.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>
+ <h6 id=the-autocomplete-attribute><span class=secno>4.10.7.2.1 </span>The <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> attribute</h6>
<p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
@@ -35784,7 +36039,7 @@
- <h6 id=the-list-attribute><span class=secno>4.10.5.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
+ <h6 id=the-list-attribute><span class=secno>4.10.7.2.2 </span>The <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute</h6>
<p>The <dfn id=attr-input-list title=attr-input-list><code>list</code></dfn>
attribute is used to identify an element that lists predefined
@@ -35905,7 +36160,7 @@
- <h6 id=the-readonly-attribute><span class=secno>4.10.5.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
+ <h6 id=the-readonly-attribute><span class=secno>4.10.7.2.3 </span>The <code title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute</h6>
<p>The <dfn id=attr-input-readonly title=attr-input-readonly><code>readonly</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that controls whether
@@ -35954,7 +36209,7 @@
- <h6 id=the-size-attribute><span class=secno>4.10.5.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
+ <h6 id=the-size-attribute><span class=secno>4.10.7.2.4 </span>The <code title=attr-input-size><a href=#attr-input-size>size</a></code> attribute</h6>
<p>The <dfn id=attr-input-size title=attr-input-size><code>size</code></dfn>
attribute gives the number of characters that, in a visual
@@ -35980,7 +36235,7 @@
- <h6 id=the-required-attribute><span class=secno>4.10.5.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
+ <h6 id=the-required-attribute><span class=secno>4.10.7.2.5 </span>The <code title=attr-input-required><a href=#attr-input-required>required</a></code> attribute</h6>
<p>The <dfn id=attr-input-required title=attr-input-required><code>required</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, the
@@ -36022,7 +36277,7 @@
</div>
- <h6 id=the-multiple-attribute><span class=secno>4.10.5.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
+ <h6 id=the-multiple-attribute><span class=secno>4.10.7.2.6 </span>The <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute</h6>
<p>The <dfn id=attr-input-multiple title=attr-input-multiple><code>multiple</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a> that indicates whether
@@ -36075,7 +36330,7 @@
</div>
- <h6 id=the-maxlength-attribute><span class=secno>4.10.5.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
+ <h6 id=the-maxlength-attribute><span class=secno>4.10.7.2.7 </span>The <code title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> attribute</h6>
<p>The <dfn id=attr-input-maxlength title=attr-input-maxlength><code>maxlength</code></dfn>
attribute<span class=impl>, when it applies,</span> is a <a href=#attr-fe-maxlength title=attr-fe-maxlength>form control <code title="">maxlength</code> attribute</a><span class=impl>
@@ -36101,7 +36356,7 @@
- <h6 id=the-pattern-attribute><span class=secno>4.10.5.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
+ <h6 id=the-pattern-attribute><span class=secno>4.10.7.2.8 </span>The <code title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute</h6>
<p>The <dfn id=attr-input-pattern title=attr-input-pattern><code>pattern</code></dfn>
attribute specifies a regular expression against which the control's
@@ -36167,7 +36422,7 @@
- <h6 id=the-min-and-max-attributes><span class=secno>4.10.5.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
+ <h6 id=the-min-and-max-attributes><span class=secno>4.10.7.2.9 </span>The <code title=attr-input-min><a href=#attr-input-min>min</a></code> and <code title=attr-input-max><a href=#attr-input-max>max</a></code> attributes</h6>
<p>The <dfn id=attr-input-min title=attr-input-min><code>min</code></dfn> and <dfn id=attr-input-max title=attr-input-max><code>max</code></dfn> attributes indicate
the allowed range of values for the element.</p>
@@ -36245,7 +36500,7 @@
</div>
- <h6 id=the-step-attribute><span class=secno>4.10.5.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
+ <h6 id=the-step-attribute><span class=secno>4.10.7.2.10 </span>The <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute</h6>
<p>The <dfn id=attr-input-step title=attr-input-step><code>step</code></dfn>
attribute indicates the granularity that is expected (and required)
@@ -36330,7 +36585,7 @@
- <h6 id=the-placeholder-attribute><span class=secno>4.10.5.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
+ <h6 id=the-placeholder-attribute><span class=secno>4.10.7.2.11 </span>The <code title=attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute</h6>
<!-- similar text in the <textarea> section -->
@@ -36375,7 +36630,7 @@
- <h5 id=common-input-element-apis><span class=secno>4.10.5.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
+ <h5 id=common-input-element-apis><span class=secno>4.10.7.3 </span>Common <code><a href=#the-input-element>input</a></code> element APIs</h5>
<dl class=domintro><dt><var title="">input</var> . <code title=dom-input-value><a href=#dom-input-value>value</a></code> [ = <var title="">value</var> ]</dt>
@@ -36645,7 +36900,7 @@
<div class=impl>
- <h5 id=common-event-behaviors><span class=secno>4.10.5.4 </span>Common event behaviors</h5>
+ <h5 id=common-event-behaviors><span class=secno>4.10.7.4 </span>Common event behaviors</h5>
<p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
event applies, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change, the user agent must
@@ -36723,7 +36978,7 @@
- <h4 id=the-button-element><span class=secno>4.10.6 </span>The <dfn><code>button</code></dfn> element</h4>
+ <h4 id=the-button-element><span class=secno>4.10.8 </span>The <dfn><code>button</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -36890,7 +37145,7 @@
- <h4 id=the-select-element><span class=secno>4.10.7 </span>The <dfn><code>select</code></dfn> element</h4>
+ <h4 id=the-select-element><span class=secno>4.10.9 </span>The <dfn><code>select</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -37274,7 +37529,7 @@
- <h4 id=the-datalist-element><span class=secno>4.10.8 </span>The <dfn><code>datalist</code></dfn> element</h4>
+ <h4 id=the-datalist-element><span class=secno>4.10.10 </span>The <dfn><code>datalist</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -37333,7 +37588,7 @@
</div>
- <h4 id=the-optgroup-element><span class=secno>4.10.9 </span>The <dfn><code>optgroup</code></dfn> element</h4>
+ <h4 id=the-optgroup-element><span class=secno>4.10.11 </span>The <dfn><code>optgroup</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -37418,7 +37673,7 @@
- <h4 id=the-option-element><span class=secno>4.10.10 </span>The <dfn><code>option</code></dfn> element</h4>
+ <h4 id=the-option-element><span class=secno>4.10.12 </span>The <dfn><code>option</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -37626,7 +37881,7 @@
- <h4 id=the-textarea-element><span class=secno>4.10.11 </span>The <dfn><code>textarea</code></dfn> element</h4>
+ <h4 id=the-textarea-element><span class=secno>4.10.13 </span>The <dfn><code>textarea</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -37945,7 +38200,7 @@
- <h4 id=the-keygen-element><span class=secno>4.10.12 </span>The <dfn><code>keygen</code></dfn> element</h4>
+ <h4 id=the-keygen-element><span class=secno>4.10.14 </span>The <dfn><code>keygen</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38235,7 +38490,7 @@
- <h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output</code></dfn> element</h4>
+ <h4 id=the-output-element><span class=secno>4.10.15 </span>The <dfn><code>output</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38402,7 +38657,7 @@
- <h4 id=the-progress-element><span class=secno>4.10.14 </span>The <dfn><code>progress</code></dfn> element</h4>
+ <h4 id=the-progress-element><span class=secno>4.10.16 </span>The <dfn><code>progress</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -38556,7 +38811,7 @@
- <h4 id=the-meter-element><span class=secno>4.10.15 </span>The <dfn><code>meter</code></dfn> element</h4>
+ <h4 id=the-meter-element><span class=secno>4.10.17 </span>The <dfn><code>meter</code></dfn> element</h4>
<!-- Keep this after <progress> and NOT close to <time> -->
<dl class=element><dt>Categories</dt>
@@ -38909,7 +39164,7 @@
- <h4 id=association-of-controls-and-forms><span class=secno>4.10.16 </span>Association of controls and forms</h4>
+ <h4 id=association-of-controls-and-forms><span class=secno>4.10.18 </span>Association of controls and forms</h4>
<p>A <a href=#form-associated-element>form-associated element</a> can have a relationship
with a <code><a href=#the-form-element>form</a></code> element, which is called the element's
@@ -39044,9 +39299,9 @@
- <h4 id=attributes-common-to-form-controls><span class=secno>4.10.17 </span><dfn>Attributes common to form controls</dfn></h4>
+ <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19 </span><dfn>Attributes common to form controls</dfn></h4>
- <h5 id=naming-form-controls><span class=secno>4.10.17.1 </span>Naming form controls</h5>
+ <h5 id=naming-form-controls><span class=secno>4.10.19.1 </span>Naming form controls</h5>
<p>The <dfn id=attr-fe-name title=attr-fe-name><code>name</code></dfn> content
attribute gives the name of the form control, as used in <a href=#form-submission>form
@@ -39070,7 +39325,7 @@
</div>
- <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.17.2 </span>Enabling and disabling form controls</h5>
+ <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.19.2 </span>Enabling and disabling form controls</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>
@@ -39104,7 +39359,7 @@
<div class=impl>
- <h5 id="a-form-control's-value"><span class=secno>4.10.17.3 </span>A form control's value</h5>
+ <h5 id="a-form-control's-value"><span class=secno>4.10.19.3 </span>A form control's value</h5>
<p>Form controls have a <dfn id=concept-fe-value title=concept-fe-value>value</dfn>
and a <dfn id=concept-fe-checked title=concept-fe-checked>checkedness</dfn>. (The latter
@@ -39115,7 +39370,7 @@
- <h5 id=autofocusing-a-form-control><span class=secno>4.10.17.4 </span>Autofocusing a form control</h5>
+ <h5 id=autofocusing-a-form-control><span class=secno>4.10.19.4 </span>Autofocusing a form control</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -39167,7 +39422,7 @@
</div>
- <h5 id=limiting-user-input-length><span class=secno>4.10.17.5 </span>Limiting user input length</h5>
+ <h5 id=limiting-user-input-length><span class=secno>4.10.19.5 </span>Limiting user input length</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
characters a user can input.</p>
@@ -39198,7 +39453,7 @@
- <h5 id=form-submission-0><span class=secno>4.10.17.6 </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
@@ -39347,9 +39602,9 @@
- <h4 id=constraints><span class=secno>4.10.18 </span>Constraints</h4>
+ <h4 id=constraints><span class=secno>4.10.20 </span>Constraints</h4>
- <h5 id=definitions><span class=secno>4.10.18.1 </span>Definitions</h5>
+ <h5 id=definitions><span class=secno>4.10.20.1 </span>Definitions</h5>
<div class=impl>
@@ -39436,7 +39691,7 @@
<div class=impl>
- <h5 id=constraint-validation><span class=secno>4.10.18.2 </span>Constraint validation</h5>
+ <h5 id=constraint-validation><span class=secno>4.10.20.2 </span>Constraint validation</h5>
<p>When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the
constraints</dfn> of <code><a href=#the-form-element>form</a></code> element <var title="">form</var>, it must run the following steps, which return
@@ -39520,7 +39775,7 @@
- <h5 id=the-constraint-validation-api><span class=secno>4.10.18.3 </span>The <dfn>constraint validation API</dfn></h5>
+ <h5 id=the-constraint-validation-api><span class=secno>4.10.20.3 </span>The <dfn>constraint validation API</dfn></h5>
<dl class=domintro><dt><var title="">element</var> . <code title=dom-cva-willValidate><a href=#dom-cva-willvalidate>willValidate</a></code></dt>
@@ -39747,7 +40002,7 @@
</div>
- <h5 id=security-0><span class=secno>4.10.18.4 </span>Security</h5>
+ <h5 id=security-0><span class=secno>4.10.20.4 </span>Security</h5>
<p>Servers should not rely on client-side validation. Client-side
validation can be intentionally bypassed by hostile users, and
@@ -39759,11 +40014,11 @@
- <h4 id=form-submission><span class=secno>4.10.19 </span><dfn>Form submission</dfn></h4>
+ <h4 id=form-submission><span class=secno>4.10.21 </span><dfn>Form submission</dfn></h4>
<div class=impl>
- <h5 id=introduction-0><span class=secno>4.10.19.1 </span>Introduction</h5>
+ <h5 id=introduction-1><span class=secno>4.10.21.1 </span>Introduction</h5>
</div>
@@ -39811,7 +40066,7 @@
<div class=impl>
- <h5 id=implicit-submission><span class=secno>4.10.19.2 </span>Implicit submission</h5>
+ <h5 id=implicit-submission><span class=secno>4.10.21.2 </span>Implicit submission</h5>
<p>User agents may establish a <a href=#concept-button title=concept-button>button</a> in each form as being the
form's <dfn id=default-button>default button</dfn>. This should be the first <a href=#concept-submit-button title=concept-submit-button>submit button</a> in <a href=#tree-order>tree
@@ -39840,7 +40095,7 @@
<div class=impl>
- <h5 id=form-submission-algorithm><span class=secno>4.10.19.3 </span>Form submission algorithm</h5>
+ <h5 id=form-submission-algorithm><span class=secno>4.10.21.3 </span>Form submission algorithm</h5>
<p>When a form <var title="">form</var> is <dfn id=concept-form-submit title=concept-form-submit>submitted</dfn> from an element <var title="">submitter</var> (typically a button), optionally with a
<var title="">scripted-submit</var> flag set, the user agent must
@@ -40386,7 +40641,7 @@
<div class=impl>
- <h5 id=url-encoded-form-data><span class=secno>4.10.19.4 </span>URL-encoded form data</h5>
+ <h5 id=url-encoded-form-data><span class=secno>4.10.21.4 </span>URL-encoded form data</h5>
<p>The <dfn id=application/x-www-form-urlencoded-encoding-algorithm><code title="">application/x-www-form-urlencoded</code> encoding
algorithm</dfn> is as follows:</p>
@@ -40486,7 +40741,7 @@
<div class=impl>
- <h5 id=multipart-form-data><span class=secno>4.10.19.5 </span>Multipart form data</h5>
+ <h5 id=multipart-form-data><span class=secno>4.10.21.5 </span>Multipart form data</h5>
<p>The <dfn id=multipart/form-data-encoding-algorithm><code title="">multipart/form-data</code> encoding
algorithm</dfn> is to encode the <var title="">form data set</var>
@@ -40508,7 +40763,7 @@
<div class=impl>
- <h5 id=plain-text-form-data><span class=secno>4.10.19.6 </span>Plain text form data</h5>
+ <h5 id=plain-text-form-data><span class=secno>4.10.21.6 </span>Plain text form data</h5>
<p>The <dfn id=text/plain-encoding-algorithm><code title="">text/plain</code> encoding
algorithm</dfn> is as follows:</p>
@@ -40567,7 +40822,7 @@
<div class=impl>
- <h4 id=resetting-a-form><span class=secno>4.10.20 </span>Resetting a form</h4>
+ <h4 id=resetting-a-form><span class=secno>4.10.22 </span>Resetting a form</h4>
<p>When a form <var title="">form</var> is <dfn id=concept-form-reset title=concept-form-reset>reset</dfn>, the user agent must
<a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-reset>reset</code>, that is cancelable, at <var title="">form</var>, and then, if that event is not canceled, must
@@ -40588,7 +40843,7 @@
<div class=impl>
- <h4 id=event-dispatch><span class=secno>4.10.21 </span>Event dispatch</h4>
+ <h4 id=event-dispatch><span class=secno>4.10.23 </span>Event dispatch</h4>
<p>When the user agent is to <dfn id=broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code> events</dfn> or
<dfn id=broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
@@ -46557,7 +46812,7 @@
-->
- <h3 id=introduction-1><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-2><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -55061,7 +55316,7 @@
-->
- <h4 id=introduction-2><span class=secno>6.6.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>6.6.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -57049,7 +57304,7 @@
<h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
- <h4 id=introduction-3><span class=secno>7.1.1 </span>Introduction</h4>
+ <h4 id=introduction-4><span class=secno>7.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to
run in the context of a document. These mechanisms include, but are
@@ -61247,7 +61502,7 @@
</div>
- <h4 id=introduction-4><span class=secno>8.9.1 </span>Introduction</h4>
+ <h4 id=introduction-5><span class=secno>8.9.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -63404,7 +63659,7 @@
</div>
- <h4 id=introduction-5><span class=secno>9.2.1 </span>Introduction</h4>
+ <h4 id=introduction-6><span class=secno>9.2.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -63731,7 +63986,7 @@
<h3 id=channel-messaging><span class=secno>9.3 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-6><span class=secno>9.3.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>9.3.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -75267,7 +75522,7 @@
lead to this experience.</i></p>
- <h3 id=introduction-7><span class=secno>12.1 </span>Introduction</h3>
+ <h3 id=introduction-8><span class=secno>12.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
@@ -75305,7 +75560,7 @@
<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>12.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <h4 id=introduction-8><span class=secno>12.2.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>12.2.1 </span>Introduction</h4>
<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
@@ -76519,7 +76774,7 @@
<h3 id=bindings><span class=secno>12.4 </span>Bindings</h3>
- <h4 id=introduction-9><span class=secno>12.4.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>12.4.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
Modified: source
===================================================================
--- source 2010-02-16 09:00:58 UTC (rev 4751)
+++ source 2010-02-17 04:49:57 UTC (rev 4752)
@@ -34053,6 +34053,10 @@
<h3 id="forms">Forms</h3>
+ <h4>Introduction</h4>
+
+ <p><i>This section is non-normative.</i></p>
+
<p>Forms allow unscripted client-server interaction: given a form, a
user can provide data, submit it to the server, and have the server
act on it accordingly (e.g. returning the results of a search or
@@ -34060,6 +34064,269 @@
interaction with no associated submission mechanism, in conjunction
with scripts.</p>
+ <p>Writing a form consists of several steps, which can be performed
+ in any order: writing the user interface, implementing the
+ server-side processing, and configuring the user interface to
+ communicate with the server.</p>
+
+
+ <h5>Writing a form's user interface</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>For the purposes of this brief introduction, we will create a
+ pizza ordering form.</p>
+
+ <p>Any form starts with a <code>form</code> element, inside which
+ are placed the controls. Most controls are represented by the
+ <code>input</code> element, which by default provides a one-line
+ text field. To label a control, the <code>label</code> element is
+ used; the label text and the control itself go inside the
+ <code>label</code> element. Each part of a form is considered a
+ <span>paragraph</span>, and is typically separated from other parts
+ using <code>p</code> elements. Putting this together, here is how
+ one might ask for the customer's name:</p>
+
+ <pre><strong><form>
+ <p><label>Customer name: <input></label></p>
+</form></strong></pre>
+
+ <p>To let the user select the size of the pizza, we can use a set of
+ radio buttons. Radio buttons also use the <code>input</code>
+ element, this time with a <code title="attr-input-type">type</code>
+ attribute with the value <code
+ title="attr-input-type-radio">radio</code>. To make the radio
+ buttons work as a group, they are given a common name using the
+ <code title="attr-fe-name">name</code> attribute. To group a batch
+ of controls together, such as, in this case, the radio buttons, one
+ can use the <code>fieldset</code> element. The title of such a group
+ of controls is given by the first element in the
+ <code>fieldset</code>, which has to be a <code>legend</code>
+ element.</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>To pick toppings, we can use checkboxes. These use the
+ <code>input</code> element with a <code
+ title="attr-input-type">type</code> attribute with the value <code
+ title="attr-input-type-checkbox">checkbox</code>:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+<strong> <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset></strong>
+</form></pre>
+
+ <p>The pizzeria for which this form is being written is always
+ making mistakes, so it needs a way to contact the customer. For this
+ purpose, we can use form controls specifically for telephone numbers
+ (<code>input</code> elements with their <code
+ title="attr-input-type">type</code> attribute set to <code
+ title="attr-input-type-tel">tel</code>) and e-mail addresses
+ (<code>input</code> elements with their <code
+ title="attr-input-type">type</code> attribute set to <code
+ title="attr-input-type-email">email</code>):</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+<strong> <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p></strong>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+</form></pre>
+
+ <p>We can use an <code>input</code> element with its <code
+ title="attr-input-type">type</code> attribute set to <code
+ title="attr-input-type-time">time</code> to ask for a delivery
+ time. Many of these form controls have attributes to control exactly
+ what values can be specified; in this case, three attributes of
+ particular interest are <code title="attr-input-min">min</code>,
+ <code title="attr-input-max">max</code>, and <code
+ title="attr-input-step">step</code>. These set the minimum time, the
+ maximum time, and the interval between allowed values (in
+ seconds). This pizzeria only delivers between 11am and 9pm, and
+ doesn't promise anything better than 15 minute increments, which we
+ can mark up as follows:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+<strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
+</form></pre>
+
+ <p>Finally, to make the form submittable we use the
+ <code>button</code> element:</p>
+
+ <pre><form>
+ <p><label>Customer name: <input></label></p>
+ <p><label>Telephone: <input type=tel></label></p>
+ <p><label>E-mail address: <input type=email></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size> Small </label></p>
+ <p><label> <input type=radio name=size> Medium </label></p>
+ <p><label> <input type=radio name=size> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox> Bacon </label></p>
+ <p><label> <input type=checkbox> Extra Cheese </label></p>
+ <p><label> <input type=checkbox> Onion </label></p>
+ <p><label> <input type=checkbox> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
+<strong> <p><button>Submit order</button><p></strong>
+</form></pre>
+
+
+ <h5>Implementing the server-side processing for a form</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The exact details for writing a server-side processor are out of
+ scope for this specification. For the purposes of this introduction,
+ we will assume that the script at <code
+ title="">https://pizza.example.com/order.cgi</code> is configured to
+ accept submissions using the <code
+ title="attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</code>
+ format, expecting the following parameters sent in an HTTP POST
+ body:</p>
+
+ <dl>
+
+ <dt><code title="">custname</code></dt>
+ <dd>Customer's name</dd>
+
+ <dt><code title="">custtel</code></dt>
+ <dd>Customer's telephone number</dd>
+
+ <dt><code title="">custemail</code></dt>
+ <dd>Customer's e-mail address</dd>
+
+ <dt><code title="">size</code></dt>
+ <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
+
+ <dt><code title="">toppings</code></dt>
+ <dd>The topping, specified once for each selected topping, with the allowed values being <code title="">bacon</code>, <code title="">cheese</code>, <code title="">onion</code>, and <code title="">mushroom</code></dd>
+
+ <dt><code title="">delivery</code></dt>
+ <dd>The requested delivery time</dd>
+
+ </dl>
+
+
+ <h5>Configuring o form to communicate with a server</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>Form submissions are exposed to servers in a variety of ways,
+ most commonly as HTTP GET or POST requests. To specify the exact
+ method used, the <code title="attr-fs-method">method</code>
+ attribute is specified on the <code>form</code> element. This
+ doesn't specify how the form data is encoded, though; to specify
+ that, you use the <code title="attr-fs-enctype">enctype</code>
+ attribute. You also have to specify the <span>URL</span> of the
+ service that will handle the submitted data, using the <code
+ title="attr-fs-action">action</code> attribute.</p>
+
+ <p>For each form control you want submitted, you then have to give a
+ name that will be used to refer to the data in the submission. We
+ already specified the name for the group of radio buttons; the same
+ attribute (<code title="attr-fe-name">name</code>) also specifies
+ the submission name. Radio buttons can be distinguished from each
+ other in the submission by giving them different values, using the
+ <code title="attr-input-value">value</code> attribute.</p>
+
+ <p>Multiple controls can have the same name; for example, here we
+ give all the checkboxes the same name, and the server distinguishes
+ which checkbox was checked by seeing which values are submitted with
+ that name — like the radio buttons, they are also given unique
+ values with the <code title="attr-input-value">value</code>
+ attribute.</p>
+
+ <p>Given the settings in the previous section, this all becomes:</p>
+
+ <pre><form<strong> method="post"
+ enctype="application/x-www-form-urlencoded"
+ action="https://pizza.example.com/order.cgi"</strong>>
+ <p><label>Customer name: <input<strong> name="custname"</strong>></label></p>
+ <p><label>Telephone: <input type=tel<strong> name="custtel"</strong>></label></p>
+ <p><label>E-mail address: <input type=email<strong> name="custemail"</strong>></label></p>
+ <fieldset>
+ <legend> Pizza Size </legend>
+ <p><label> <input type=radio name=size<strong> value="small"</strong>> Small </label></p>
+ <p><label> <input type=radio name=size<strong> value="medium"</strong>> Medium </label></p>
+ <p><label> <input type=radio name=size<strong> value="large"</strong>> Large </label></p>
+ </fieldset>
+ <fieldset>
+ <legend> Pizza Toppings </legend>
+ <p><label> <input type=checkbox<strong> name="topping" value="bacon"</strong>> Bacon </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="cheese"</strong>> Extra Cheese </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="onion"</strong>> Onion </label></p>
+ <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
+ </fieldset>
+ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
+ <p><button>Submit order</button><p>
+</form></pre>
+
+ <p>For example, if the customer entered "Denise Lawrence" as their
+ name, "555-321-8642" as their telephone number, did not specify an
+ e-mail address, asked for a medium-sized pizza, selected the Extra
+ Cheese and Mushroom toppings, and entered a delivery time of 7pm,
+ the user agent would submit the following to the online Web
+ service:</p>
+
+ <pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00</pre>
+
+
+
+
+ <h4>Categories</h4>
+
<p>Mostly for historical reasons, elements in this section fall into
several overlapping (but subtly different) categories in addition to
the usual ones like <span>flow content</span>, <span>phrasing
More information about the Commit-Watchers
mailing list