Browse files

[] (0) WF2: Categorise form elements; redefine form.elements; define …

…fieldset.elements; add more steps to form submission (still a work in progress)

git-svn-id: http://svn.whatwg.org/webapps@2161 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent d1e734d commit 24c6e9a46076251d2e60db64bcb07f09895334a2 @Hixie Hixie committed Sep 10, 2008
Showing with 182 additions and 31 deletions.
  1. +104 −20 index
  2. +78 −11 source
View
124 index
@@ -28,7 +28,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 8
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 10
September 2008</h2>
<p>You can take part in this work. <a
@@ -1063,7 +1063,7 @@
models</a>
<ul class=toc>
<li><a href="#constraint"><span class=secno>4.9.13.1.
- </span>Constraint checking</a>
+ </span>Constraint validation</a>
<li><a href="#form-submission"><span class=secno>4.9.13.2.
</span>Form submission</a>
@@ -26502,6 +26502,34 @@ function AddCloud(data, x, y) { ... }</pre>
<h3 id=forms><span class=secno>4.9 </span>Forms</h3>
+ <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 calculation). The
+ elements used in forms can also be used for user interaction with no
+ associated submission mechanism, in conjunction with scripts.
+
+ <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-content0">flow content</a>, <a
+ href="#phrasing0">phrasing content</a>, and <a
+ href="#interactive1">interactive content</a>.
+
+ <p>A number of the elements are <dfn id=form-associated
+ title="form-associated element">form-associated elements</dfn>, which
+ means they can have a <a href="#form-owner">form owner</a> and, to expose
+ this, have a <code title=attr-fae-form><a href="#form0">form</a></code>
+ content attribute with a matching <code title=dom-fae-form><a
+ href="#form1">form</a></code> DOM attribute.
+
+ <p>The controls that end up being submitted back to the server are in the
+ <dfn id=field title=category-field>field</dfn> category.
+
+ <p>The controls that are exposed to the <code title=dom-form-elements><a
+ href="#elements3"><var title="">form</var>.elements</a></code> and <code
+ title=dom-fieldset-elements><a href="#elements4"><var
+ title="">fieldset</var>.elements</a></code> APIs are in the <dfn id=listed
+ title=category-listed-form-element>listed form element</dfn> category.
+
<h4 id=the-form><span class=secno>4.9.1 </span>The <dfn
id=form><code>form</code></dfn> element</h4>
@@ -26565,18 +26593,14 @@ function AddCloud(data, x, y) { ... }</pre>
title=dom-form-elements><code>elements</code></dfn> DOM attribute must
return an <code><a
href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>
- rooted at the <code>Document</code> node, whose filter matches <code><a
- href="#input0">input</a></code>, <code><a
- href="#output">output</a></code>, <code><a
- href="#select">select</a></code>, <code><a
- href="#textarea">textarea</a></code>, <code><a
- href="#button">button</a></code>, and <code><a
- href="#fieldset">fieldset</a></code> elements whose <a
- href="#form-owner">form owner</a> is the <code><a
+ rooted at the <code>Document</code> node, whose filter matches <a
+ href="#listed" title=category-listed-form-element>listed form elements</a>
+ whose <a href="#form-owner">form owner</a> is the <code><a
href="#form">form</a></code> element, with the exception of <code><a
href="#input0">input</a></code> elements whose <code
title=attr-input-type>type</code> attribute is in the <span>Image
- Button</span> state.
+ Button</span> state, which must, for historical reasons, be excluded from
+ this particular collection.
<p>The <dfn id=length6 title=dom-form-length><code>length</code></dfn> DOM
attribute must return the number of nodes <a href="#represents"
@@ -26611,6 +26635,9 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#flow-content0">flow content</a> is expected.
@@ -26635,7 +26662,7 @@ function AddCloud(data, x, y) { ... }</pre>
readonly attribute DOMString <span title=dom-select-type>type</span>;
- readonly attribute <a href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a> <span title=dom-fieldset-elements>elements</span>;
+ readonly attribute <a href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a> <a href="#elements4" title=dom-fieldset-elements>elements</a>;
readonly attribute boolean <span title=dom-fieldset-willValidate>willValidate</span>;
readonly attribute <span>ValidityState</span> <span title=dom-fieldset-validity>validity</span>;
@@ -26647,6 +26674,15 @@ function AddCloud(data, x, y) { ... }</pre>
<p class=big-issue>...
+ <p>The <dfn id=elements4
+ title=dom-fieldset-elements><code>elements</code></dfn> DOM attribute must
+ return an <code><a
+ href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>
+ rooted at the <code>Document</code> node, whose filter matches <a
+ href="#listed" title=category-listed-form-element>listed form elements</a>
+ that are descendants of the <code><a href="#fieldset">fieldset</a></code>
+ element.
+
<h4 id=the-input><span class=secno>4.9.3 </span>The <dfn
id=input0><code>input</code></dfn> element</h4>
@@ -26659,6 +26695,11 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#field" title=category-field>Field</a>.
+
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#phrasing0">phrasing content</a> is expected.
@@ -26786,6 +26827,11 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#field" title=category-field>Field</a>.
+
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#phrasing0">phrasing content</a> is expected.
@@ -26895,6 +26941,11 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#field" title=category-field>Field</a>.
+
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#phrasing0">phrasing content</a> is expected.
@@ -27098,6 +27149,11 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href="#htmlelem
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#field" title=category-field>Field</a>.
+
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#phrasing0">phrasing content</a> is expected.
@@ -27183,6 +27239,9 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href="#htmlelem
<dd><a href="#form-associated">Form-associated element</a>.
+ <dd><a href="#listed" title=category-listed-form-element>Listed form
+ element</a>.
+
<dt>Contexts in which this element may be used:
<dd>Where <a href="#phrasing0">phrasing content</a> is expected.
@@ -27226,9 +27285,12 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href="#htmlelem
and forms</h4>
<!-- XXX consider xreffing the 'ID' term in this section -->
- <p>A <dfn id=form-associated>form-associated element</dfn> is one that can
- have a relationship with a <code><a href="#form">form</a></code> element,
- which is called the element's <dfn id=form-owner>form owner</dfn>.
+ <p>A <a href="#form-associated">form-associated element</a> can have a
+ relationship with a <code><a href="#form">form</a></code> element, which
+ is called the element's <dfn id=form-owner>form owner</dfn>. If a <a
+ href="#form-associated">form-associated element</a> is not associated with
+ a <code><a href="#form">form</a></code> element, its <a
+ href="#form-owner">form owner</a> is said to be null.
<p>A <a href="#form-associated">form-associated element</a> is, by default,
associated with its nearest ancestor <code><a href="#form">form</a></code>
@@ -27322,7 +27384,7 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href="#htmlelem
<h4 id=processing1><span class=secno>4.9.13 </span>Processing models</h4>
- <h5 id=constraint><span class=secno>4.9.13.1. </span>Constraint checking</h5>
+ <h5 id=constraint><span class=secno>4.9.13.1. </span>Constraint validation</h5>
<p class=big-issue>...
@@ -27342,6 +27404,28 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href="#htmlelem
abort these steps without doing anything.
<li>
+ <p>If the <var title="">submitter</var> is anything but a <code><a
+ href="#form">form</a></code> element, then <span>validate the
+ constraints</span> of <var title="">form</var> and examine the result:
+ if the result is negative (the constraint validation concluded that
+ there were invalid fields and informed the user of this) then abort
+ these steps.
+
+ <li>
+ <p>If the <var title="">submitter</var> is anything but a <code><a
+ href="#form">form</a></code> element, then <a href="#firing2">fire a
+ simple event</a> that bubbles<!--XXX-->, named <code
+ title=event-submit>submit</code>, at <var title="">form</var>. If the
+ event's default action is prevented (i.e. if the event is canceled) then
+ abort these steps. Otherwise, continue (effectively the default action
+ is to perform the submission).
+
+ <li>
+ <p>Let <var title="">controls</var> be a list of all the <a href="#field"
+ title=category-field>fields</a> whose <a href="#form-owner">form
+ owner</a> is <var title="">form</var>.
+
+ <li>
<p class=big-issue>...
</ol>
@@ -46110,7 +46194,7 @@ interface <dfn id=messagechannel>MessageChannel</dfn> {
and <a href="#space" title="space character">space characters</a>.
<li>The root element, in the form of an <code><a
- href="#html">html</a></code> <a href="#elements4"
+ href="#html">html</a></code> <a href="#elements5"
title=syntax-elements>element</a>.
<li>Any number of <a href="#comments0" title=syntax-comments>comments</a>
@@ -46262,7 +46346,7 @@ interface <dfn id=messagechannel>MessageChannel</dfn> {
<h4 id=elements1><span class=secno>8.1.2 </span>Elements</h4>
- <p>There are five different kinds of <dfn id=elements4
+ <p>There are five different kinds of <dfn id=elements5
title=syntax-elements>elements</dfn>: void elements, CDATA elements,
RCDATA elements, foreign elements, and normal elements.
@@ -46350,7 +46434,7 @@ interface <dfn id=messagechannel>MessageChannel</dfn> {
is <em>not</em> marked as self-closing can have <a href="#text2"
title=syntax-text>text</a>, <a href="#character5"
title=syntax-charref>character references</a>, <a href="#cdata1"
- title=syntax-cdata>CDATA sections</a>, other <a href="#elements4"
+ title=syntax-cdata>CDATA sections</a>, other <a href="#elements5"
title=syntax-elements>elements</a>, and <a href="#comments0"
title=syntax-comments>comments</a>, but the text must not contain the
character U+003C LESS-THAN SIGN (<code>&lt;</code>) or an <a
@@ -46359,7 +46443,7 @@ interface <dfn id=messagechannel>MessageChannel</dfn> {
<p>Normal elements can have <a href="#text2" title=syntax-text>text</a>, <a
href="#character5" title=syntax-charref>character references</a>, other <a
- href="#elements4" title=syntax-elements>elements</a>, and <a
+ href="#elements5" title=syntax-elements>elements</a>, and <a
href="#comments0" title=syntax-comments>comments</a>, but the text must
not contain the character U+003C LESS-THAN SIGN (<code>&lt;</code>) or an
<a href="#ambiguous" title=syntax-ambiguous-ampersand>ambiguous
View
89 source
@@ -23886,6 +23886,35 @@ function AddCloud(data, x, y) { ... }</pre>
<h3 id="forms">Forms</h3>
+ <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
+ calculation). The elements used in forms can also be used for user
+ interaction with no associated submission mechanism, in conjunction
+ with scripts.</p>
+
+ <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
+ content</span>, and <span>interactive content</span>.</p>
+
+ <p>A number of the elements are <dfn title="form-associated
+ element">form-associated elements</dfn>, which means they can have a
+ <span>form owner</span> and, to expose this, have a <code
+ title="attr-fae-form">form</code> content attribute with a matching
+ <code title="dom-fae-form">form</code> DOM attribute.</p>
+
+ <p>The controls that end up being submitted back to the server are
+ in the <dfn title="category-field">field</dfn> category.</p>
+
+ <p>The controls that are exposed to the <code
+ title="dom-form-elements"><var title="">form</var>.elements</code>
+ and <code title="dom-fieldset-elements"><var
+ title="">fieldset</var>.elements</code> APIs are in the <dfn
+ title="category-listed-form-element">listed form element</dfn>
+ category.</p>
+
+
<h4>The <dfn><code>form</code></dfn> element</h4>
<dl class="element">
@@ -23931,13 +23960,13 @@ function AddCloud(data, x, y) { ... }</pre>
<p>The <dfn title="dom-form-elements"><code>elements</code></dfn>
DOM attribute must return an <code>HTMLFormControlsCollection</code>
- rooted at the <code>Document</code> node, whose filter matches
- <code>input</code>, <code>output</code>, <code>select</code>,
- <code>textarea</code>, <code>button</code>, and
- <code>fieldset</code> elements whose <span>form owner</span> is the
- <code>form</code> element, with the exception of <code>input</code>
- elements whose <code title="attr-input-type">type</code> attribute
- is in the <span>Image Button</span> state.</p>
+ rooted at the <code>Document</code> node, whose filter matches <span
+ title="category-listed-form-element">listed form elements</span>
+ whose <span>form owner</span> is the <code>form</code> element, with
+ the exception of <code>input</code> elements whose <code
+ title="attr-input-type">type</code> attribute is in the <span>Image
+ Button</span> state, which must, for historical reasons, be excluded
+ from this particular collection.</p>
<p>The <dfn title="dom-form-length"><code>length</code></dfn> DOM
attribute must return the number of nodes <span title="represented
@@ -23967,6 +23996,7 @@ function AddCloud(data, x, y) { ... }</pre>
<dt>Categories</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -23995,6 +24025,13 @@ function AddCloud(data, x, y) { ... }</pre>
<p class="big-issue">...</p>
+ <p>The <dfn
+ title="dom-fieldset-elements"><code>elements</code></dfn> DOM
+ attribute must return an <code>HTMLFormControlsCollection</code>
+ rooted at the <code>Document</code> node, whose filter matches <span
+ title="category-listed-form-element">listed form elements</span>
+ that are descendants of the <code>fieldset</code> element.</p>
+
<h4>The <dfn><code>input</code></dfn> element</h4>
@@ -24003,6 +24040,8 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Interactive content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-field">Field</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -24096,6 +24135,8 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Interactive content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-field">Field</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -24173,6 +24214,8 @@ function AddCloud(data, x, y) { ... }</pre>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Interactive content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-field">Field</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -24324,6 +24367,8 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<dd><span>Phrasing content</span>.</dd>
<dd><span>Interactive content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-field">Field</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -24388,6 +24433,7 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<dt>Categories</dt>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Form-associated element</span>.</dd>
+ <dd><span title="category-listed-form-element">Listed form element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -24423,9 +24469,11 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<!-- XXX consider xreffing the 'ID' term in this section -->
- <p>A <dfn>form-associated element</dfn> is one that can have a
- relationship with a <code>form</code> element, which is called the
- element's <dfn>form owner</dfn>.</p>
+ <p>A <span>form-associated element</span> can have a relationship
+ with a <code>form</code> element, which is called the element's
+ <dfn>form owner</dfn>. If a <span>form-associated element</span> is
+ not associated with a <code>form</code> element, its <span>form
+ owner</span> is said to be null.</p>
<p>A <span>form-associated element</span> is, by default, associated
with its nearest ancestor <code>form</code> element (as described
@@ -24516,7 +24564,7 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<h4>Processing models</h4>
- <h5>Constraint checking</h5>
+ <h5>Constraint validation</h5>
<p class="big-issue">...</p>
@@ -24535,6 +24583,25 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
<span>sandboxed forms browsing context flag</span> set, then abort
these steps without doing anything.</p></li>
+ <li><p>If the <var title="">submitter</var> is anything but a
+ <code>form</code> element, then <span>validate the
+ constraints</span> of <var title="">form</var> and examine the
+ result: if the result is negative (the constraint validation
+ concluded that there were invalid fields and informed the user of
+ this) then abort these steps.</p></li>
+
+ <li><p>If the <var title="">submitter</var> is anything but a
+ <code>form</code> element, then <span>fire a simple event</span>
+ that bubbles<!--XXX-->, named <code
+ title="event-submit">submit</code>, at <var title="">form</var>. If
+ the event's default action is prevented (i.e. if the event is
+ canceled) then abort these steps. Otherwise, continue (effectively
+ the default action is to perform the submission).</p></li>
+
+ <li><p>Let <var title="">controls</var> be a list of all the <span
+ title="category-field">fields</span> whose <span>form owner</span>
+ is <var title="">form</var>.</p></li>
+
<li><p class="big-issue">...</p></li>
</ol>

0 comments on commit 24c6e9a

Please sign in to comment.