Browse files

[acgiow] (0) Make <progress>, <meter>, and <output> labelable with <l…

…abel>.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8554

git-svn-id: http://svn.whatwg.org/webapps@4531 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 441263f commit 9ffcdbee8e764dd602e8445b63ace55e4c18cf8d @Hixie Hixie committed Jan 7, 2010
Showing with 2,020 additions and 1,869 deletions.
  1. +603 −552 complete.html
  2. +603 −552 index
  3. +814 −765 source
View
1,155 complete.html
@@ -108,7 +108,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 &mdash; 6 January 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard &mdash; 7 January 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>-->
@@ -392,14 +392,12 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
<li><a href=#the-i-element><span class=secno>4.6.15 </span>The <code>i</code> element</a></li>
<li><a href=#the-b-element><span class=secno>4.6.16 </span>The <code>b</code> element</a></li>
<li><a href=#the-mark-element><span class=secno>4.6.17 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-progress-element><span class=secno>4.6.18 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-meter-element><span class=secno>4.6.19 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-ruby-element><span class=secno>4.6.20 </span>The <code>ruby</code> element</a></li>
- <li><a href=#the-rt-element><span class=secno>4.6.21 </span>The <code>rt</code> element</a></li>
- <li><a href=#the-rp-element><span class=secno>4.6.22 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
+ <li><a href=#the-ruby-element><span class=secno>4.6.18 </span>The <code>ruby</code> element</a></li>
+ <li><a href=#the-rt-element><span class=secno>4.6.19 </span>The <code>rt</code> element</a></li>
+ <li><a href=#the-rp-element><span class=secno>4.6.20 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.22 </span>The <code>span</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.23 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
@@ -552,31 +550,33 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
<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=#association-of-controls-and-forms><span class=secno>4.10.14 </span>Association of controls and forms</a></li>
- <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.15 </span>Attributes common to form controls</a>
+ <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>
<ol>
- <li><a href=#naming-form-controls><span class=secno>4.10.15.1 </span>Naming form controls</a></li>
- <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.15.2 </span>Enabling and disabling form controls</a></li>
- <li><a href="#a-form-control's-value"><span class=secno>4.10.15.3 </span>A form control's value</a></li>
- <li><a href=#autofocusing-a-form-control><span class=secno>4.10.15.4 </span>Autofocusing a form control</a></li>
- <li><a href=#limiting-user-input-length><span class=secno>4.10.15.5 </span>Limiting user input length</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.15.6 </span>Form submission</a></ol></li>
- <li><a href=#constraints><span class=secno>4.10.16 </span>Constraints</a>
+ <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>
<ol>
- <li><a href=#definitions><span class=secno>4.10.16.1 </span>Definitions</a></li>
- <li><a href=#constraint-validation><span class=secno>4.10.16.2 </span>Constraint validation</a></li>
- <li><a href=#the-constraint-validation-api><span class=secno>4.10.16.3 </span>The constraint validation API</a></li>
- <li><a href=#security-0><span class=secno>4.10.16.4 </span>Security</a></ol></li>
- <li><a href=#form-submission><span class=secno>4.10.17 </span>Form submission</a>
+ <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>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.17.1 </span>Introduction</a></li>
- <li><a href=#implicit-submission><span class=secno>4.10.17.2 </span>Implicit submission</a></li>
- <li><a href=#form-submission-algorithm><span class=secno>4.10.17.3 </span>Form submission algorithm</a></li>
- <li><a href=#url-encoded-form-data><span class=secno>4.10.17.4 </span>URL-encoded form data</a></li>
- <li><a href=#multipart-form-data><span class=secno>4.10.17.5 </span>Multipart form data</a></li>
- <li><a href=#plain-text-form-data><span class=secno>4.10.17.6 </span>Plain text form data</a></ol></li>
- <li><a href=#resetting-a-form><span class=secno>4.10.18 </span>Resetting a form</a></li>
- <li><a href=#event-dispatch><span class=secno>4.10.19 </span>Event dispatch</a></ol></li>
+ <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=#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>
@@ -17242,483 +17242,7 @@ <h4 id=the-mark-element><span class=secno>4.6.17 </span>The <dfn><code>mark</cod
</div>
- <h4 id=the-progress-element><span class=secno>4.6.18 </span>The <dfn><code>progress</code></dfn> element</h4>
-
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
- <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
- attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
- readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
-};</pre>
- </dd>
- </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
- completion progress of a task. The progress is either indeterminate,
- indicating that progress is being made but that it is not clear how
- much more work remains to be done before the task is complete
- (e.g. because the task is waiting for a remote host to respond), or
- the progress is a number in the range zero to a maximum, giving the
- fraction of work that has so far been completed.</p>
-
- <p>There are two attributes that determine the current task
- completion represented by the element.</p>
-
- <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
- attribute specifies how much of the task has been completed, and the
- <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
- specifies how much work the task requires in total. The units are
- arbitrary and not specified.</p>
-
- <p>Authors are encouraged to also include the current value and the
- maximum value inline as text inside the element, so that the
- progress is made available to users of legacy user agents.</p>
-
- <div class=example>
- <p>Here is a snippet of a Web application that shows the progress
- of some automated task:</p>
- <pre>&lt;section&gt;
- &lt;h2&gt;Task Progress&lt;/h2&gt;
- &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
- &lt;script&gt;
- var progressBar = document.getElementById('p');
- function updateProgress(newValue) {
- progressBar.value = newValue;
- progressBar.getElementsByTagName('span')[0].textContent = newValue;
- }
- &lt;/script&gt;
-&lt;/section&gt;</pre>
- <p>(The <code>updateProgress()</code> method in this example would
- be called by some other code on the page to update the actual
- progress bar as the task progressed.)</p>
- </div>
-
- <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
- have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
- floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
- have a value equal to or greater than zero, and less than or equal
- to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
- attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
- have a value greater than zero.</p>
-
- <p class=note>The <code><a href=#the-progress-element>progress</a></code> element is the wrong
- element to use for something that is just a gauge, as opposed to
- task progress. For instance, indicating disk space usage using
- <code><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the
- <code><a href=#the-meter-element>meter</a></code> element is available for such use cases.</p>
-
- <div class=impl>
-
- <p><strong>User agent requirements</strong>: If the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute is omitted, then
- the progress bar is an indeterminate progress bar. Otherwise, it is
- a determinate progress bar.</p>
-
- <p>If the progress bar is a determinate progress bar and the element
- has a <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, the user
- agent must parse the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
- attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
- point number values</a>. If this does not result in an error, and
- if the parsed value is greater than zero, then the maximum value of
- the progress bar is that value. Otherwise, if the element has no
- <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, or if it has
- one but parsing it resulted in an error, or if the parsed value was
- less than or equal to zero, then the maximum value of the progress
- bar is 1.0.</p>
-
- <p>If the progress bar is a determinate progress bar, user agents
- must parse the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>
- attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
- point number values</a>. If this does not result in an error, and
- if the parsed value is less than the maximum value and greater than
- zero, then the current value of the progress bar is that parsed
- value. Otherwise, if the parsed value was greater than or equal to
- the maximum value, then the current value of the progress bar is the
- maximum value of the progress bar. Otherwise, if parsing the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute's value resulted
- in an error, or a number less than or equal to zero, then the
- current value of the progress bar is zero.</p>
-
- <p><strong>UA requirements for showing the progress bar</strong>:
- When representing a <code><a href=#the-progress-element>progress</a></code> element to the user, the
- UA should indicate whether it is a determinate or indeterminate
- progress bar, and in the former case, should indicate the relative
- position of the current value relative to the maximum value.</p>
-
- <p>The <dfn id=dom-progress-max title=dom-progress-max><code>max</code></dfn> and <dfn id=dom-progress-value title=dom-progress-value><code>value</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. When the relevant content attributes are absent, the IDL
- attributes must return zero.</p>
-
- </div>
-
- <dl class=domintro><dt><var title="">progress</var> . <code title=dom-progress-position><a href=#dom-progress-position>position</a></code></dt>
-
- <dd>
-
- <p>For a determinate progress bar (one with known current and
- maximum values), returns the result of dividing the current value
- by the maximum value.</p>
-
- <p>For an indeterminate progress bar, returns &minus;1.</p>
-
- </dl><div class=impl>
-
- <p>If the progress bar is an indeterminate progress bar, then the
- <dfn id=dom-progress-position title=dom-progress-position><code>position</code></dfn> IDL
- attribute must return &minus;1. Otherwise, it must return the result of
- dividing the current value by the maximum value.</p>
-
- </div>
-
-
-
- <h4 id=the-meter-element><span class=secno>4.6.19 </span>The <dfn><code>meter</code></dfn> element</h4>
- <!-- Keep this after <progress> and NOT close to <time> -->
-
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-meter-element>meter</a></code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-meter-value><a href=#attr-meter-value>value</a></code></dd>
- <dd><code title=attr-meter-min><a href=#attr-meter-min>min</a></code></dd>
- <dd><code title=attr-meter-low><a href=#attr-meter-low>low</a></code></dd>
- <dd><code title=attr-meter-high><a href=#attr-meter-high>high</a></code></dd>
- <dd><code title=attr-meter-max><a href=#attr-meter-max>max</a></code></dd>
- <dd><code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute float <a href=#dom-meter-value title=dom-meter-value>value</a>;
- attribute float <a href=#dom-meter-min title=dom-meter-min>min</a>;
- attribute float <a href=#dom-meter-max title=dom-meter-max>max</a>;
- attribute float <a href=#dom-meter-low title=dom-meter-low>low</a>;
- attribute float <a href=#dom-meter-high title=dom-meter-high>high</a>;
- attribute float <a href=#dom-meter-optimum title=dom-meter-optimum>optimum</a>;
-};</pre>
- </dd>
- </dl><p>The <code><a href=#the-meter-element>meter</a></code> element <a href=#represents>represents</a> a scalar
- measurement within a known range, or a fractional value; for example
- disk usage, the relevance of a query result, or the fraction of a
- voting population to have selected a particular candidate.</p>
-
- <p>This is also known as a gauge.</p>
-
- <p class=note>The <code><a href=#the-meter-element>meter</a></code> element should not be used to
- indicate progress (as in a progress bar). For that role, HTML
- provides a separate <code><a href=#the-progress-element>progress</a></code> element.</p>
-
- <p class=note>The <code><a href=#the-meter-element>meter</a></code> element also does not
- represent a scalar value of arbitrary range &mdash; for example, it
- would be wrong to use this to report a weight, or height, unless
- there is a known maximum value.</p>
-
- <p>There are six attributes that determine the semantics of the
- gauge represented by the element.</p>
-
- <p>The <dfn id=attr-meter-min title=attr-meter-min><code>min</code></dfn> attribute
- specifies the lower bound of the range, and the <dfn id=attr-meter-max title=attr-meter-max><code>max</code></dfn> attribute specifies
- the upper bound. The <dfn id=attr-meter-value title=attr-meter-value><code>value</code></dfn> attribute
- specifies the value to have the gauge indicate as the "measured"
- value.</p>
-
- <p>The other three attributes can be used to segment the gauge's
- range into "low", "medium", and "high" parts, and to indicate which
- part of the gauge is the "optimum" part. The <dfn id=attr-meter-low title=attr-meter-low><code>low</code></dfn> attribute specifies
- the range that is considered to be the "low" part, and the <dfn id=attr-meter-high title=attr-meter-high><code>high</code></dfn> attribute specifies
- the range that is considered to be the "high" part. The <dfn id=attr-meter-optimum title=attr-meter-optimum><code>optimum</code></dfn> attribute
- gives the position that is "optimum"; if that is higher than the
- "high" value then this indicates that the higher the value, the
- better; if it's lower than the "low" mark then it indicates that
- lower values are better, and naturally if it is in between then it
- indicates that neither high nor low values are good.</p>
-
- <p><strong class=impl>Authoring requirements</strong>: The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute must be
- specified. The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes, when present,
- must have values that are <a href=#valid-floating-point-number title="valid floating point
- number">valid floating point numbers</a>.</p>
-
- <p>In addition, the attributes' values are further constrained:</p>
-
- <p>Let <var title="">value</var> be the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute's number.</p>
-
- <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute
- attribute is specified, then let <var title="">minimum</var> be that
- attribute's value; otherwise, let it be zero.</p>
-
- <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute
- attribute is specified, then let <var title="">maximum</var> be that
- attribute's value; otherwise, let it be 1.0.</p>
-
- <p>The following inequalities must hold, as applicable:</p>
-
- <ul class=brief><li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> is specified)</li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> is specified)</li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> is specified)</li>
- </ul><p>If both the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> and <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attributes are specified, then
- the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute's value must
- be less than or equal to the value of the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute.</p>
-
- <p class=note>If no minimum or maximum is specified, then the
- range is assumed to be 0..1, and the value thus has to be within
- that range.</p>
-
- <p>Authors are encouraged to include a textual representation of the
- gauge's state in the element's contents, for users of user agents
- that do not support the <code><a href=#the-meter-element>meter</a></code> element.</p>
-
- <div class=example>
-
- <p>The following examples show three gauges that would all be
- three-quarters full:</p>
-
- <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
-Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
-Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>
-
- <p>The following example is incorrect use of the element, because
- it doesn't give a range (and since the default maximum is 1, both
- of the gauges would end up looking maxed out):</p>
-
- <pre class=bad>&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
-and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>
-
- <p>Instead, one would either not include the meter element, or use
- the meter element with a defined range to give the dimensions in
- context compared to other pies:</p>
-
- <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
-2cm.&lt;/p&gt;
-&lt;dl&gt;
- &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
- &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
-&lt;/dl&gt;</pre>
-
- </div>
-
- <p>There is no explicit way to specify units in the
- <code><a href=#the-meter-element>meter</a></code> element, but the units may be specified in the
- <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in free-form text.</p>
-
- <div class=example>
-
- <p>The example above could be extended to mention the units:</p>
-
- <pre>&lt;dl&gt;
- &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
- &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
-&lt;/dl&gt;</pre>
-
- </div>
-
- <div class=impl>
-
- <p><strong>User agent requirements</strong>: User agents must parse
- the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes using the
- <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a>.</p>
-
- <p>User agents must then use all these numbers to obtain values for
- six points on the gauge, as follows. (The order in which these are
- evaluated is important, as some of the values refer to earlier
- ones.)</p>
-
- <dl><dt>The minimum value</dt>
-
- <dd>
- <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute is
- specified and a value could be parsed out of it, then the minimum
- value is that value. Otherwise, the minimum value is zero.</p>
- </dd>
-
- <dt>The maximum value</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute is
- specified and a value could be parsed out of it, the maximum value
- is that value. Otherwise, the maximum value is 1.0.</p>
-
- <p>If the maximum value would be less than the minimum value, then
- the maximum value is actually the same as the minimum value.</p>
-
- </dd>
-
- <dt>The actual value</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute is
- specified and a value could be parsed out of it, then that value
- is the actual value. Otherwise, the actual value is zero.</p>
-
- <p>If the actual value would be less than the minimum value, then
- the actual value is actually the same as the minimum value.</p>
-
- <p>If, on the other hand, the actual value would be greater than
- the maximum value, then the actual value is the maximum value.</p>
-
- </dd>
-
- <dt>The low boundary</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute is
- specified and a value could be parsed out of it, then the low
- boundary is that value. Otherwise, the low boundary is the same as
- the minimum value.</p>
-
- <p>If the low boundary is then less than the minimum value, then
- the low boundary is actually the same as the minimum
- value. Similarly, if the low boundary is greater than the maximum
- value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- <dt>The high boundary</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute is
- specified and a value could be parsed out of it, then the high
- boundary is that value. Otherwise, the high boundary is the same
- as the maximum value.</p>
-
- <p>If the high boundary is then less than the low boundary, then
- the high boundary is actually the same as the low
- boundary. Similarly, if the high boundary is greater than the
- maximum value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- <dt>The optimum point</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>
- attribute is specified and a value could be parsed out of it, then
- the optimum point is that value. Otherwise, the optimum point is
- the midpoint between the minimum value and the maximum value.</p>
-
- <p>If the optimum point is then less than the minimum value, then
- the optimum point is actually the same as the minimum
- value. Similarly, if the optimum point is greater than the maximum
- value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- </dl><p>All of which will result in the following inequalities all being
- true:</p>
-
- <ul class=brief><li>minimum value &le; actual value &le; maximum value</li>
- <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
- <li>minimum value &le; optimum point &le; maximum value</li>
- </ul><!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] --><p><strong>UA requirements for regions of the gauge</strong>: If the
- optimum point is equal to the low boundary or the high boundary, or
- anywhere in between them, then the region between the low and high
- boundaries of the gauge must be treated as the optimum region, and
- the low and high parts, if any, must be treated as
- suboptimal. Otherwise, if the optimum point is less than the low
- boundary, then the region between the minimum value and the low
- boundary must be treated as the optimum region, the region between
- the low boundary and the high boundary must be treated as a
- suboptimal region, and the region between the high boundary and the
- maximum value must be treated as an even less good region. Finally,
- if the optimum point is higher than the high boundary, then the
- situation is reversed; the region between the high boundary and the
- maximum value must be treated as the optimum region, the region
- between the high boundary and the low boundary must be treated as a
- suboptimal region, and the remaining region between the low boundary
- and the minimum value must be treated as an even less good
- region.</p>
-
- <p><strong>UA requirements for showing the gauge</strong>: When
- representing a <code><a href=#the-meter-element>meter</a></code> element to the user, the UA should
- indicate the relative position of the actual value to the minimum
- and maximum values, and the relationship between the actual value
- and the three regions of the gauge.</p>
-
- </div>
-
- <div class=example>
- <p>The following markup:</p>
- <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
-&lt;menu type="toolbar"&gt;
- &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
-&lt;/menu&gt;
-&lt;ul&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
- &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
- &lt;/li&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
- &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
- &lt;/li&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
- &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
- &lt;/li&gt;
-&lt;/ul&gt;</pre>
- <p>Might be rendered as follows:</p>
- <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
- </div>
-
- <p>User agents <span class=impl>may</span> combine the value of
- the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute and the other
- attributes to provide context-sensitive help or inline text
- detailing the actual values.</p>
-
- <div class=example>
- <p>For example, the following snippet:</p>
- <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
- <p>...might cause the user agent to display a gauge with a tooltip
- saying "Value: 23.2 out of 60." on one line and "seconds" on a
- second line.</p>
- </div>
-
- <div class=impl>
-
- <p>The <dfn id=dom-meter-min title=dom-meter-min><code>min</code></dfn>, <dfn id=dom-meter-max title=dom-meter-max><code>max</code></dfn>, <dfn id=dom-meter-value title=dom-meter-value><code>value</code></dfn>, <dfn id=dom-meter-low title=dom-meter-low><code>low</code></dfn>, <dfn id=dom-meter-high title=dom-meter-high><code>high</code></dfn>, and <dfn id=dom-meter-optimum title=dom-meter-optimum><code>optimum</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. When the relevant content attributes are absent, the IDL
- attributes must return zero.</p>
-
- </div>
-
- <div class=example>
-
- <p>The following example shows how a gauge could fall back to
- localized or pretty-printed text.</p>
-
- <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&thinsp;261&thinsp;928 bytes used
-out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
-
- </div>
-
-
-
-
- <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4>
+ <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17808,7 +17332,7 @@ <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</cod
<!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
- <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4>
+ <h4 id=the-rt-element><span class=secno>4.6.19 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -17838,7 +17362,7 @@ <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></
</div>
- <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4>
+ <h4 id=the-rp-element><span class=secno>4.6.20 </span>The <dfn><code>rp</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -17887,7 +17411,7 @@ <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdo-element><span class=secno>4.6.21 </span>The <dfn><code>bdo</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17936,7 +17460,7 @@ <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code>
- <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.22 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17975,7 +17499,7 @@ <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</cod
- <h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.23 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -18054,14 +17578,6 @@ <h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
- <tr><td><code><a href=#the-progress-element>progress</a></code>
- <td>Progress bar
- <td><pre class=example>Copying: <strong>&lt;progress value=0.75&gt;75%&lt;/progress&gt;</strong></pre>
-
- <tr><td><code><a href=#the-meter-element>meter</a></code>
- <td>Gauge
- <td><pre class=example>Disk space remaining: <strong>&lt;meter value=0.75&gt;75%&lt;meter&gt;</strong></pre>
-
<tr><td><code><a href=#the-ruby-element>ruby</a></code>, <code><a href=#the-rt-element>rt</a></code>, <code><a href=#the-rp-element>rp</a></code>
<td>Ruby annotations
<td><pre class=example><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>
@@ -30734,8 +30250,10 @@ <h4 id=examples-0><span class=secno>4.9.13 </span>Examples</h4>
<li><code><a href=#the-input-element>input</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
+ <li><code><a href=#the-meter-element>meter</a></code></li>
<li><code><a href=#the-object-element>object</a></code></li>
<li><code><a href=#the-output-element>output</a></code></li>
+ <li><code><a href=#the-progress-element>progress</a></code></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
</ul><p>The <a href=#form-associated-element title="form-associated element">form-associated
@@ -30768,6 +30286,9 @@ <h4 id=examples-0><span class=secno>4.9.13 </span>Examples</h4>
<ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
<li><code><a href=#the-input-element>input</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
+ <li><code><a href=#the-meter-element>meter</a></code></li>
+ <li><code><a href=#the-output-element>output</a></code></li>
+ <li><code><a href=#the-progress-element>progress</a></code></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
</ul></dd>
@@ -38150,13 +37671,12 @@ <h4 id=the-keygen-element><span class=secno>4.10.12 </span>The <dfn><code>keygen
-
<h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dd><a href=#category-listed title=category-listed>Listed</a> and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
+ <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
@@ -38182,6 +37702,8 @@ <h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output
readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
+
+ readonly attribute <span>NodeList</span> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
</dd>
</dl><p>The <code><a href=#the-output-element>output</a></code> element <a href=#represents>represents</a> the result of a
@@ -38291,7 +37813,9 @@ <h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output
<code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and
<code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
- methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>.</p>
+ methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
+ <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
+ of the element's <code><a href=#the-label-element>label</a></code>s.</p>
<p><strong>Constraint validation</strong>: <code><a href=#the-output-element>output</a></code>
elements are always <a href=#barred-from-constraint-validation>barred from constraint
@@ -38314,7 +37838,513 @@ <h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output
- <h4 id=association-of-controls-and-forms><span class=secno>4.10.14 </span>Association of controls and forms</h4>
+ <h4 id=the-progress-element><span class=secno>4.10.14 </span>The <dfn><code>progress</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
+ <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
+ <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+<pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
+ attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
+ readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
+ readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
+ readonly attribute <span>NodeList</span> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
+};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
+ completion progress of a task. The progress is either indeterminate,
+ indicating that progress is being made but that it is not clear how
+ much more work remains to be done before the task is complete
+ (e.g. because the task is waiting for a remote host to respond), or
+ the progress is a number in the range zero to a maximum, giving the
+ fraction of work that has so far been completed.</p>
+
+ <p>There are two attributes that determine the current task
+ completion represented by the element.</p>
+
+ <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
+ attribute specifies how much of the task has been completed, and the
+ <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
+ specifies how much work the task requires in total. The units are
+ arbitrary and not specified.</p>
+
+ <p>Authors are encouraged to also include the current value and the
+ maximum value inline as text inside the element, so that the
+ progress is made available to users of legacy user agents.</p>
+
+ <div class=example>
+ <p>Here is a snippet of a Web application that shows the progress
+ of some automated task:</p>
+ <pre>&lt;section&gt;
+ &lt;h2&gt;Task Progress&lt;/h2&gt;
+ &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
+ &lt;script&gt;
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.value = newValue;
+ progressBar.getElementsByTagName('span')[0].textContent = newValue;
+ }
+ &lt;/script&gt;
+&lt;/section&gt;</pre>
+ <p>(The <code>updateProgress()</code> method in this example would
+ be called by some other code on the page to update the actual
+ progress bar as the task progressed.)</p>
+ </div>
+
+ <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
+ have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
+ floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
+ have a value equal to or greater than zero, and less than or equal
+ to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
+ attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
+ have a value greater than zero.</p>
+
+ <p class=note>The <code><a href=#the-progress-element>progress</a></code> element is the wrong
+ element to use for something that is just a gauge, as opposed to
+ task progress. For instance, indicating disk space usage using
+ <code><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the
+ <code><a href=#the-meter-element>meter</a></code> element is available for such use cases.</p>
+
+ <div class=impl>
+
+ <p><strong>User agent requirements</strong>: If the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute is omitted, then
+ the progress bar is an indeterminate progress bar. Otherwise, it is
+ a determinate progress bar.</p>
+
+ <p>If the progress bar is a determinate progress bar and the element
+ has a <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, the user
+ agent must parse the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
+ attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
+ point number values</a>. If this does not result in an error, and
+ if the parsed value is greater than zero, then the maximum value of
+ the progress bar is that value. Otherwise, if the element has no
+ <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, or if it has
+ one but parsing it resulted in an error, or if the parsed value was
+ less than or equal to zero, then the maximum value of the progress
+ bar is 1.0.</p>
+
+ <p>If the progress bar is a determinate progress bar, user agents
+ must parse the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>
+ attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
+ point number values</a>. If this does not result in an error, and
+ if the parsed value is less than the maximum value and greater than
+ zero, then the current value of the progress bar is that parsed
+ value. Otherwise, if the parsed value was greater than or equal to
+ the maximum value, then the current value of the progress bar is the
+ maximum value of the progress bar. Otherwise, if parsing the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute's value resulted
+ in an error, or a number less than or equal to zero, then the
+ current value of the progress bar is zero.</p>
+
+ <p><strong>UA requirements for showing the progress bar</strong>:
+ When representing a <code><a href=#the-progress-element>progress</a></code> element to the user, the
+ UA should indicate whether it is a determinate or indeterminate
+ progress bar, and in the former case, should indicate the relative
+ position of the current value relative to the maximum value.</p>
+
+ <p>The <dfn id=dom-progress-max title=dom-progress-max><code>max</code></dfn> and <dfn id=dom-progress-value title=dom-progress-value><code>value</code></dfn> IDL attributes
+ must <a href=#reflect>reflect</a> the respective content attributes of the
+ same name. When the relevant content attributes are absent, the IDL
+ attributes must return zero.</p>
+
+ <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
+ explicitly associate the <code><a href=#the-progress-element>progress</a></code> element with its
+ <a href=#form-owner>form owner</a>.</p>
+
+ <p><strong>Constraint validation</strong>: <code><a href=#the-progress-element>progress</a></code>
+ elements are always <a href=#barred-from-constraint-validation>barred from constraint
+ validation</a>.</p>
+
+ </div>
+
+ <dl class=domintro><dt><var title="">progress</var> . <code title=dom-progress-position><a href=#dom-progress-position>position</a></code></dt>
+
+ <dd>
+
+ <p>For a determinate progress bar (one with known current and
+ maximum values), returns the result of dividing the current value
+ by the maximum value.</p>
+
+ <p>For an indeterminate progress bar, returns &minus;1.</p>
+
+ </dl><div class=impl>
+
+ <p>If the progress bar is an indeterminate progress bar, then the
+ <dfn id=dom-progress-position title=dom-progress-position><code>position</code></dfn> IDL
+ attribute must return &minus;1. Otherwise, it must return the result of
+ dividing the current value by the maximum value.</p>
+
+ <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
+ a list of the element's <code><a href=#the-label-element>label</a></code>s.</p>
+
+ </div>
+
+
+
+ <h4 id=the-meter-element><span class=secno>4.10.15 </span>The <dfn><code>meter</code></dfn> element</h4>
+ <!-- Keep this after <progress> and NOT close to <time> -->
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-meter-element>meter</a></code> element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-meter-value><a href=#attr-meter-value>value</a></code></dd>
+ <dd><code title=attr-meter-min><a href=#attr-meter-min>min</a></code></dd>
+ <dd><code title=attr-meter-max><a href=#attr-meter-max>max</a></code></dd>
+ <dd><code title=attr-meter-low><a href=#attr-meter-low>low</a></code></dd>
+ <dd><code title=attr-meter-high><a href=#attr-meter-high>high</a></code></dd>
+ <dd><code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></dd>
+ <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+<pre class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute float <a href=#dom-meter-value title=dom-meter-value>value</a>;
+ attribute float <a href=#dom-meter-min title=dom-meter-min>min</a>;
+ attribute float <a href=#dom-meter-max title=dom-meter-max>max</a>;
+ attribute float <a href=#dom-meter-low title=dom-meter-low>low</a>;
+ attribute float <a href=#dom-meter-high title=dom-meter-high>high</a>;
+ attribute float <a href=#dom-meter-optimum title=dom-meter-optimum>optimum</a>;
+ readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
+ readonly attribute <span>NodeList</span> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
+};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-meter-element>meter</a></code> element <a href=#represents>represents</a> a scalar
+ measurement within a known range, or a fractional value; for example
+ disk usage, the relevance of a query result, or the fraction of a
+ voting population to have selected a particular candidate.</p>
+
+ <p>This is also known as a gauge.</p>
+
+ <p class=note>The <code><a href=#the-meter-element>meter</a></code> element should not be used to
+ indicate progress (as in a progress bar). For that role, HTML
+ provides a separate <code><a href=#the-progress-element>progress</a></code> element.</p>
+
+ <p class=note>The <code><a href=#the-meter-element>meter</a></code> element also does not
+ represent a scalar value of arbitrary range &mdash; for example, it
+ would be wrong to use this to report a weight, or height, unless
+ there is a known maximum value.</p>
+
+ <p>There are six attributes that determine the semantics of the
+ gauge represented by the element.</p>
+
+ <p>The <dfn id=attr-meter-min title=attr-meter-min><code>min</code></dfn> attribute
+ specifies the lower bound of the range, and the <dfn id=attr-meter-max title=attr-meter-max><code>max</code></dfn> attribute specifies
+ the upper bound. The <dfn id=attr-meter-value title=attr-meter-value><code>value</code></dfn> attribute
+ specifies the value to have the gauge indicate as the "measured"
+ value.</p>
+
+ <p>The other three attributes can be used to segment the gauge's
+ range into "low", "medium", and "high" parts, and to indicate which
+ part of the gauge is the "optimum" part. The <dfn id=attr-meter-low title=attr-meter-low><code>low</code></dfn> attribute specifies
+ the range that is considered to be the "low" part, and the <dfn id=attr-meter-high title=attr-meter-high><code>high</code></dfn> attribute specifies
+ the range that is considered to be the "high" part. The <dfn id=attr-meter-optimum title=attr-meter-optimum><code>optimum</code></dfn> attribute
+ gives the position that is "optimum"; if that is higher than the
+ "high" value then this indicates that the higher the value, the
+ better; if it's lower than the "low" mark then it indicates that
+ lower values are better, and naturally if it is in between then it
+ indicates that neither high nor low values are good.</p>
+
+ <p><strong class=impl>Authoring requirements</strong>: The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute must be
+ specified. The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes, when present,
+ must have values that are <a href=#valid-floating-point-number title="valid floating point
+ number">valid floating point numbers</a>.</p>
+
+ <p>In addition, the attributes' values are further constrained:</p>
+
+ <p>Let <var title="">value</var> be the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute's number.</p>
+
+ <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute
+ attribute is specified, then let <var title="">minimum</var> be that
+ attribute's value; otherwise, let it be zero.</p>
+
+ <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute
+ attribute is specified, then let <var title="">maximum</var> be that
+ attribute's value; otherwise, let it be 1.0.</p>
+
+ <p>The following inequalities must hold, as applicable:</p>
+
+ <ul class=brief><li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
+ <li><var title="">minimum</var> &le; <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> is specified)</li>
+ <li><var title="">minimum</var> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> is specified)</li>
+ <li><var title="">minimum</var> &le; <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> is specified)</li>
+ </ul><p>If both the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> and <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attributes are specified, then
+ the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute's value must
+ be less than or equal to the value of the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute.</p>
+
+ <p class=note>If no minimum or maximum is specified, then the
+ range is assumed to be 0..1, and the value thus has to be within
+ that range.</p>
+
+ <p>Authors are encouraged to include a textual representation of the
+ gauge's state in the element's contents, for users of user agents
+ that do not support the <code><a href=#the-meter-element>meter</a></code> element.</p>
+
+ <div class=example>
+
+ <p>The following examples show three gauges that would all be
+ three-quarters full:</p>
+
+ <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
+Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
+Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>
+
+ <p>The following example is incorrect use of the element, because
+ it doesn't give a range (and since the default maximum is 1, both
+ of the gauges would end up looking maxed out):</p>
+
+ <pre class=bad>&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
+and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>
+
+ <p>Instead, one would either not include the meter element, or use
+ the meter element with a defined range to give the dimensions in
+ context compared to other pies:</p>
+
+ <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
+2cm.&lt;/p&gt;
+&lt;dl&gt;
+ &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
+ &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
+&lt;/dl&gt;</pre>
+
+ </div>
+
+ <p>There is no explicit way to specify units in the
+ <code><a href=#the-meter-element>meter</a></code> element, but the units may be specified in the
+ <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in free-form text.</p>
+
+ <div class=example>
+
+ <p>The example above could be extended to mention the units:</p>
+
+ <pre>&lt;dl&gt;
+ &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
+ &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
+&lt;/dl&gt;</pre>
+
+ </div>
+
+ <div class=impl>
+
+ <p><strong>User agent requirements</strong>: User agents must parse
+ the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes using the
+ <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a>.</p>
+
+ <p>User agents must then use all these numbers to obtain values for
+ six points on the gauge, as follows. (The order in which these are
+ evaluated is important, as some of the values refer to earlier
+ ones.)</p>
+
+ <dl><dt>The minimum value</dt>
+
+ <dd>
+ <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute is
+ specified and a value could be parsed out of it, then the minimum
+ value is that value. Otherwise, the minimum value is zero.</p>
+ </dd>
+
+ <dt>The maximum value</dt>
+
+ <dd>
+
+ <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute is
+ specified and a value could be parsed out of it, the maximum value
+ is that value. Otherwise, the maximum value is 1.0.</p>
+
+ <p>If the maximum value would be less than the minimum value, then
+ the maximum value is actually the same as the minimum value.</p>
+
+ </dd>
+
+ <dt>The actual value</dt>
+
+ <dd>
+
+ <p>If the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute is
+ specified and a value could be parsed out of it, then that value
+ is the actual value. Otherwise, the actual value is zero.</p>
+
+ <p>If the actual value would be less than the minimum value, then
+ the actual value is actually the same as the minimum value.</p>
+
+ <p>If, on the other hand, the actual value would be greater than
+ the maximum value, then the actual value is the maximum value.</p>
+
+ </dd>
+
+ <dt>The low boundary</dt>
+
+ <dd>
+
+ <p>If the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute is
+ specified and a value could be parsed out of it, then the low
+ boundary is that value. Otherwise, the low boundary is the same as
+ the minimum value.</p>
+
+ <p>If the low boundary is then less than the minimum value, then
+ the low boundary is actually the same as the minimum
+ value. Similarly, if the low boundary is greater than the maximum
+ value, then it is actually the maximum value instead.</p>
+
+ </dd>
+
+ <dt>The high boundary</dt>
+
+ <dd>
+
+ <p>If the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute is
+ specified and a value could be parsed out of it, then the high
+ boundary is that value. Otherwise, the high boundary is the same
+ as the maximum value.</p>
+
+ <p>If the high boundary is then less than the low boundary, then
+ the high boundary is actually the same as the low
+ boundary. Similarly, if the high boundary is greater than the
+ maximum value, then it is actually the maximum value instead.</p>
+
+ </dd>
+
+ <dt>The optimum point</dt>
+
+ <dd>
+
+ <p>If the <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>
+ attribute is specified and a value could be parsed out of it, then
+ the optimum point is that value. Otherwise, the optimum point is
+ the midpoint between the minimum value and the maximum value.</p>
+
+ <p>If the optimum point is then less than the minimum value, then
+ the optimum point is actually the same as the minimum
+ value. Similarly, if the optimum point is greater than the maximum
+ value, then it is actually the maximum value instead.</p>
+
+ </dd>
+
+ </dl><p>All of which will result in the following inequalities all being
+ true:</p>
+
+ <ul class=brief><li>minimum value &le; actual value &le; maximum value</li>
+ <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
+ <li>minimum value &le; optimum point &le; maximum value</li>
+ </ul><!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] --><p><strong>UA requirements for regions of the gauge</strong>: If the
+ optimum point is equal to the low boundary or the high boundary, or
+ anywhere in between them, then the region between the low and high
+ boundaries of the gauge must be treated as the optimum region, and
+ the low and high parts, if any, must be treated as
+ suboptimal. Otherwise, if the optimum point is less than the low
+ boundary, then the region between the minimum value and the low
+ boundary must be treated as the optimum region, the region between
+ the low boundary and the high boundary must be treated as a
+ suboptimal region, and the region between the high boundary and the
+ maximum value must be treated as an even less good region. Finally,
+ if the optimum point is higher than the high boundary, then the
+ situation is reversed; the region between the high boundary and the
+ maximum value must be treated as the optimum region, the region
+ between the high boundary and the low boundary must be treated as a
+ suboptimal region, and the remaining region between the low boundary
+ and the minimum value must be treated as an even less good
+ region.</p>
+
+ <p><strong>UA requirements for showing the gauge</strong>: When
+ representing a <code><a href=#the-meter-element>meter</a></code> element to the user, the UA should
+ indicate the relative position of the actual value to the minimum
+ and maximum values, and the relationship between the actual value
+ and the three regions of the gauge.</p>
+
+ </div>
+
+ <div class=example>
+ <p>The following markup:</p>
+ <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
+&lt;menu type="toolbar"&gt;
+ &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
+&lt;/menu&gt;
+&lt;ul&gt;
+ &lt;li&gt;
+ &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
+ &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
+ &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
+ &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
+ &lt;/li&gt;
+ &lt;li&gt;
+ &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
+ &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
+ &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
+ &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
+ &lt;/li&gt;
+ &lt;li&gt;
+ &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
+ &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
+ &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;</pre>
+ <p>Might be rendered as follows:</p>
+ <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
+ </div>
+
+ <p>User agents <span class=impl>may</span> combine the value of
+ the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute and the other
+ attributes to provide context-sensitive help or inline text
+ detailing the actual values.</p>
+
+ <div class=example>
+ <p>For example, the following snippet:</p>
+ <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
+ <p>...might cause the user agent to display a gauge with a tooltip
+ saying "Value: 23.2 out of 60." on one line and "seconds" on a
+ second line.</p>
+ </div>
+
+ <p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
+ explicitly associate the <code><a href=#the-meter-element>meter</a></code> element with its
+ <a href=#form-owner>form owner</a>.</p>
+
+ <p><strong>Constraint validation</strong>: <code><a href=#the-meter-element>meter</a></code>
+ elements are always <a href=#barred-from-constraint-validation>barred from constraint
+ validation</a>.</p>
+
+ <div class=impl>
+
+ <p>The <dfn id=dom-meter-min title=dom-meter-min><code>min</code></dfn>, <dfn id=dom-meter-max title=dom-meter-max><code>max</code></dfn>, <dfn id=dom-meter-value title=dom-meter-value><code>value</code></dfn>, <dfn id=dom-meter-low title=dom-meter-low><code>low</code></dfn>, <dfn id=dom-meter-high title=dom-meter-high><code>high</code></dfn>, and <dfn id=dom-meter-optimum title=dom-meter-optimum><code>optimum</code></dfn> IDL attributes
+ must <a href=#reflect>reflect</a> the respective content attributes of the
+ same name. When the relevant content attributes are absent, the IDL
+ attributes must return zero.</p>
+
+ <p>The <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides
+ a list of the element's <code><a href=#the-label-element>label</a></code>s.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>The following example shows how a gauge could fall back to
+ localized or pretty-printed text.</p>
+
+ <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&thinsp;261&thinsp;928 bytes used
+out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
+
+ </div>
+
+
+
+
+ <h4 id=association-of-controls-and-forms><span class=secno>4.10.16 </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
@@ -38433,6 +38463,9 @@ <h4 id=association-of-controls-and-forms><span class=secno>4.10.14 </span>Associ
</dl><div class=impl>
+ <!-- XXX should mention dom-fae-form in the various sections
+ defining elements that have it -->
+
<p><a href=#form-associated-element title="form-associated element">Form-associated
elements</a> have a <dfn id=dom-fae-form title=dom-fae-form><code>form</code></dfn> IDL attribute, which,
on getting, must return the element's <a href=#form-owner>form owner</a>, or
@@ -38446,9 +38479,9 @@ <h4 id=association-of-controls-and-forms><span class=secno>4.10.14 </span>Associ
- <h4 id=attributes-common-to-form-controls><span class=secno>4.10.15 </span><dfn>Attributes common to form controls</dfn></h4>
+ <h4 id=attributes-common-to-form-controls><span class=secno>4.10.17 </span><dfn>Attributes common to form controls</dfn></h4>
- <h5 id=naming-form-controls><span class=secno>4.10.15.1 </span>Naming form controls</h5>
+ <h5 id=naming-form-controls><span class=secno>4.10.17.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
@@ -38463,13 +38496,16 @@ <h5 id=naming-form-controls><span class=secno>4.10.15.1 </span>Naming form contr
the empty string, then it is <a href=#barred-from-constraint-validation>barred from constraint
validation</a>.</p>
+ <!-- XXX should mention dom-fe-name in the various sections
+ defining elements that have it -->
+
<p>The <dfn id=dom-fe-name title=dom-fe-name><code>name</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-name><a href=#attr-fe-name>name</a></code> content attribute.</p>
</div>
- <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.15.2 </span>Enabling and disabling form controls</h5>
+ <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.17.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>
@@ -38491,6 +38527,9 @@ <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.15.2 </span>E
<p><strong>Constraint validation</strong>: If an element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, it is <a href=#barred-from-constraint-validation>barred from
constraint validation</a>.</p>
+ <!-- XXX should mention dom-fe-disabled in the various sections
+ defining elements that have it -->
+
<p>The <dfn id=dom-fe-disabled title=dom-fe-disabled><code>disabled</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> content attribute.</p>
@@ -38500,7 +38539,7 @@ <h5 id=enabling-and-disabling-form-controls><span class=secno>4.10.15.2 </span>E
<div class=impl>
- <h5 id="a-form-control's-value"><span class=secno>4.10.15.3 </span>A form control's value</h5>
+ <h5 id="a-form-control's-value"><span class=secno>4.10.17.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
@@ -38511,7 +38550,7 @@ <h5 id="a-form-control's-value"><span class=secno>4.10.15.3 </span>A form contro
- <h5 id=autofocusing-a-form-control><span class=secno>4.10.15.4 </span>Autofocusing a form control</h5>
+ <h5 id=autofocusing-a-form-control><span class=secno>4.10.17.4 </span>Autofocusing a form control</h5>
<!-- v2: Apply this to contentEditable elements -->
@@ -38546,6 +38585,9 @@ <h5 id=autofocusing-a-form-control><span class=secno>4.10.15.4 </span>Autofocusi
<p class=note>Focusing the control does not imply that the user
agent must focus the browser window if it has lost focus.</p>
+ <!-- XXX should mention dom-fe-autofocus in the various sections
+ defining elements that have it -->
+
<p>The <dfn id=dom-fe-autofocus title=dom-fe-autofocus><code>autofocus</code></dfn>
IDL attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>
@@ -38560,7 +38602,7 @@ <h5 id=autofocusing-a-form-control><span class=secno>4.10.15.4 </span>Autofocusi
</div>
- <h5 id=limiting-user-input-length><span class=secno>4.10.15.5 </span>Limiting user input length</h5>
+ <h5 id=limiting-user-input-length><span class=secno>4.10.17.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>
@@ -38591,7 +38633,7 @@ <h5 id=limiting-user-input-length><span class=secno>4.10.15.5 </span>Limiting us
- <h5 id=form-submission-0><span class=secno>4.10.15.6 </span>Form submission</h5>
+ <h5 id=form-submission-0><span class=secno>4.10.17.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
@@ -38740,9 +38782,9 @@ <h5 id=form-submission-0><span class=secno>4.10.15.6 </span>Form submission</h5>
- <h4 id=constraints><span class=secno>4.10.16 </span>Constraints</h4>
+ <h4 id=constraints><span class=secno>4.10.18 </span>Constraints</h4>
- <h5 id=definitions><span class=secno>4.10.16.1 </span>Definitions</h5>
+ <h5 id=definitions><span class=secno>4.10.18.1 </span>Definitions</h5>
<div class=impl>
@@ -38829,7 +38871,7 @@ <h5 id=definitions><span class=secno>4.10.16.1 </span>Definitions</h5>
<div class=impl>
- <h5 id=constraint-validation><span class=secno>4.10.16.2 </span>Constraint validation</h5>
+ <h5 id=constraint-validation><span class=secno>4.10.18.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
@@ -38913,7 +38955,7 @@ <h5 id=constraint-validation><span class=secno>4.10.16.2 </span>Constraint valid
- <h5 id=the-constraint-validation-api><span class=secno>4.10.16.3 </span>The <dfn>constraint validation API</dfn></h5>
+ <h5 id=the-constraint-validation-api><span class=secno>4.10.18.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>
@@ -39142,7 +39184,7 @@ <h5 id=the-constraint-validation-api><span class=secno>4.10.16.3 </span>The <dfn
<div class=impl>
- <h5 id=security-0><span class=secno>4.10.16.4 </span>Security</h5>
+ <h5 id=security-0><span class=secno>4.10.18.4 </span>Security</h5>
<p>Servers should not rely on client-side validation. Client-side
validation can be intentionally bypassed by hostile users, and
@@ -39156,11 +39198,11 @@ <h5 id=security-0><span class=secno>4.10.16.4 </span>Security</h5>
- <h4 id=form-submission><span class=secno>4.10.17 </span><dfn>Form submission</dfn></h4>
+ <h4 id=form-submission><span class=secno>4.10.19 </span><dfn>Form submission</dfn></h4>
<div class=impl>
- <h5 id=introduction-0><span class=secno>4.10.17.1 </span>Introduction</h5>
+ <h5 id=introduction-0><span class=secno>4.10.19.1 </span>Introduction</h5>
</div>
@@ -39208,7 +39250,7 @@ <h5 id=introduction-0><span class=secno>4.10.17.1 </span>Introduction</h5>
<div class=impl>
- <h5 id=implicit-submission><span class=secno>4.10.17.2 </span>Implicit submission</h5>
+ <h5 id=implicit-submission><span class=secno>4.10.19.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
@@ -39237,7 +39279,7 @@ <h5 id=implicit-submission><span class=secno>4.10.17.2 </span>Implicit submissio
<div class=impl>
- <h5 id=form-submission-algorithm><span class=secno>4.10.17.3 </span>Form submission algorithm</h5>
+ <h5 id=form-submission-algorithm><span class=secno>4.10.19.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
@@ -39782,7 +39824,7 @@ <h5 id=form-submission-algorithm><span class=secno>4.10.17.3 </span>Form submiss
<div class=impl>
- <h5 id=url-encoded-form-data><span class=secno>4.10.17.4 </span>URL-encoded form data</h5>
+ <h5 id=url-encoded-form-data><span class=secno>4.10.19.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>
@@ -39882,7 +39924,7 @@ <h5 id=url-encoded-form-data><span class=secno>4.10.17.4 </span>URL-encoded form
<div class=impl>
- <h5 id=multipart-form-data><span class=secno>4.10.17.5 </span>Multipart form data</h5>
+ <h5 id=multipart-form-data><span class=secno>4.10.19.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>
@@ -39904,7 +39946,7 @@ <h5 id=multipart-form-data><span class=secno>4.10.17.5 </span>Multipart form dat
<div class=impl>
- <h5 id=plain-text-form-data><span class=secno>4.10.17.6 </span>Plain text form data</h5>
+ <h5 id=plain-text-form-data><span class=secno>4.10.19.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>
@@ -39963,7 +40005,7 @@ <h5 id=plain-text-form-data><span class=secno>4.10.17.6 </span>Plain text form d
<div class=impl>
- <h4 id=resetting-a-form><span class=secno>4.10.18 </span>Resetting a form</h4>
+ <h4 id=resetting-a-form><span class=secno>4.10.20 </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
@@ -39984,7 +40026,7 @@ <h4 id=resetting-a-form><span class=secno>4.10.18 </span>Resetting a form</h4>
<div class=impl>
- <h4 id=event-dispatch><span class=secno>4.10.19 </span>Event dispatch</h4>
+ <h4 id=event-dispatch><span class=secno>4.10.21 </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>
@@ -83849,7 +83891,7 @@ <h3 class=no-num id=elements-1>Elements</h3>
<td><a href=#flow-content title="Flow content">flow</a>;
<a href=#phrasing-content title="Phrasing content">phrasing</a>;
<a href=#interactive-content title="Interactive content">interactive</a>;
- <a href=#category-listed title=category-listed>Listed</a>;
+ <a href=#category-listed title=category-listed>listed</a>;
<a href=#category-label title=category-label>labelable</a>;
<a href=#category-submit title=category-submit>submittable</a>;
<a href=#form-associated-element title="Form-associated element">form-associated</a></td>
@@ -84337,16 +84379,19 @@ <h3 class=no-num id=elements-1>Elements</h3>
<tr><th><code><a href=#the-meter-element>meter</a></code></th>
<td>Gauge</td>
<td><a href=#flow-content title="Flow content">flow</a>;
- <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <a href=#phrasing-content title="Phrasing content">phrasing</a>;
+ <a href=#category-label title=category-label>labelable</a>;
+ <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-meter-value><a href=#attr-meter-value>value</a></code>;
<code title=attr-meter-min><a href=#attr-meter-min>min</a></code>;
+ <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>;
<code title=attr-meter-low><a href=#attr-meter-low>low</a></code>;
<code title=attr-meter-high><a href=#attr-meter-high>high</a></code>;
- <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>;
- <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></td>
+ <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>;
+ <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
<td><code><a href=#htmlmeterelement>HTMLMeterElement</a></code></td>
<tr><th><code><a href=#the-nav-element>nav</a></code></th>
<td>Section with navigational links</td>
@@ -84424,6 +84469,7 @@ <h3 class=no-num id=elements-1>Elements</h3>
<td><a href=#flow-content title="Flow content">flow</a>;
<a href=#phrasing-content title="Phrasing content">phrasing</a>;
<a href=#category-listed title=category-listed>listed</a>;
+ <a href=#category-label title=category-label>labelable</a>;
<a href=#category-reset title=category-reset>resettable</a>;
<a href=#form-associated-element title="Form-associated element">form-associated</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
@@ -84461,12 +84507,15 @@ <h3 class=no-num id=elements-1>Elements</h3>
<tr><th><code><a href=#the-progress-element>progress</a></code></th>
<td>Progress bar</td>
<td><a href=#flow-content title="Flow content">flow</a>;
- <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <a href=#phrasing-content title="Phrasing content">phrasing</a>;
+ <a href=#category-label title=category-label>labelable</a>;
+ <a href=#form-associated-element title="Form-associated element">form-associated</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-progress-value><a href=#attr-progress-value>value</a></code>;
- <code title=attr-progress-max><a href=#attr-progress-max>max</a></code></td>
+ <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>;
+ <code title=attr-fae-form><a href=#attr-fae-form>form</a></code></td>
<td><code><a href=#htmlprogresselement>HTMLProgressElement</a></code></td>
<tr><th><code><a href=#the-q-element>q</a></code></th>
<td>Quotation</td>
@@ -84933,8 +84982,10 @@ <h3 class=no-num id=attributes-0>Attributes</h3>
<code title=attr-fae-form><a href=#attr-fae-form>input</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>keygen</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>label</a></code>;
+ <code title=attr-fae-form><a href=#attr-fae-form>meter</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>object</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>output</a></code>;
+ <code title=attr-fae-form><a href=#attr-fae-form>progress</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>select</a></code>;
<code title=attr-fae-form><a href=#attr-fae-form>textarea</a></code>
<td> Associates the control with a <code><a href=#the-form-element>form</a></code> element
View
1,155 index
@@ -110,7 +110,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>WHATWG HTML (Including HTML5)</h1>
- <h2 class="no-num no-toc">Draft Standard &mdash; 6 January 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard &mdash; 7 January 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>-->
@@ -389,14 +389,12 @@
<li><a href=#the-i-element><span class=secno>4.6.15 </span>The <code>i</code> element</a></li>
<li><a href=#the-b-element><span class=secno>4.6.16 </span>The <code>b</code> element</a></li>
<li><a href=#the-mark-element><span class=secno>4.6.17 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-progress-element><span class=secno>4.6.18 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-meter-element><span class=secno>4.6.19 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-ruby-element><span class=secno>4.6.20 </span>The <code>ruby</code> element</a></li>
- <li><a href=#the-rt-element><span class=secno>4.6.21 </span>The <code>rt</code> element</a></li>
- <li><a href=#the-rp-element><span class=secno>4.6.22 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
+ <li><a href=#the-ruby-element><span class=secno>4.6.18 </span>The <code>ruby</code> element</a></li>
+ <li><a href=#the-rt-element><span class=secno>4.6.19 </span>The <code>rt</code> element</a></li>
+ <li><a href=#the-rp-element><span class=secno>4.6.20 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.22 </span>The <code>span</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.23 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
@@ -549,31 +547,33 @@
<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=#association-of-controls-and-forms><span class=secno>4.10.14 </span>Association of controls and forms</a></li>
- <li><a href=#attributes-common-to-form-controls><span class=secno>4.10.15 </span>Attributes common to form controls</a>
+ <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>
<ol>
- <li><a href=#naming-form-controls><span class=secno>4.10.15.1 </span>Naming form controls</a></li>
- <li><a href=#enabling-and-disabling-form-controls><span class=secno>4.10.15.2 </span>Enabling and disabling form controls</a></li>
- <li><a href="#a-form-control's-value"><span class=secno>4.10.15.3 </span>A form control's value</a></li>
- <li><a href=#autofocusing-a-form-control><span class=secno>4.10.15.4 </span>Autofocusing a form control</a></li>
- <li><a href=#limiting-user-input-length><span class=secno>4.10.15.5 </span>Limiting user input length</a></li>
- <li><a href=#form-submission-0><span class=secno>4.10.15.6 </span>Form submission</a></ol></li>
- <li><a href=#constraints><span class=secno>4.10.16 </span>Constraints</a>
+ <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>
<ol>
- <li><a href=#definitions><span class=secno>4.10.16.1 </span>Definitions</a></li>
- <li><a href=#constraint-validation><span class=secno>4.10.16.2 </span>Constraint validation</a></li>
- <li><a href=#the-constraint-validation-api><span class=secno>4.10.16.3 </span>The constraint validation API</a></li>
- <li><a href=#security-0><span class=secno>4.10.16.4 </span>Security</a></ol></li>
- <li><a href=#form-submission><span class=secno>4.10.17 </span>Form submission</a>
+ <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>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.17.1 </span>Introduction</a></li>
- <li><a href=#implicit-submission><span class=secno>4.10.17.2 </span>Implicit submission</a></li>
- <li><a href=#form-submission-algorithm><span class=secno>4.10.17.3 </span>Form submission algorithm</a></li>
- <li><a href=#url-encoded-form-data><span class=secno>4.10.17.4 </span>URL-encoded form data</a></li>
- <li><a href=#multipart-form-data><span class=secno>4.10.17.5 </span>Multipart form data</a></li>
- <li><a href=#plain-text-form-data><span class=secno>4.10.17.6 </span>Plain text form data</a></ol></li>
- <li><a href=#resetting-a-form><span class=secno>4.10.18 </span>Resetting a form</a></li>
- <li><a href=#event-dispatch><span class=secno>4.10.19 </span>Event dispatch</a></ol></li>
+ <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=#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>
@@ -17077,483 +17077,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-progress-element><span class=secno>4.6.18 </span>The <dfn><code>progress</code></dfn> element</h4>
-
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
- <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
- attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
- readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
-};</pre>
- </dd>
- </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
- completion progress of a task. The progress is either indeterminate,
- indicating that progress is being made but that it is not clear how
- much more work remains to be done before the task is complete
- (e.g. because the task is waiting for a remote host to respond), or
- the progress is a number in the range zero to a maximum, giving the
- fraction of work that has so far been completed.</p>
-
- <p>There are two attributes that determine the current task
- completion represented by the element.</p>
-
- <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
- attribute specifies how much of the task has been completed, and the
- <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
- specifies how much work the task requires in total. The units are
- arbitrary and not specified.</p>
-
- <p>Authors are encouraged to also include the current value and the
- maximum value inline as text inside the element, so that the
- progress is made available to users of legacy user agents.</p>
-
- <div class=example>
- <p>Here is a snippet of a Web application that shows the progress
- of some automated task:</p>
- <pre>&lt;section&gt;
- &lt;h2&gt;Task Progress&lt;/h2&gt;
- &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
- &lt;script&gt;
- var progressBar = document.getElementById('p');
- function updateProgress(newValue) {
- progressBar.value = newValue;
- progressBar.getElementsByTagName('span')[0].textContent = newValue;
- }
- &lt;/script&gt;
-&lt;/section&gt;</pre>
- <p>(The <code>updateProgress()</code> method in this example would
- be called by some other code on the page to update the actual
- progress bar as the task progressed.)</p>
- </div>
-
- <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
- have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
- floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
- have a value equal to or greater than zero, and less than or equal
- to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
- attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
- have a value greater than zero.</p>
-
- <p class=note>The <code><a href=#the-progress-element>progress</a></code> element is the wrong
- element to use for something that is just a gauge, as opposed to
- task progress. For instance, indicating disk space usage using
- <code><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the
- <code><a href=#the-meter-element>meter</a></code> element is available for such use cases.</p>
-
- <div class=impl>
-
- <p><strong>User agent requirements</strong>: If the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute is omitted, then
- the progress bar is an indeterminate progress bar. Otherwise, it is
- a determinate progress bar.</p>
-
- <p>If the progress bar is a determinate progress bar and the element
- has a <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, the user
- agent must parse the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
- attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
- point number values</a>. If this does not result in an error, and
- if the parsed value is greater than zero, then the maximum value of
- the progress bar is that value. Otherwise, if the element has no
- <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, or if it has
- one but parsing it resulted in an error, or if the parsed value was
- less than or equal to zero, then the maximum value of the progress
- bar is 1.0.</p>
-
- <p>If the progress bar is a determinate progress bar, user agents
- must parse the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code>
- attribute's value according to the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating
- point number values</a>. If this does not result in an error, and
- if the parsed value is less than the maximum value and greater than
- zero, then the current value of the progress bar is that parsed
- value. Otherwise, if the parsed value was greater than or equal to
- the maximum value, then the current value of the progress bar is the
- maximum value of the progress bar. Otherwise, if parsing the <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute's value resulted
- in an error, or a number less than or equal to zero, then the
- current value of the progress bar is zero.</p>
-
- <p><strong>UA requirements for showing the progress bar</strong>:
- When representing a <code><a href=#the-progress-element>progress</a></code> element to the user, the
- UA should indicate whether it is a determinate or indeterminate
- progress bar, and in the former case, should indicate the relative
- position of the current value relative to the maximum value.</p>
-
- <p>The <dfn id=dom-progress-max title=dom-progress-max><code>max</code></dfn> and <dfn id=dom-progress-value title=dom-progress-value><code>value</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. When the relevant content attributes are absent, the IDL
- attributes must return zero.</p>
-
- </div>
-
- <dl class=domintro><dt><var title="">progress</var> . <code title=dom-progress-position><a href=#dom-progress-position>position</a></code></dt>
-
- <dd>
-
- <p>For a determinate progress bar (one with known current and
- maximum values), returns the result of dividing the current value
- by the maximum value.</p>
-
- <p>For an indeterminate progress bar, returns &minus;1.</p>
-
- </dl><div class=impl>
-
- <p>If the progress bar is an indeterminate progress bar, then the
- <dfn id=dom-progress-position title=dom-progress-position><code>position</code></dfn> IDL
- attribute must return &minus;1. Otherwise, it must return the result of
- dividing the current value by the maximum value.</p>
-
- </div>
-
-
-
- <h4 id=the-meter-element><span class=secno>4.6.19 </span>The <dfn><code>meter</code></dfn> element</h4>
- <!-- Keep this after <progress> and NOT close to <time> -->
-
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-meter-element>meter</a></code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-meter-value><a href=#attr-meter-value>value</a></code></dd>
- <dd><code title=attr-meter-min><a href=#attr-meter-min>min</a></code></dd>
- <dd><code title=attr-meter-low><a href=#attr-meter-low>low</a></code></dd>
- <dd><code title=attr-meter-high><a href=#attr-meter-high>high</a></code></dd>
- <dd><code title=attr-meter-max><a href=#attr-meter-max>max</a></code></dd>
- <dd><code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute float <a href=#dom-meter-value title=dom-meter-value>value</a>;
- attribute float <a href=#dom-meter-min title=dom-meter-min>min</a>;
- attribute float <a href=#dom-meter-max title=dom-meter-max>max</a>;
- attribute float <a href=#dom-meter-low title=dom-meter-low>low</a>;
- attribute float <a href=#dom-meter-high title=dom-meter-high>high</a>;
- attribute float <a href=#dom-meter-optimum title=dom-meter-optimum>optimum</a>;
-};</pre>
- </dd>
- </dl><p>The <code><a href=#the-meter-element>meter</a></code> element <a href=#represents>represents</a> a scalar
- measurement within a known range, or a fractional value; for example
- disk usage, the relevance of a query result, or the fraction of a
- voting population to have selected a particular candidate.</p>
-
- <p>This is also known as a gauge.</p>
-
- <p class=note>The <code><a href=#the-meter-element>meter</a></code> element should not be used to
- indicate progress (as in a progress bar). For that role, HTML
- provides a separate <code><a href=#the-progress-element>progress</a></code> element.</p>
-
- <p class=note>The <code><a href=#the-meter-element>meter</a></code> element also does not
- represent a scalar value of arbitrary range &mdash; for example, it
- would be wrong to use this to report a weight, or height, unless
- there is a known maximum value.</p>
-
- <p>There are six attributes that determine the semantics of the
- gauge represented by the element.</p>
-
- <p>The <dfn id=attr-meter-min title=attr-meter-min><code>min</code></dfn> attribute
- specifies the lower bound of the range, and the <dfn id=attr-meter-max title=attr-meter-max><code>max</code></dfn> attribute specifies
- the upper bound. The <dfn id=attr-meter-value title=attr-meter-value><code>value</code></dfn> attribute
- specifies the value to have the gauge indicate as the "measured"
- value.</p>
-
- <p>The other three attributes can be used to segment the gauge's
- range into "low", "medium", and "high" parts, and to indicate which
- part of the gauge is the "optimum" part. The <dfn id=attr-meter-low title=attr-meter-low><code>low</code></dfn> attribute specifies
- the range that is considered to be the "low" part, and the <dfn id=attr-meter-high title=attr-meter-high><code>high</code></dfn> attribute specifies
- the range that is considered to be the "high" part. The <dfn id=attr-meter-optimum title=attr-meter-optimum><code>optimum</code></dfn> attribute
- gives the position that is "optimum"; if that is higher than the
- "high" value then this indicates that the higher the value, the
- better; if it's lower than the "low" mark then it indicates that
- lower values are better, and naturally if it is in between then it
- indicates that neither high nor low values are good.</p>
-
- <p><strong class=impl>Authoring requirements</strong>: The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute must be
- specified. The <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes, when present,
- must have values that are <a href=#valid-floating-point-number title="valid floating point
- number">valid floating point numbers</a>.</p>
-
- <p>In addition, the attributes' values are further constrained:</p>
-
- <p>Let <var title="">value</var> be the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute's number.</p>
-
- <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute
- attribute is specified, then let <var title="">minimum</var> be that
- attribute's value; otherwise, let it be zero.</p>
-
- <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute
- attribute is specified, then let <var title="">maximum</var> be that
- attribute's value; otherwise, let it be 1.0.</p>
-
- <p>The following inequalities must hold, as applicable:</p>
-
- <ul class=brief><li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> is specified)</li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> is specified)</li>
- <li><var title="">minimum</var> &le; <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> &le; <var title="">maximum</var> (if <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> is specified)</li>
- </ul><p>If both the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> and <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attributes are specified, then
- the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute's value must
- be less than or equal to the value of the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute.</p>
-
- <p class=note>If no minimum or maximum is specified, then the
- range is assumed to be 0..1, and the value thus has to be within
- that range.</p>
-
- <p>Authors are encouraged to include a textual representation of the
- gauge's state in the element's contents, for users of user agents
- that do not support the <code><a href=#the-meter-element>meter</a></code> element.</p>
-
- <div class=example>
-
- <p>The following examples show three gauges that would all be
- three-quarters full:</p>
-
- <pre>Storage space usage: &lt;meter value=6 max=8&gt;6 blocks used (out of 8 total)&lt;/meter&gt;
-Voter turnout: &lt;meter value=0.75&gt;&lt;img alt="75%" src="graph75.png"&gt;&lt;/meter&gt;
-Tickets sold: &lt;meter min="0" max="100" value="75"&gt;&lt;/meter&gt;</pre>
-
- <p>The following example is incorrect use of the element, because
- it doesn't give a range (and since the default maximum is 1, both
- of the gauges would end up looking maxed out):</p>
-
- <pre class=bad>&lt;p&gt;The grapefruit pie had a radius of &lt;meter value=12&gt;12cm&lt;/meter&gt;
-and a height of &lt;meter value=2&gt;2cm&lt;/meter&gt;.&lt;/p&gt; &lt;!-- <strong>BAD!</strong> --&gt;</pre>
-
- <p>Instead, one would either not include the meter element, or use
- the meter element with a defined range to give the dimensions in
- context compared to other pies:</p>
-
- <pre>&lt;p&gt;The grapefruit pie had a radius of 12cm and a height of
-2cm.&lt;/p&gt;
-&lt;dl&gt;
- &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12&gt;12cm&lt;/meter&gt;
- &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2&gt;2cm&lt;/meter&gt;
-&lt;/dl&gt;</pre>
-
- </div>
-
- <p>There is no explicit way to specify units in the
- <code><a href=#the-meter-element>meter</a></code> element, but the units may be specified in the
- <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute in free-form text.</p>
-
- <div class=example>
-
- <p>The example above could be extended to mention the units:</p>
-
- <pre>&lt;dl&gt;
- &lt;dt&gt;Radius: &lt;dd&gt; &lt;meter min=0 max=20 value=12 title="centimeters"&gt;12cm&lt;/meter&gt;
- &lt;dt&gt;Height: &lt;dd&gt; &lt;meter min=0 max=10 value=2 title="centimeters"&gt;2cm&lt;/meter&gt;
-&lt;/dl&gt;</pre>
-
- </div>
-
- <div class=impl>
-
- <p><strong>User agent requirements</strong>: User agents must parse
- the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code>, <code title=attr-meter-max><a href=#attr-meter-max>max</a></code>, <code title=attr-meter-value><a href=#attr-meter-value>value</a></code>, <code title=attr-meter-low><a href=#attr-meter-low>low</a></code>, <code title=attr-meter-high><a href=#attr-meter-high>high</a></code>, and <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> attributes using the
- <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating point number values</a>.</p>
-
- <p>User agents must then use all these numbers to obtain values for
- six points on the gauge, as follows. (The order in which these are
- evaluated is important, as some of the values refer to earlier
- ones.)</p>
-
- <dl><dt>The minimum value</dt>
-
- <dd>
- <p>If the <code title=attr-meter-min><a href=#attr-meter-min>min</a></code> attribute is
- specified and a value could be parsed out of it, then the minimum
- value is that value. Otherwise, the minimum value is zero.</p>
- </dd>
-
- <dt>The maximum value</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-max><a href=#attr-meter-max>max</a></code> attribute is
- specified and a value could be parsed out of it, the maximum value
- is that value. Otherwise, the maximum value is 1.0.</p>
-
- <p>If the maximum value would be less than the minimum value, then
- the maximum value is actually the same as the minimum value.</p>
-
- </dd>
-
- <dt>The actual value</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-value><a href=#attr-meter-value>value</a></code> attribute is
- specified and a value could be parsed out of it, then that value
- is the actual value. Otherwise, the actual value is zero.</p>
-
- <p>If the actual value would be less than the minimum value, then
- the actual value is actually the same as the minimum value.</p>
-
- <p>If, on the other hand, the actual value would be greater than
- the maximum value, then the actual value is the maximum value.</p>
-
- </dd>
-
- <dt>The low boundary</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> attribute is
- specified and a value could be parsed out of it, then the low
- boundary is that value. Otherwise, the low boundary is the same as
- the minimum value.</p>
-
- <p>If the low boundary is then less than the minimum value, then
- the low boundary is actually the same as the minimum
- value. Similarly, if the low boundary is greater than the maximum
- value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- <dt>The high boundary</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> attribute is
- specified and a value could be parsed out of it, then the high
- boundary is that value. Otherwise, the high boundary is the same
- as the maximum value.</p>
-
- <p>If the high boundary is then less than the low boundary, then
- the high boundary is actually the same as the low
- boundary. Similarly, if the high boundary is greater than the
- maximum value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- <dt>The optimum point</dt>
-
- <dd>
-
- <p>If the <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code>
- attribute is specified and a value could be parsed out of it, then
- the optimum point is that value. Otherwise, the optimum point is
- the midpoint between the minimum value and the maximum value.</p>
-
- <p>If the optimum point is then less than the minimum value, then
- the optimum point is actually the same as the minimum
- value. Similarly, if the optimum point is greater than the maximum
- value, then it is actually the maximum value instead.</p>
-
- </dd>
-
- </dl><p>All of which will result in the following inequalities all being
- true:</p>
-
- <ul class=brief><li>minimum value &le; actual value &le; maximum value</li>
- <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
- <li>minimum value &le; optimum point &le; maximum value</li>
- </ul><!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] --><p><strong>UA requirements for regions of the gauge</strong>: If the
- optimum point is equal to the low boundary or the high boundary, or
- anywhere in between them, then the region between the low and high
- boundaries of the gauge must be treated as the optimum region, and
- the low and high parts, if any, must be treated as
- suboptimal. Otherwise, if the optimum point is less than the low
- boundary, then the region between the minimum value and the low
- boundary must be treated as the optimum region, the region between
- the low boundary and the high boundary must be treated as a
- suboptimal region, and the region between the high boundary and the
- maximum value must be treated as an even less good region. Finally,
- if the optimum point is higher than the high boundary, then the
- situation is reversed; the region between the high boundary and the
- maximum value must be treated as the optimum region, the region
- between the high boundary and the low boundary must be treated as a
- suboptimal region, and the remaining region between the low boundary
- and the minimum value must be treated as an even less good
- region.</p>
-
- <p><strong>UA requirements for showing the gauge</strong>: When
- representing a <code><a href=#the-meter-element>meter</a></code> element to the user, the UA should
- indicate the relative position of the actual value to the minimum
- and maximum values, and the relationship between the actual value
- and the three regions of the gauge.</p>
-
- </div>
-
- <div class=example>
- <p>The following markup:</p>
- <pre>&lt;h3&gt;Suggested groups&lt;/h3&gt;
-&lt;menu type="toolbar"&gt;
- &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()"&gt;Hide suggested groups&lt;/a&gt;
-&lt;/menu&gt;
-&lt;ul&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view"&gt;comp.infosystems.www.authoring.stylesheets&lt;/a&gt; -
- &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;Group description: &lt;strong&gt;Layout/presentation on the WWW.&lt;/strong&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.5"&gt;Moderate activity,&lt;/meter&gt;</strong> Usenet, 618 subscribers&lt;/p&gt;
- &lt;/li&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/netscape.public.mozilla.xpinstall/view"&gt;netscape.public.mozilla.xpinstall&lt;/a&gt; -
- &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;Group description: &lt;strong&gt;Mozilla XPInstall discussion.&lt;/strong&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 22 subscribers&lt;/p&gt;
- &lt;/li&gt;
- &lt;li&gt;
- &lt;p&gt;&lt;a href="/group/mozilla.dev.general/view"&gt;mozilla.dev.general&lt;/a&gt; -
- &lt;a href="/group/mozilla.dev.general/subscribe"&gt;join&lt;/a&gt;&lt;/p&gt;
- &lt;p&gt;<strong>&lt;meter value="0.25"&gt;Low activity,&lt;/meter&gt;</strong> Usenet, 66 subscribers&lt;/p&gt;
- &lt;/li&gt;
-&lt;/ul&gt;</pre>
- <p>Might be rendered as follows:</p>
- <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=images/sample-meter.png></p>
- </div>
-
- <p>User agents <span class=impl>may</span> combine the value of
- the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute and the other
- attributes to provide context-sensitive help or inline text
- detailing the actual values.</p>
-
- <div class=example>
- <p>For example, the following snippet:</p>
- <pre>&lt;meter min=0 max=60 value=23.2 title=seconds&gt;&lt;/meter&gt;</pre>
- <p>...might cause the user agent to display a gauge with a tooltip
- saying "Value: 23.2 out of 60." on one line and "seconds" on a
- second line.</p>
- </div>
-
- <div class=impl>
-
- <p>The <dfn id=dom-meter-min title=dom-meter-min><code>min</code></dfn>, <dfn id=dom-meter-max title=dom-meter-max><code>max</code></dfn>, <dfn id=dom-meter-value title=dom-meter-value><code>value</code></dfn>, <dfn id=dom-meter-low title=dom-meter-low><code>low</code></dfn>, <dfn id=dom-meter-high title=dom-meter-high><code>high</code></dfn>, and <dfn id=dom-meter-optimum title=dom-meter-optimum><code>optimum</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. When the relevant content attributes are absent, the IDL
- attributes must return zero.</p>
-
- </div>
-
- <div class=example>
-
- <p>The following example shows how a gauge could fall back to
- localized or pretty-printed text.</p>
-
- <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&thinsp;261&thinsp;928 bytes used
-out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
-
- </div>
-
-
-
-
- <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4>
+ <h4 id=the-ruby-element><span class=secno>4.6.18 </span>The <dfn><code>ruby</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17643,7 +17167,7 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
<!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
- <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4>
+ <h4 id=the-rt-element><span class=secno>4.6.19 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -17673,7 +17197,7 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4>
+ <h4 id=the-rp-element><span class=secno>4.6.20 </span>The <dfn><code>rp</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -17722,7 +17246,7 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdo-element><span class=secno>4.6.21 </span>The <dfn><code>bdo</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17771,7 +17295,7 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
- <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.22 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -17810,7 +17334,7 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
- <h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.23 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -17889,14 +17413,6 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
- <tr><td><code><a href=#the-progress-element>progress</a></code>
- <td>Progress bar
- <td><pre class=example>Copying: <strong>&lt;progress value=0.75&gt;75%&lt;/progress&gt;</strong></pre>
-
- <tr><td><code><a href=#the-meter-element>meter</a></code>
- <td>Gauge
- <td><pre class=example>Disk space remaining: <strong>&lt;meter value=0.75&gt;75%&lt;meter&gt;</strong></pre>
-
<tr><td><code><a href=#the-ruby-element>ruby</a></code>, <code><a href=#the-rt-element>rt</a></code>, <code><a href=#the-rp-element>rp</a></code>
<td>Ruby annotations
<td><pre class=example><strong>&lt;ruby&gt; OJ &lt;rp&gt;(&lt;rt&gt;Orange Juice&lt;rp&gt;)&lt;/ruby&gt;</strong></pre>
@@ -30569,8 +30085,10 @@ the cell that corresponds to the values of the two dice.
<li><code><a href=#the-input-element>input</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
+ <li><code><a href=#the-meter-element>meter</a></code></li>
<li><code><a href=#the-object-element>object</a></code></li>
<li><code><a href=#the-output-element>output</a></code></li>
+ <li><code><a href=#the-progress-element>progress</a></code></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
</ul><p>The <a href=#form-associated-element title="form-associated element">form-associated
@@ -30603,6 +30121,9 @@ the cell that corresponds to the values of the two dice.
<ul class="brief category-list"><li><code><a href=#the-button-element>button</a></code></li>
<li><code><a href=#the-input-element>input</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
+ <li><code><a href=#the-meter-element>meter</a></code></li>
+ <li><code><a href=#the-output-element>output</a></code></li>
+ <li><code><a href=#the-progress-element>progress</a></code></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
</ul></dd>
@@ -37985,13 +37506,12 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
-
<h4 id=the-output-element><span class=secno>4.10.13 </span>The <dfn><code>output</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
- <dd><a href=#category-listed title=category-listed>Listed</a> and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
+ <dd><a href=#category-listed title=category-listed>Listed</a>, <a href=#category-label title=category-label>labelable</a>, and <a href=#category-reset title=category-reset>resettable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
@@ -38017,6 +37537,8 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
readonly attribute DOMString <a href=#dom-cva-validationmessage title=dom-cva-validationMessage>validationMessage</a>;
boolean <a href=#dom-cva-checkvalidatity title=dom-cva-checkValidatity>checkValidity</a>();
void <a href=#dom-cva-setcustomvalidity title=dom-cva-setCustomValidity>setCustomValidity</a>(in DOMString error);
+
+ readonly attribute <span>NodeList</span> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
};</pre>
</dd>
</dl><p>The <code><a href=#the-output-element>output</a></code> element <a href=#represents>represents</a> the result of a
@@ -38126,7 +37648,9 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
<code title=dom-cva-validity><a href=#dom-cva-validity>validity</a></code>, and <code title=dom-cva-validationMessage><a href=#dom-cva-validationmessage>validationMessage</a></code>
attributes, and the <code title=dom-cva-checkValidatity><a href=#dom-cva-checkvalidatity>checkValidity()</a></code> and
<code title=dom-cva-setCustomValidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code>
- methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>.</p>
+ methods, are part of the <a href=#the-constraint-validation-api>constraint validation API</a>. The
+ <code title=dom-lfe-labels><a href=#dom-lfe-labels>labels</a></code> attribute provides a list
+ of the element's <code><a href=#the-label-element>label</a></code>s.</p>
<p><strong>Constraint validation</strong>: <code><a href=#the-output-element>output</a></code>
elements are always <a href=#barred-from-constraint-validation>barred from constraint
@@ -38149,7 +37673,513 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
- <h4 id=association-of-controls-and-forms><span class=secno>4.10.14 </span>Association of controls and forms</h4>
+ <h4 id=the-progress-element><span class=secno>4.10.14 </span>The <dfn><code>progress</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd><a href=#category-label title=category-label>Labelable</a> <a href=#form-associated-element>form-associated element</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>, but there must be no <code><a href=#the-progress-element>progress</a></code> element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-progress-value><a href=#attr-progress-value>value</a></code></dd>
+ <dd><code title=attr-progress-max><a href=#attr-progress-max>max</a></code></dd>
+ <dd><code title=attr-fae-form><a href=#attr-fae-form>form</a></code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+<pre class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute float <a href=#dom-progress-value title=dom-progress-value>value</a>;
+ attribute float <a href=#dom-progress-max title=dom-progress-max>max</a>;
+ readonly attribute float <a href=#dom-progress-position title=dom-progress-position>position</a>;
+ readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-fae-form title=dom-fae-form>form</a>;
+ readonly attribute <span>NodeList</span> <a href=#dom-lfe-labels title=dom-lfe-labels>labels</a>;
+};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-progress-element>progress</a></code> element <a href=#represents>represents</a> the
+ completion progress of a task. The progress is either indeterminate,
+ indicating that progress is being made but that it is not clear how
+ much more work remains to be done before the task is complete
+ (e.g. because the task is waiting for a remote host to respond), or
+ the progress is a number in the range zero to a maximum, giving the
+ fraction of work that has so far been completed.</p>
+
+ <p>There are two attributes that determine the current task
+ completion represented by the element.</p>
+
+ <p>The <dfn id=attr-progress-value title=attr-progress-value><code>value</code></dfn>
+ attribute specifies how much of the task has been completed, and the
+ <dfn id=attr-progress-max title=attr-progress-max><code>max</code></dfn> attribute
+ specifies how much work the task requires in total. The units are
+ arbitrary and not specified.</p>
+
+ <p>Authors are encouraged to also include the current value and the
+ maximum value inline as text inside the element, so that the
+ progress is made available to users of legacy user agents.</p>
+
+ <div class=example>
+ <p>Here is a snippet of a Web application that shows the progress
+ of some automated task:</p>
+ <pre>&lt;section&gt;
+ &lt;h2&gt;Task Progress&lt;/h2&gt;
+ &lt;p&gt;Progress: &lt;progress id="p" max=100&gt;&lt;span&gt;0&lt;/span&gt;%&lt;/progress&gt;&lt;/p&gt;
+ &lt;script&gt;
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.value = newValue;
+ progressBar.getElementsByTagName('span')[0].textContent = newValue;
+ }
+ &lt;/script&gt;
+&lt;/section&gt;</pre>
+ <p>(The <code>updateProgress()</code> method in this example would
+ be called by some other code on the page to update the actual
+ progress bar as the task progressed.)</p>
+ </div>
+
+ <p>The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> and <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attributes, when present, must
+ have values that are <a href=#valid-floating-point-number title="valid floating point number">valid
+ floating point numbers</a>. The <code title=attr-progress-value><a href=#attr-progress-value>value</a></code> attribute, if present, must
+ have a value equal to or greater than zero, and less than or equal
+ to the value of the <code title=attr-progress-max><a href=#attr-progress-max>max</a></code>
+ attribute, if present, or 1.0, otherwise. The <code title=attr-progress-max><a href=#attr-progress-max>max</a></code> attribute, if present, must
+ have a value greater than zero.</p>
+
+ <p class=note>The <code><a href=#the