mozilla

Revision 287241 of <output>

  • Revision slug: HTML/Element/Output
  • Revision title: Output
  • Revision id: 287241
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment 9 words added

Revision Content

{{ HTMLVersionHeader(5) }}

Summary

The 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>output</em> (&lt;output&gt;) 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 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