Skip to content

Commit

Permalink
[] (0) WF2: forminput/formchange, rework how <option> defines a comma…
Browse files Browse the repository at this point in the history 
…nd, and editorial fixes.

git-svn-id: http://svn.whatwg.org/webapps@2390 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Nov 6, 2008
1 parent a571d46 commit 6756fb8
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 95 deletions.
93 changes: 45 additions & 48 deletions index
View file
Expand Up @@ -16,7 +16,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 5 November 2008</h2>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 6 November 2008</h2>
<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>
<dl><dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -24249,7 +24249,7 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>

<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

</div>

Expand Down Expand Up @@ -25508,7 +25508,8 @@ function AddCloud(data, x, y) { ... }</pre>
value it had before the <a href=#pre-click-activation-steps>pre-click activation steps</a> were
run. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a simple
event</a> called <code title=event-change>change</code> at the
element.</p>
element, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
element's <a href=#form-owner>form owner</a>.</p>

<p><strong>Constraint validation:</strong> If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and its <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> is false, then the
element is <a href=#suffering-from-being-missing>suffering from being missing</a>.</p>
Expand Down Expand Up @@ -25613,7 +25614,8 @@ function AddCloud(data, x, y) { ... }</pre>
the element's <a href=#concept-fe-checked title=concept-fe-checked>checkedness</a> to
false. The <a href=#activation-behavior>activation behavior</a> is to <a href=#fire-a-simple-event>fire a
simple event</a> called <code title=event-change>change</code>
at the element.</p>
at the element, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
element's <a href=#form-owner>form owner</a>.</p>

<p><strong>Constraint validation:</strong> If the element is <i title=concept-input-required><a href=#concept-input-required>required</a></i> and all of the
<code><a href=#the-input-element>input</a></code> elements in the <i><a href=#radio-button-group>radio button group</a></i> have a
Expand Down Expand Up @@ -25838,7 +25840,7 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

</div>

Expand Down Expand Up @@ -25997,7 +25999,7 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

</div>

Expand Down Expand Up @@ -26064,7 +26066,7 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

</div>

Expand Down Expand Up @@ -26121,7 +26123,7 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
<code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not fire.</p>
<p>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>

</div>

Expand Down Expand Up @@ -26631,8 +26633,10 @@ You cannot complete this form until the field is correct.</samp></pre>

<p>When the <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
event applies, the user agent must <a href=#queue-a-task>queue a task</a> to
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element
any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change. User agents may
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-input>input</code> at the <code><a href=#the-input-element>input</a></code> element,
then <a href=#broadcast-forminput-events>broadcast <code title=event-forminput>forminput</code>
events</a> at the <code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form
owner</a>, any time the user causes the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to change. User agents may
wait for a suitable break in the user's interaction before queuing
the task; for example, a user agent could wait for the user to have
not hit a key for 100ms, so as to only fire the event when the user
Expand All @@ -26642,8 +26646,10 @@ You cannot complete this form until the field is correct.</samp></pre>
if the element does not have an <a href=#activation-behavior>activation behavior</a>
defined but uses a user interface that involves an explicit commit
action, then the user agent must <a href=#queue-a-task>queue a task</a> to
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code> element
any time the user commits a change to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>.</p>
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the <code><a href=#the-input-element>input</a></code>
element, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
<code><a href=#the-input-element>input</a></code> element's <a href=#form-owner>form owner</a>, any time the
user commits a change to the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>.</p>

<p class=example>An example of a user interface with a commit
action would be a <a href=#file-upload-state title=attr-input-type-file>File
Expand All @@ -26660,7 +26666,7 @@ You cannot complete this form until the field is correct.</samp></pre>
and then dismissing the drop down would be a commit action.</p>

<p class=note>In addition, when the <code title=event-input-change><a href=#event-input-change>change</a></code> event applies, <code title=event-change>change</code> events can also be fired as part
of the element's <span>action behavior</span> and as part of the
of the element's <a href=#activation-behavior>activation behavior</a> and as part of the
<a href=#unfocusing-steps>unfocusing steps</a>.</p>

<p>The <a href=#task-source>task source</a> for these <span title=concept-tasks>task</span> is the <a href=#user-interaction-task-source>user interaction task
Expand Down Expand Up @@ -26886,15 +26892,17 @@ You cannot complete this form until the field is correct.</samp></pre>
should allow the user to pick an <code><a href=#the-option-element>option</a></code> element in its
<a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that
is itself not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>. Upon this
<code><a href=#the-option-element>option</a></code> element being picked (either through a click, or
<code><a href=#the-option-element>option</a></code> element being <dfn id=concept-select-pick title=concept-select-pick>picked</dfn> (either through a click, or
through unfocusing the element after changing its value, or through
any other mechanism), and before the relevant user interaction event
is queued (e.g. before the <span title=event-click>click</span>
a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or through any
other mechanism), and before the relevant user interaction event is
queued (e.g. before the <span title=event-click>click</span>
event), the user agent must set the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
picked <code><a href=#the-option-element>option</a></code> element to true and then <a href=#queue-a-task>queue a
task</a> to <a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the <code><a href=#the-select-element>select</a></code>
element, using the <a href=#user-interaction-task-source>user interaction task source</a> as the
task source.</p>
task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
element's <a href=#form-owner>form owner</a>.</p>

<p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
attribute is absent, whenever an <code><a href=#the-option-element>option</a></code> element in the
Expand All @@ -26917,16 +26925,19 @@ You cannot complete this form until the field is correct.</samp></pre>

<p>If the <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
attribute is present, and the element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, then the user agent
should allow the user to toggle the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
should allow the user to <dfn id=concept-select-toggle title=concept-select-toggle>toggle</dfn> the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of the
<code><a href=#the-option-element>option</a></code> elements in its <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> that are
themselves not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>. Upon the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of one or
themselves not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>
(either through a click, or through a <a href=#using-the-option-element-to-define-a-command title=option-command>menu command</a>, or any other
mechanism). Upon the <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> of one or
more <code><a href=#the-option-element>option</a></code> elements being changed by the user, and
before the relevant user interaction event is queued (e.g. before a
related <span title=event-click>click</span> event), the user
agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
event</a> called <code title=event-change>change</code> at the
<code><a href=#the-select-element>select</a></code> element, using the <a href=#user-interaction-task-source>user interaction task
source</a> as the task source.</p>
source</a> as the task source, then <a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code> events</a> at the
element's <a href=#form-owner>form owner</a>.</p>

<p>The <a href=#concept-form-reset-control title=concept-form-reset-control>reset
algorithm</a> for <code><a href=#the-select-element>select</a></code> elements is to go through
Expand Down Expand Up @@ -28800,13 +28811,7 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
<a href=#tree-order>tree order</a>, <a href=#fire-a-simple-event>fire a simple event</a> named
<var title="">event name</var> at the element.</li>

</ol><p class=XXX>Still need to define when formchange and forminput
fire naturally.</p>




<h3 id=interactive-elements><span class=secno>4.11 </span>Interactive elements</h3>
</ol><h3 id=interactive-elements><span class=secno>4.11 </span>Interactive elements</h3>

<h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>details</code></dfn> element</h4>

Expand Down Expand Up @@ -31425,7 +31430,7 @@ menu li:not(:first-child)::before { content: ' | '; }</pre>
<p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
is the value of the <code><a href=#the-option-element>option</a></code> element's <code title=attr-option-label><a href=#attr-option-label>label</a></code> attribute, if there is one,
or the value of the <code><a href=#the-option-element>option</a></code> element's
<code><a href=#textcontent>textContent</a></code> DOM attribute if it doesn't.</p>
<code><a href=#textcontent>textContent</a></code> DOM attribute if there isn't.</p>

<p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
is the string given by the element's <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, if any, and the empty
Expand All @@ -31439,24 +31444,19 @@ menu li:not(:first-child)::before { content: ' | '; }</pre>
otherwise.</p>

<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
State</a> of the command is true (disabled) if the element has a
<code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute, and
false otherwise.</p>
State</a> of the command is true (disabled) if the element is
<a href=#concept-option-disabled title=concept-option-disabled>disabled</a> or if its
nearest ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, and false
otherwise.</p>

<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true (checked) if the element's <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code> DOM attribute is true,
and false otherwise.</p>
of the command is true (checked) if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
false otherwise.</p>

<p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
command depends on its <a href=#command-facet-type title=command-facet-Type>Type</a>. If the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" then this must set
the <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code> DOM attribute
of the <code><a href=#the-option-element>option</a></code> element to true, otherwise it must toggle
the state of the <code title=dom-option-selected><a href=#dom-option-selected>selected</a></code>
DOM attribute (set it to true if it is false and vice versa). Then
<a href=#fire-a-change-event title="fire a change event">a <code title="">change</code>
event must be fired</a> on the <code><a href=#the-option-element>option</a></code> element's
nearest ancestor <code><a href=#the-select-element>select</a></code> element (if there is one), as
if the selection had been changed directly.</p>
command depends on its <a href=#command-facet-type title=command-facet-Type>Type</a>. If the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" then it must <a href=#concept-select-pick title=concept-select-pick>pick</a> the <code><a href=#the-option-element>option</a></code>
element. Otherwise, it must <a href=#concept-select-toggle title=concept-select-toggle>toggle</a> the <code><a href=#the-option-element>option</a></code>
element.</p>


<h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.6.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
Expand Down Expand Up @@ -33314,11 +33314,6 @@ JSURL: http://ietfreport.isoc.org/all-ids/draft-hoehrmann-javascript-scheme-00.t
values appropriately describing the state of the key input device at
the time the event is created.</p>

<p><dfn id=fire-a-change-event title="fire a change event">Firing a <code title=event-change>change</code> event</dfn> means that a <a href=http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-change><code>change</code></a>
event with no namespace, which bubbles but is not cancelable, and
which uses the <code>Event</code> interface, must be dispatched at
the given element.</p>

<p><dfn id=fire-a-contextmenu-event title="fire a contextmenu event">Firing a <code title=event-contextmenu>contextmenu</code> event</dfn> means that
a <code title=event-contextmenu>contextmenu</code> event with no
namespace, which bubbles and is cancelable, and which uses the
Expand Down Expand Up @@ -39487,7 +39482,9 @@ at the first element with the given ID must be treated as if it was cloned and r
element, and the element does not have a defined <a href=#activation-behavior>activation
behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a>
while the control was focused without committing that change, then
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the element.</p>
<a href=#fire-a-simple-event>fire a simple event</a> called <code title=event-change>change</code> at the element, then
<a href=#broadcast-formchange-events>broadcast <code title=event-formchange>formchange</code>
events</a> at the element's <a href=#form-owner>form owner</a>.</p>

<li><p>Unfocus the element.</li>

Expand Down

0 comments on commit 6756fb8

Please sign in to comment.