Revision 745437 of HTMLOutputElement

<div>
<div>{{ APIRef("HTML DOM") }}</div>
</div>

<p>The <strong><code>HTMLOutputElement</code></strong> interface provides properties and methods (beyond those inherited from {{domxref("HTMLElement")}}) for manipulating the layout and presentation of {{HTMLElement("output")}} elements.</p>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>defaultValue</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The default value of the element, initially the empty string.</td>
  </tr>
  <tr>
   <td><code>form</code>{{readonlyInline}}</td>
   <td>{{domxref("HTMLFormElement")}}</td>
   <td>Indicates the control's form owner, reflecting the {{htmlattrxref("form", "output")}} HTML attribute if it is defined.</td>
  </tr>
  <tr>
   <td><code>htmlFor</code>{{readonlyInline}}</td>
   <td>{{domxref("DOMSettableTokenList")}}</td>
   <td>Reflects the {{htmlattrxref("for", "output")}} HTML attribute, containing a list of IDs of other elements in the same document that contribute to (or otherwise affect) the calculated <code>value</code>.</td>
  </tr>
  <tr>
   <td><code>labels</code>{{readonlyInline}}</td>
   <td>{{domxref("NodeList")}}</td>
   <td>A list of label elements associated with this output element.</td>
  </tr>
  <tr>
   <td><code>name</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{htmlattrxref("name", "output")}} HTML attribute, containing the name for the control that is submitted with form data.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Must be the string <code>output</code>.</td>
  </tr>
  <tr>
   <td><code>validationMessage</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>A localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or it satisfies its constraints.</td>
  </tr>
  <tr>
   <td><code>validity</code>{{readonlyInline}}</td>
   <td>{{domxref("ValidityState")}}</td>
   <td>The validity states that this element is in.</td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The value of the contents of the elements. Behaves like the {{domxref("Node.textContent")}} property.</td>
  </tr>
  <tr>
   <td><code>willValidate</code>{{readonlyInline}}</td>
   <td>{{domxref("Boolean")}}</td>
   <td>The behavior of this property is subject to an <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10912" title="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10912">open specification bug</a>, as some browser maker are not happy with what is specified. It is unclear which will be the final the outcome of this.<br />
    <br />
    The standard behavior is to always return <code>false</code> because <code>output</code> objects are never candidates for constraint validation.<br />
    <br />
    The proposed new behavior, implemented in Firefox since Gecko 2.0 is to use this property to indicate whether the element is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation (See {{Bug("604673")}}).</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name &amp; Arguments</th>
   <th scope="col">Return</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>checkValidity()</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>The behavior of this property is subject to an <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10912" title="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10912">open specification bug</a>, as some browser maker are not happy with what is specified. It is unclear which will be the final the outcome of this.<br />
    <br />
    The standard behavior is to always return true because <code>output</code> objects are never candidates for constraint validation.<br />
    <br />
    The proposed new behavior, implemented in Firefox since Gecko 2.0 is to return <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints (See {{Bug("604673")}}.).</td>
  </tr>
  <tr>
   <td><code>setCustomValidity</code> (in {{domxref("DOMString")}} error)</td>
   <td><code>void</code></td>
   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
  </tr>
 </tbody>
</table>

<h2 id="Modes">Modes</h2>

<p>This element behaves in one of two modes: <em>default</em> mode and <em>value</em> mode.</p>

<h3 id="Default_Mode">Default Mode</h3>

<p>Initially, the element is in default mode, and so the contents of the element represent both the value of the element and its default value.</p>

<p>If the element is in default mode when the descendants of the element are changed in any way, the <code>defaultValue</code> property is set to the value of the {{domxref("Node.textContent","textContent")}} property.</p>

<p>Resetting the form puts the element into default mode, and sets the {{domxref("Node.textContent","textContent")}} property to the value of the <code>defaultValue</code> property.</p>

<h3 id="Value_Mode">Value Mode</h3>

<p>The element goes into value mode when the contents of the <code>value</code> property are set. The <code>value</code> property otherwise behaves like the {{domxref("Node.textContent","textContent")}} property. When the element is in value mode, the default value is accessible only through the <code>defaultValue</code> property.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "forms.html#the-output-element", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "forms.html#the-output-element", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-output-element", "HTMLOutputElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser 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 (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}{{bug(556743)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(2.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}{{bug(556743)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>The HTML element implementing this interface: {{ HTMLElement("output") }}.</li>
</ul>