[html5] r4531 - [acgiow] (0) Make <progress>, <meter>, and <output> labelable with <label>. Fixi [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Jan 6 19:40:12 PST 2010
Author: ianh
Date: 2010-01-06 19:40:03 -0800 (Wed, 06 Jan 2010)
New Revision: 4531
Modified:
complete.html
index
source
Log:
[acgiow] (0) Make <progress>, <meter>, and <output> labelable with <label>.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8554
Modified: complete.html
===================================================================
--- complete.html 2010-01-06 12:40:45 UTC (rev 4530)
+++ complete.html 2010-01-07 03:40:03 UTC (rev 4531)
@@ -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 — 6 January 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 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 @@
<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 @@
<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,7 +17242,7 @@
</div>
- <h4 id=the-progress-element><span class=secno>4.6.18 </span>The <dfn><code>progress</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>
@@ -17250,482 +17250,6 @@
<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><section>
- <h2>Task Progress</h2>
- <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
- <script>
- var progressBar = document.getElementById('p');
- function updateProgress(newValue) {
- progressBar.value = newValue;
- progressBar.getElementsByTagName('span')[0].textContent = newValue;
- }
- </script>
-</section></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 −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 −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 — 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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
- <li><var title="">minimum</var> ≤ <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> ≤ <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> ≤ <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> ≤ <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> ≤ <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> ≤ <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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
-Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
-Tickets sold: <meter min="0" max="100" value="75"></meter></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><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
-and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
-2cm.</p>
-<dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
-</dl></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><dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
-</dl></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 ≤ actual value ≤ maximum value</li>
- <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
- <li>minimum value ≤ optimum point ≤ 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><h3>Suggested groups</h3>
-<menu type="toolbar">
- <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
-</menu>
-<ul>
- <li>
- <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
- <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
- <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
- <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
- </li>
- <li>
- <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
- <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
- <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
- </li>
- <li>
- <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
- <a href="/group/mozilla.dev.general/subscribe">join</a></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
- </li>
-</ul></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><meter min=0 max=60 value=23.2 title=seconds></meter></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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
-out of 233 257 824 bytes available</meter></p></pre>
-
- </div>
-
-
-
-
- <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</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>One or more groups of: <a href=#phrasing-content>phrasing content</a> followed either by a single <code><a href=#the-rt-element>rt</a></code> element, or an <code><a href=#the-rp-element>rp</a></code> element, an <code><a href=#the-rt-element>rt</a></code> element, and another <code><a href=#the-rp-element>rp</a></code> element.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
@@ -17808,7 +17332,7 @@
<!-- 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 @@
</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 @@
</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-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=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 @@
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></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><progress value=0.75>75%</progress></strong></pre>
-
- <tr><td><code><a href=#the-meter-element>meter</a></code>
- <td>Gauge
- <td><pre class=example>Disk space remaining: <strong><meter value=0.75>75%<meter></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><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
@@ -30734,8 +30250,10 @@
<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 @@
<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-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 @@
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 @@
<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,8 +37838,514 @@
- <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><section>
+ <h2>Task Progress</h2>
+ <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
+ <script>
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.value = newValue;
+ progressBar.getElementsByTagName('span')[0].textContent = newValue;
+ }
+ </script>
+</section></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 −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 −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 — 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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
+ <li><var title="">minimum</var> ≤ <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> ≤ <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> ≤ <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> ≤ <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> ≤ <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> ≤ <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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
+Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
+Tickets sold: <meter min="0" max="100" value="75"></meter></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><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
+and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
+2cm.</p>
+<dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
+</dl></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><dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
+</dl></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 ≤ actual value ≤ maximum value</li>
+ <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
+ <li>minimum value ≤ optimum point ≤ 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><h3>Suggested groups</h3>
+<menu type="toolbar">
+ <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
+</menu>
+<ul>
+ <li>
+ <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
+ <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
+ <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
+ <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
+ <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
+ <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
+ <a href="/group/mozilla.dev.general/subscribe">join</a></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
+ </li>
+</ul></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><meter min=0 max=60 value=23.2 title=seconds></meter></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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
+out of 233 257 824 bytes available</meter></p></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
<dfn id=form-owner>form owner</dfn>. If a <a href=#form-associated-element>form-associated element</a> is
@@ -38433,6 +38463,9 @@
</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=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 @@
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 @@
<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 @@
<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=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 @@
<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 @@
</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=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 @@
- <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 @@
<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=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 @@
<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 @@
- <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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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
Modified: index
===================================================================
--- index 2010-01-06 12:40:45 UTC (rev 4530)
+++ index 2010-01-07 03:40:03 UTC (rev 4531)
@@ -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 — 6 January 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 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,7 +17077,7 @@
</div>
- <h4 id=the-progress-element><span class=secno>4.6.18 </span>The <dfn><code>progress</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>
@@ -17085,482 +17085,6 @@
<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><section>
- <h2>Task Progress</h2>
- <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
- <script>
- var progressBar = document.getElementById('p');
- function updateProgress(newValue) {
- progressBar.value = newValue;
- progressBar.getElementsByTagName('span')[0].textContent = newValue;
- }
- </script>
-</section></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 −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 −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 — 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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
- <li><var title="">minimum</var> ≤ <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> ≤ <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> ≤ <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> ≤ <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> ≤ <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> ≤ <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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
-Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
-Tickets sold: <meter min="0" max="100" value="75"></meter></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><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
-and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
-2cm.</p>
-<dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
-</dl></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><dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
-</dl></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 ≤ actual value ≤ maximum value</li>
- <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
- <li>minimum value ≤ optimum point ≤ 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><h3>Suggested groups</h3>
-<menu type="toolbar">
- <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
-</menu>
-<ul>
- <li>
- <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
- <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
- <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
- <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
- </li>
- <li>
- <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
- <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
- <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
- </li>
- <li>
- <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
- <a href="/group/mozilla.dev.general/subscribe">join</a></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
- </li>
-</ul></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><meter min=0 max=60 value=23.2 title=seconds></meter></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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
-out of 233 257 824 bytes available</meter></p></pre>
-
- </div>
-
-
-
-
- <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</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>One or more groups of: <a href=#phrasing-content>phrasing content</a> followed either by a single <code><a href=#the-rt-element>rt</a></code> element, or an <code><a href=#the-rp-element>rp</a></code> element, an <code><a href=#the-rt-element>rt</a></code> element, and another <code><a href=#the-rp-element>rp</a></code> element.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
@@ -17643,7 +17167,7 @@
<!-- 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 @@
</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 @@
</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 @@
- <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 @@
- <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 @@
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></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><progress value=0.75>75%</progress></strong></pre>
-
- <tr><td><code><a href=#the-meter-element>meter</a></code>
- <td>Gauge
- <td><pre class=example>Disk space remaining: <strong><meter value=0.75>75%<meter></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><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
@@ -30569,8 +30085,10 @@
<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 @@
<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 @@
-
<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 @@
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 @@
<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,8 +37673,514 @@
- <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><section>
+ <h2>Task Progress</h2>
+ <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
+ <script>
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.value = newValue;
+ progressBar.getElementsByTagName('span')[0].textContent = newValue;
+ }
+ </script>
+</section></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 −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 −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 — 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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
+ <li><var title="">minimum</var> ≤ <code title=attr-meter-low><a href=#attr-meter-low>low</a></code> ≤ <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> ≤ <code title=attr-meter-high><a href=#attr-meter-high>high</a></code> ≤ <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> ≤ <code title=attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> ≤ <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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
+Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
+Tickets sold: <meter min="0" max="100" value="75"></meter></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><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
+and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
+2cm.</p>
+<dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
+</dl></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><dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
+</dl></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 ≤ actual value ≤ maximum value</li>
+ <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
+ <li>minimum value ≤ optimum point ≤ 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><h3>Suggested groups</h3>
+<menu type="toolbar">
+ <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
+</menu>
+<ul>
+ <li>
+ <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
+ <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
+ <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
+ <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
+ <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
+ <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
+ <a href="/group/mozilla.dev.general/subscribe">join</a></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
+ </li>
+</ul></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><meter min=0 max=60 value=23.2 title=seconds></meter></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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
+out of 233 257 824 bytes available</meter></p></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
<dfn id=form-owner>form owner</dfn>. If a <a href=#form-associated-element>form-associated element</a> is
@@ -38268,6 +38298,9 @@
</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
@@ -38281,9 +38314,9 @@
- <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
@@ -38298,13 +38331,16 @@
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>
@@ -38326,6 +38362,9 @@
<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>
@@ -38335,7 +38374,7 @@
<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
@@ -38346,7 +38385,7 @@
- <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 -->
@@ -38381,6 +38420,9 @@
<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>
@@ -38395,7 +38437,7 @@
</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>
@@ -38426,7 +38468,7 @@
- <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
@@ -38575,9 +38617,9 @@
- <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>
@@ -38664,7 +38706,7 @@
<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
@@ -38748,7 +38790,7 @@
- <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>
@@ -38977,7 +39019,7 @@
<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
@@ -38991,11 +39033,11 @@
- <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>
@@ -39043,7 +39085,7 @@
<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
@@ -39072,7 +39114,7 @@
<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
@@ -39617,7 +39659,7 @@
<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>
@@ -39717,7 +39759,7 @@
<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>
@@ -39739,7 +39781,7 @@
<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>
@@ -39798,7 +39840,7 @@
<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
@@ -39819,7 +39861,7 @@
<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>
@@ -75476,7 +75518,7 @@
<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>
@@ -75964,16 +76006,19 @@
<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>
@@ -76051,6 +76096,7 @@
<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>
@@ -76088,12 +76134,15 @@
<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>
@@ -76560,8 +76609,10 @@
<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
Modified: source
===================================================================
--- source 2010-01-06 12:40:45 UTC (rev 4530)
+++ source 2010-01-07 03:40:03 UTC (rev 4531)
@@ -18209,534 +18209,6 @@
</div>
- <h4>The <dfn><code>progress</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>, but there must be no <code>progress</code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dd><code title="attr-progress-value">value</code></dd>
- <dd><code title="attr-progress-max">max</code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class="idl">interface <dfn>HTMLProgressElement</dfn> : <span>HTMLElement</span> {
- attribute float <span title="dom-progress-value">value</span>;
- attribute float <span title="dom-progress-max">max</span>;
- readonly attribute float <span title="dom-progress-position">position</span>;
-};</pre>
- </dd>
- </dl>
-
- <p>The <code>progress</code> element <span>represents</span> 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 title="attr-progress-value"><code>value</code></dfn>
- attribute specifies how much of the task has been completed, and the
- <dfn 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><section>
- <h2>Task Progress</h2>
- <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
- <script>
- var progressBar = document.getElementById('p');
- function updateProgress(newValue) {
- progressBar.value = newValue;
- progressBar.getElementsByTagName('span')[0].textContent = newValue;
- }
- </script>
-</section></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">value</code> and <code
- title="attr-progress-max">max</code> attributes, when present, must
- have values that are <span title="valid floating point number">valid
- floating point numbers</span>. The <code
- title="attr-progress-value">value</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">max</code>
- attribute, if present, or 1.0, otherwise. The <code
- title="attr-progress-max">max</code> attribute, if present, must
- have a value greater than zero.</p>
-
- <p class="note">The <code>progress</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>progress</code> would be inappropriate. Instead, the
- <code>meter</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">value</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">max</code> attribute, the user
- agent must parse the <code title="attr-progress-max">max</code>
- attribute's value according to the <span>rules for parsing floating
- point number values</span>. 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">max</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">value</code>
- attribute's value according to the <span>rules for parsing floating
- point number values</span>. 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">value</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>progress</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 title="dom-progress-max"><code>max</code></dfn> and <dfn
- title="dom-progress-value"><code>value</code></dfn> IDL attributes
- must <span>reflect</span> 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">position</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 −1.</p>
-
- </dl>
-
- <div class="impl">
-
- <p>If the progress bar is an indeterminate progress bar, then the
- <dfn title="dom-progress-position"><code>position</code></dfn> IDL
- attribute must return −1. Otherwise, it must return the result of
- dividing the current value by the maximum value.</p>
-
- </div>
-
-
-
- <h4>The <dfn><code>meter</code></dfn> element</h4>
- <!-- Keep this after <progress> and NOT close to <time> -->
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>, but there must be no <code>meter</code> element descendants.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dd><code title="attr-meter-value">value</code></dd>
- <dd><code title="attr-meter-min">min</code></dd>
- <dd><code title="attr-meter-low">low</code></dd>
- <dd><code title="attr-meter-high">high</code></dd>
- <dd><code title="attr-meter-max">max</code></dd>
- <dd><code title="attr-meter-optimum">optimum</code></dd>
- <dt>DOM interface:</dt>
- <dd>
-<pre class="idl">interface <dfn>HTMLMeterElement</dfn> : <span>HTMLElement</span> {
- attribute float <span title="dom-meter-value">value</span>;
- attribute float <span title="dom-meter-min">min</span>;
- attribute float <span title="dom-meter-max">max</span>;
- attribute float <span title="dom-meter-low">low</span>;
- attribute float <span title="dom-meter-high">high</span>;
- attribute float <span title="dom-meter-optimum">optimum</span>;
-};</pre>
- </dd>
- </dl>
-
- <p>The <code>meter</code> element <span>represents</span> 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>meter</code> element should not be used to
- indicate progress (as in a progress bar). For that role, HTML
- provides a separate <code>progress</code> element.</p>
-
- <p class="note">The <code>meter</code> element also does not
- represent a scalar value of arbitrary range — 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 title="attr-meter-min"><code>min</code></dfn> attribute
- specifies the lower bound of the range, and the <dfn
- title="attr-meter-max"><code>max</code></dfn> attribute specifies
- the upper bound. The <dfn
- 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
- title="attr-meter-low"><code>low</code></dfn> attribute specifies
- the range that is considered to be the "low" part, and the <dfn
- title="attr-meter-high"><code>high</code></dfn> attribute specifies
- the range that is considered to be the "high" part. The <dfn
- 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">value</code> attribute must be
- specified. The <code title="attr-meter-value">value</code>, <code
- title="attr-meter-min">min</code>, <code
- title="attr-meter-low">low</code>, <code
- title="attr-meter-high">high</code>, <code
- title="attr-meter-max">max</code>, and <code
- title="attr-meter-optimum">optimum</code> attributes, when present,
- must have values that are <span title="valid floating point
- number">valid floating point numbers</span>.</p>
-
- <p>In addition, the attributes' values are further constrained:</p>
-
- <p>Let <var title="">value</var> be the <code
- title="attr-meter-value">value</code> attribute's number.</p>
-
- <p>If the <code title="attr-meter-min">min</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">max</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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
- <li><var title="">minimum</var> ≤ <code title="attr-meter-low">low</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-low">low</code> is specified)</li>
- <li><var title="">minimum</var> ≤ <code title="attr-meter-high">high</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-high">high</code> is specified)</li>
- <li><var title="">minimum</var> ≤ <code title="attr-meter-optimum">optimum</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-optimum">optimum</code> is specified)</li>
- </ul>
-
- <p>If both the <code title="attr-meter-low">low</code> and <code
- title="attr-meter-high">high</code> attributes are specified, then
- the <code title="attr-meter-low">low</code> attribute's value must
- be less than or equal to the value of the <code
- title="attr-meter-high">high</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>meter</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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
-Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
-Tickets sold: <meter min="0" max="100" value="75"></meter></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"><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
-and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
-2cm.</p>
-<dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
-</dl></pre>
-
- </div>
-
- <p>There is no explicit way to specify units in the
- <code>meter</code> element, but the units may be specified in the
- <code title="attr-title">title</code> attribute in free-form text.</p>
-
- <div class="example">
-
- <p>The example above could be extended to mention the units:</p>
-
- <pre><dl>
- <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
-</dl></pre>
-
- </div>
-
- <div class="impl">
-
- <p><strong>User agent requirements</strong>: User agents must parse
- the <code title="attr-meter-min">min</code>, <code
- title="attr-meter-max">max</code>, <code
- title="attr-meter-value">value</code>, <code
- title="attr-meter-low">low</code>, <code
- title="attr-meter-high">high</code>, and <code
- title="attr-meter-optimum">optimum</code> attributes using the
- <span>rules for parsing floating point number values</span>.</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">min</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">max</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">value</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">low</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">high</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">optimum</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 ≤ actual value ≤ maximum value</li>
- <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
- <li>minimum value ≤ optimum point ≤ 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>meter</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><h3>Suggested groups</h3>
-<menu type="toolbar">
- <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
-</menu>
-<ul>
- <li>
- <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
- <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
- <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
- <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
- </li>
- <li>
- <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
- <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
- <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
- </li>
- <li>
- <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
- <a href="/group/mozilla.dev.general/subscribe">join</a></p>
- <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
- </li>
-</ul></pre>
- <p>Might be rendered as follows:</p>
- <p><img src="images/sample-meter.png" alt="With the <meter> elements rendered as inline green bars of varying lengths."></p>
- </div>
-
- <p>User agents <span class="impl">may</span> combine the value of
- the <code title="attr-title">title</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><meter min=0 max=60 value=23.2 title=seconds></meter></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 title="dom-meter-min"><code>min</code></dfn>, <dfn
- title="dom-meter-max"><code>max</code></dfn>, <dfn
- title="dom-meter-value"><code>value</code></dfn>, <dfn
- title="dom-meter-low"><code>low</code></dfn>, <dfn
- title="dom-meter-high"><code>high</code></dfn>, and <dfn
- title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
- must <span>reflect</span> 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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
-out of 233 257 824 bytes available</meter></p></pre>
-
- </div>
-
-
-
-
<h4>The <dfn><code>ruby</code></dfn> element</h4>
<dl class="element">
@@ -19121,16 +18593,6 @@
<td><pre class="example">Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></strong> from the rest.</pre>
<tr>
- <td><code>progress</code>
- <td>Progress bar
- <td><pre class="example">Copying: <strong><progress value=0.75>75%</progress></strong></pre>
-
- <tr>
- <td><code>meter</code>
- <td>Gauge
- <td><pre class="example">Disk space remaining: <strong><meter value=0.75>75%<meter></strong></pre>
-
- <tr>
<td><code>ruby</code>, <code>rt</code>, <code>rp</code>
<td>Ruby annotations
<td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
@@ -33849,8 +33311,10 @@
<li><code>input</code></li>
<li><code>keygen</code></li>
<li><code>label</code></li>
+ <li><code>meter</code></li>
<li><code>object</code></li>
<li><code>output</code></li>
+ <li><code>progress</code></li>
<li><code>select</code></li>
<li><code>textarea</code></li>
</ul>
@@ -33893,6 +33357,9 @@
<li><code>button</code></li>
<li><code>input</code></li>
<li><code>keygen</code></li>
+ <li><code>meter</code></li>
+ <li><code>output</code></li>
+ <li><code>progress</code></li>
<li><code>select</code></li>
<li><code>textarea</code></li>
</ul>
@@ -42429,14 +41896,13 @@
-
<h4>The <dfn><code>output</code></dfn> element</h4>
<dl class="element">
<dt>Categories</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Phrasing content</span>.</dd>
- <dd><span title="category-listed">Listed</span> and <span title="category-reset">resettable</span> <span>form-associated element</span>.</dd>
+ <dd><span title="category-listed">Listed</span>, <span title="category-label">labelable</span>, and <span title="category-reset">resettable</span> <span>form-associated element</span>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt>Content model:</dt>
@@ -42462,6 +41928,8 @@
readonly attribute DOMString <span title="dom-cva-validationMessage">validationMessage</span>;
boolean <span title="dom-cva-checkValidatity">checkValidity</span>();
void <span title="dom-cva-setCustomValidity">setCustomValidity</span>(in DOMString error);
+
+ readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
};</pre>
</dd>
</dl>
@@ -42594,7 +42062,9 @@
title="dom-cva-checkValidatity">checkValidity()</code> and
<code
title="dom-cva-setCustomValidity">setCustomValidity()</code>
- methods, are part of the <span>constraint validation API</span>.</p>
+ methods, are part of the <span>constraint validation API</span>. The
+ <code title="dom-lfe-labels">labels</code> attribute provides a list
+ of the element's <code>label</code>s.</p>
<p><strong>Constraint validation</strong>: <code>output</code>
elements are always <span>barred from constraint
@@ -42617,6 +42087,564 @@
+ <h4>The <dfn><code>progress</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dd><span title="category-label">Labelable</span> <span>form-associated element</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>, but there must be no <code>progress</code> element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dd><code title="attr-progress-value">value</code></dd>
+ <dd><code title="attr-progress-max">max</code></dd>
+ <dd><code title="attr-fae-form">form</code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+<pre class="idl">interface <dfn>HTMLProgressElement</dfn> : <span>HTMLElement</span> {
+ attribute float <span title="dom-progress-value">value</span>;
+ attribute float <span title="dom-progress-max">max</span>;
+ readonly attribute float <span title="dom-progress-position">position</span>;
+ readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
+ readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
+};</pre>
+ </dd>
+ </dl>
+
+ <p>The <code>progress</code> element <span>represents</span> 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 title="attr-progress-value"><code>value</code></dfn>
+ attribute specifies how much of the task has been completed, and the
+ <dfn 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><section>
+ <h2>Task Progress</h2>
+ <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
+ <script>
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.value = newValue;
+ progressBar.getElementsByTagName('span')[0].textContent = newValue;
+ }
+ </script>
+</section></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">value</code> and <code
+ title="attr-progress-max">max</code> attributes, when present, must
+ have values that are <span title="valid floating point number">valid
+ floating point numbers</span>. The <code
+ title="attr-progress-value">value</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">max</code>
+ attribute, if present, or 1.0, otherwise. The <code
+ title="attr-progress-max">max</code> attribute, if present, must
+ have a value greater than zero.</p>
+
+ <p class="note">The <code>progress</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>progress</code> would be inappropriate. Instead, the
+ <code>meter</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">value</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">max</code> attribute, the user
+ agent must parse the <code title="attr-progress-max">max</code>
+ attribute's value according to the <span>rules for parsing floating
+ point number values</span>. 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">max</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">value</code>
+ attribute's value according to the <span>rules for parsing floating
+ point number values</span>. 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">value</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>progress</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 title="dom-progress-max"><code>max</code></dfn> and <dfn
+ title="dom-progress-value"><code>value</code></dfn> IDL attributes
+ must <span>reflect</span> 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">form</code> attribute is used to
+ explicitly associate the <code>progress</code> element with its
+ <span>form owner</span>.</p>
+
+ <p><strong>Constraint validation</strong>: <code>progress</code>
+ elements are always <span>barred from constraint
+ validation</span>.</p>
+
+ </div>
+
+ <dl class="domintro">
+
+ <dt><var title="">progress</var> . <code title="dom-progress-position">position</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 −1.</p>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>If the progress bar is an indeterminate progress bar, then the
+ <dfn title="dom-progress-position"><code>position</code></dfn> IDL
+ attribute must return −1. Otherwise, it must return the result of
+ dividing the current value by the maximum value.</p>
+
+ <p>The <code title="dom-lfe-labels">labels</code> attribute provides
+ a list of the element's <code>label</code>s.</p>
+
+ </div>
+
+
+
+ <h4>The <dfn><code>meter</code></dfn> element</h4>
+ <!-- Keep this after <progress> and NOT close to <time> -->
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dd><span title="category-label">Labelable</span> <span>form-associated element</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>, but there must be no <code>meter</code> element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dd><code title="attr-meter-value">value</code></dd>
+ <dd><code title="attr-meter-min">min</code></dd>
+ <dd><code title="attr-meter-max">max</code></dd>
+ <dd><code title="attr-meter-low">low</code></dd>
+ <dd><code title="attr-meter-high">high</code></dd>
+ <dd><code title="attr-meter-optimum">optimum</code></dd>
+ <dd><code title="attr-fae-form">form</code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+<pre class="idl">interface <dfn>HTMLMeterElement</dfn> : <span>HTMLElement</span> {
+ attribute float <span title="dom-meter-value">value</span>;
+ attribute float <span title="dom-meter-min">min</span>;
+ attribute float <span title="dom-meter-max">max</span>;
+ attribute float <span title="dom-meter-low">low</span>;
+ attribute float <span title="dom-meter-high">high</span>;
+ attribute float <span title="dom-meter-optimum">optimum</span>;
+ readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
+ readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
+};</pre>
+ </dd>
+ </dl>
+
+ <p>The <code>meter</code> element <span>represents</span> 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>meter</code> element should not be used to
+ indicate progress (as in a progress bar). For that role, HTML
+ provides a separate <code>progress</code> element.</p>
+
+ <p class="note">The <code>meter</code> element also does not
+ represent a scalar value of arbitrary range — 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 title="attr-meter-min"><code>min</code></dfn> attribute
+ specifies the lower bound of the range, and the <dfn
+ title="attr-meter-max"><code>max</code></dfn> attribute specifies
+ the upper bound. The <dfn
+ 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
+ title="attr-meter-low"><code>low</code></dfn> attribute specifies
+ the range that is considered to be the "low" part, and the <dfn
+ title="attr-meter-high"><code>high</code></dfn> attribute specifies
+ the range that is considered to be the "high" part. The <dfn
+ 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">value</code> attribute must be
+ specified. The <code title="attr-meter-value">value</code>, <code
+ title="attr-meter-min">min</code>, <code
+ title="attr-meter-low">low</code>, <code
+ title="attr-meter-high">high</code>, <code
+ title="attr-meter-max">max</code>, and <code
+ title="attr-meter-optimum">optimum</code> attributes, when present,
+ must have values that are <span title="valid floating point
+ number">valid floating point numbers</span>.</p>
+
+ <p>In addition, the attributes' values are further constrained:</p>
+
+ <p>Let <var title="">value</var> be the <code
+ title="attr-meter-value">value</code> attribute's number.</p>
+
+ <p>If the <code title="attr-meter-min">min</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">max</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> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
+ <li><var title="">minimum</var> ≤ <code title="attr-meter-low">low</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-low">low</code> is specified)</li>
+ <li><var title="">minimum</var> ≤ <code title="attr-meter-high">high</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-high">high</code> is specified)</li>
+ <li><var title="">minimum</var> ≤ <code title="attr-meter-optimum">optimum</code> ≤ <var title="">maximum</var> (if <code title="attr-meter-optimum">optimum</code> is specified)</li>
+ </ul>
+
+ <p>If both the <code title="attr-meter-low">low</code> and <code
+ title="attr-meter-high">high</code> attributes are specified, then
+ the <code title="attr-meter-low">low</code> attribute's value must
+ be less than or equal to the value of the <code
+ title="attr-meter-high">high</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>meter</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: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
+Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
+Tickets sold: <meter min="0" max="100" value="75"></meter></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"><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
+and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></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><p>The grapefruit pie had a radius of 12cm and a height of
+2cm.</p>
+<dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
+</dl></pre>
+
+ </div>
+
+ <p>There is no explicit way to specify units in the
+ <code>meter</code> element, but the units may be specified in the
+ <code title="attr-title">title</code> attribute in free-form text.</p>
+
+ <div class="example">
+
+ <p>The example above could be extended to mention the units:</p>
+
+ <pre><dl>
+ <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
+ <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
+</dl></pre>
+
+ </div>
+
+ <div class="impl">
+
+ <p><strong>User agent requirements</strong>: User agents must parse
+ the <code title="attr-meter-min">min</code>, <code
+ title="attr-meter-max">max</code>, <code
+ title="attr-meter-value">value</code>, <code
+ title="attr-meter-low">low</code>, <code
+ title="attr-meter-high">high</code>, and <code
+ title="attr-meter-optimum">optimum</code> attributes using the
+ <span>rules for parsing floating point number values</span>.</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">min</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">max</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">value</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">low</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">high</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">optimum</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 ≤ actual value ≤ maximum value</li>
+ <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value</li>
+ <li>minimum value ≤ optimum point ≤ 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>meter</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><h3>Suggested groups</h3>
+<menu type="toolbar">
+ <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
+</menu>
+<ul>
+ <li>
+ <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
+ <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
+ <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
+ <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
+ <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
+ <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
+ </li>
+ <li>
+ <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
+ <a href="/group/mozilla.dev.general/subscribe">join</a></p>
+ <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
+ </li>
+</ul></pre>
+ <p>Might be rendered as follows:</p>
+ <p><img src="images/sample-meter.png" alt="With the <meter> elements rendered as inline green bars of varying lengths."></p>
+ </div>
+
+ <p>User agents <span class="impl">may</span> combine the value of
+ the <code title="attr-title">title</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><meter min=0 max=60 value=23.2 title=seconds></meter></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">form</code> attribute is used to
+ explicitly associate the <code>meter</code> element with its
+ <span>form owner</span>.</p>
+
+ <p><strong>Constraint validation</strong>: <code>meter</code>
+ elements are always <span>barred from constraint
+ validation</span>.</p>
+
+ <div class="impl">
+
+ <p>The <dfn title="dom-meter-min"><code>min</code></dfn>, <dfn
+ title="dom-meter-max"><code>max</code></dfn>, <dfn
+ title="dom-meter-value"><code>value</code></dfn>, <dfn
+ title="dom-meter-low"><code>low</code></dfn>, <dfn
+ title="dom-meter-high"><code>high</code></dfn>, and <dfn
+ title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
+ must <span>reflect</span> 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">labels</code> attribute provides
+ a list of the element's <code>label</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><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
+out of 233 257 824 bytes available</meter></p></pre>
+
+ </div>
+
+
+
+
<h4>Association of controls and forms</h4>
<p>A <span>form-associated element</span> can have a relationship
@@ -42761,6 +42789,9 @@
<div class="impl">
+ <!-- XXX should mention dom-fae-form in the various sections
+ defining elements that have it -->
+
<p><span title="form-associated element">Form-associated
elements</span> have a <dfn
title="dom-fae-form"><code>form</code></dfn> IDL attribute, which,
@@ -42793,6 +42824,9 @@
the empty string, then it is <span>barred from constraint
validation</span>.</p>
+ <!-- XXX should mention dom-fe-name in the various sections
+ defining elements that have it -->
+
<p>The <dfn title="dom-fe-name"><code>name</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-fe-name">name</code> content attribute.</p>
@@ -42825,6 +42859,9 @@
title="concept-fe-disabled">disabled</span>, it is <span>barred from
constraint validation</span>.</p>
+ <!-- XXX should mention dom-fe-disabled in the various sections
+ defining elements that have it -->
+
<p>The <dfn title="dom-fe-disabled"><code>disabled</code></dfn> IDL
attribute must <span>reflect</span> the <code
title="attr-fe-disabled">disabled</code> content attribute.</p>
@@ -42882,6 +42919,9 @@
<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 title="dom-fe-autofocus"><code>autofocus</code></dfn>
IDL attribute must <span>reflect</span> the content attribute of the
same name.</p>
@@ -93253,7 +93293,7 @@
<td><span title="Flow content">flow</span>;
<span title="Phrasing content">phrasing</span>;
<span title="Interactive content">interactive</span>;
- <span title="category-listed">Listed</span>;
+ <span title="category-listed">listed</span>;
<span title="category-label">labelable</span>;
<span title="category-submit">submittable</span>;
<span title="Form-associated element">form-associated</span></td>
@@ -93870,16 +93910,19 @@
<th><code>meter</code></th>
<td>Gauge</td>
<td><span title="Flow content">flow</span>;
- <span title="Phrasing content">phrasing</span></td>
+ <span title="Phrasing content">phrasing</span>;
+ <span title="category-label">labelable</span>;
+ <span title="Form-associated element">form-associated</span></td>
<td><span title="Phrasing content">phrasing</span></td>
<td><span title="Phrasing content">phrasing</span>*</td>
<td><span title="global attributes">globals</span>;
<code title="attr-meter-value">value</code>;
<code title="attr-meter-min">min</code>;
+ <code title="attr-meter-max">max</code>;
<code title="attr-meter-low">low</code>;
<code title="attr-meter-high">high</code>;
- <code title="attr-meter-max">max</code>;
- <code title="attr-meter-optimum">optimum</code></td>
+ <code title="attr-meter-optimum">optimum</code>;
+ <code title="attr-fae-form">form</code></td>
<td><code>HTMLMeterElement</code></td>
</tr>
@@ -93978,6 +94021,7 @@
<td><span title="Flow content">flow</span>;
<span title="Phrasing content">phrasing</span>;
<span title="category-listed">listed</span>;
+ <span title="category-label">labelable</span>;
<span title="category-reset">resettable</span>;
<span title="Form-associated element">form-associated</span></td>
<td><span title="Phrasing content">phrasing</span></td>
@@ -94027,12 +94071,15 @@
<th><code>progress</code></th>
<td>Progress bar</td>
<td><span title="Flow content">flow</span>;
- <span title="Phrasing content">phrasing</span></td>
+ <span title="Phrasing content">phrasing</span>;
+ <span title="category-label">labelable</span>;
+ <span title="Form-associated element">form-associated</span></td>
<td><span title="Phrasing content">phrasing</span></td>
<td><span title="Phrasing content">phrasing</span>*</td>
<td><span title="global attributes">globals</span>;
<code title="attr-progress-value">value</code>;
- <code title="attr-progress-max">max</code></td>
+ <code title="attr-progress-max">max</code>;
+ <code title="attr-fae-form">form</code></td>
<td><code>HTMLProgressElement</code></td>
</tr>
@@ -94624,8 +94671,10 @@
<code title="attr-fae-form">input</code>;
<code title="attr-fae-form">keygen</code>;
<code title="attr-fae-form">label</code>;
+ <code title="attr-fae-form">meter</code>;
<code title="attr-fae-form">object</code>;
<code title="attr-fae-form">output</code>;
+ <code title="attr-fae-form">progress</code>;
<code title="attr-fae-form">select</code>;
<code title="attr-fae-form">textarea</code>
<td> Associates the control with a <code>form</code> element
More information about the Commit-Watchers
mailing list