mozilla

Revision 319163 of <output>

  • Revision slug: HTML/Element/Output
  • Revision title: Output
  • Revision id: 319163
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ HTMLVersionHeader(5) }}

Summary

The HTML output (<output>) element represents the result of a calculation.

Content categories Flow content, phrasing content, listed, labelable, resettable form-associated element.
Permitted content Phrasing content.
Tag omission Must have both a start tag and an end tag.
Normative document HTML5, section 4.10.15

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("for") }}
A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation.
{{ htmlattrdef("form") }}
The form element that this element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the output element must be a descendant of a form element. This attribute enables you to place output elements anywhere within a document, not just as descendants of their form elements.
{{ htmlattrdef("name") }}
The name of the element.

DOM Interface

This element implements the HTMLOutputElement interface.

Example

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" name="b" value="50" />100 +<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10 {{ CompatGeckoDesktop("2.0") }} 10 11 nightly
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Other form-related elements: {{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.

{{ HTML:Element_Navigation() }}
{{ languages({"en":"en/HTML/Element/output", "fr":"fr/HTML/Element/output", "ja":"ja/HTML/Element/output" }) }}

Revision Source

<p>{{ HTMLVersionHeader(5) }}</p>
<h2 id="Summary">Summary</h2>
<p>The <em>HTML output</em> (<code>&lt;output&gt;</code>) element represents the result of a calculation.</p>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Content categories</td>
      <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en/HTML/Content_categories#form_listed" title="en/HTML/Content categories#form listed">listed</a>, <a href="/en/HTML/Content_categories#form_labelable" title="en/HTML/Content categories#form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a> <a href="/en/HTML/Content_categories#Form-associated_content" title="en/HTML/Content categories#Form-associated content">form-associated element</a>.</td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>.</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>Must have both a start tag and an end tag.</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.w3.org/TR/html5/the-button-element.html#the-output-element" title="http://www.w3.org/TR/html5/the-button-element.html#the-output-element">HTML5, section 4.10.15</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>Like all other HTML&nbsp;elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl>
  <dt>
    {{ htmlattrdef("for") }}</dt>
  <dd>
    A list of IDs of other elements, indicating that those elements contributed input values to (or otherwise affected) the calculation.</dd>
  <dt>
    {{ htmlattrdef("form") }}</dt>
  <dd>
    The form element that this element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the output element must be a descendant of a form element. This attribute enables you to place output elements anywhere within a document, not just as descendants of their form elements.</dd>
  <dt>
    {{ htmlattrdef("name") }}</dt>
  <dd>
    The name of the element.</dd>
</dl>
<h2 id="DOM_Interface">DOM Interface</h2>
<p>This element implements the <a href="/en/DOM/HTMLOutputElement" title="en/DOM/HTMLOutputElement">HTMLOutputElement</a> interface.</p>
<h2 id="Example">Example</h2>
<pre>
&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
0&lt;input type="range" name="b" value="50" /&gt;100 +&lt;input type="number" name="a" value="10" /&gt; =
&lt;output name="result"&gt;&lt;/output&gt;
&lt;/form&gt;
</pre>
<h2 id="Compatibility">Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>10</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>11</td>
        <td>nightly</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<p>Other form-related elements: {{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p>
<div>
  {{ HTML:Element_Navigation() }}</div>
<div>
  {{ languages({"en":"en/HTML/Element/output", "fr":"fr/HTML/Element/output", "ja":"ja/HTML/Element/output" }) }}</div>
Revert to this revision