mozilla

Revision 404913 of HTMLOutputElement

  • Revision slug: Web/API/HTMLOutputElement
  • Revision title: HTMLOutputElement
  • Revision id: 404913
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

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

Properties

Name Type Description
defaultValue {{domxref("DOMString")}} The default value of the element, initially the empty string.
form{{readonlyInline}}  {{domxref("HTMLFormElement")}} Indicates the control's form owner, reflecting the {{htmlattrxref("form", "output")}} HTML attribute if it is defined.
htmlFor{{readonlyInline}} {{domxref("DOMSettableTokenList")}} 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 value.
labels{{readonlyInline}} {{domxref("NodeList")}} A list of label elements associated with this output element.
name {{domxref("DOMString")}} Reflects the {{htmlattrxref("name", "output")}} HTML attribute, containing the name for the control that is submitted with form data.
type {{domxref("DOMString")}} Must be the string output.
validationMessage {{domxref("DOMString")}} 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 (willValidate is false), or it satisfies its constraints.
validity{{readonlyInline}} {{domxref("ValidityState")}} The validity states that this element is in.
value {{domxref("DOMString")}} The value of the contents of the elements. Behaves like the {{domxref("Node.textContent")}} property.
willValidate{{readonlyInline}} {{domxref("Boolean")}} {{Non-standard_inline}} in Gecko 2.0. Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation. (See {{Bug("604673")}}.)
The standard behavior is to always return false because output objects are never candidates for constraint validation.

Methods

Name & Arguments Return Description
checkValidity() {{domxref("Boolean")}} {{Non-standard_inline}} in Gecko 2.0. Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an invalid event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
The standard behavior is to always return true because output objects are never candidates for constraint validation.
setCustomValidity (in {{domxref("DOMString")}} error) void 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.

Modes

This element behaves in one of two modes: default mode and value mode.

Default Mode

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.

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

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

Value Mode

The element goes into value mode when the contents of the value property are set. The value 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 defaultValue property.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "forms.html#the-output-element", "HTMLOutputElement")}} {{Spec2('HTML WHATWG')}} No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "forms.html#the-output-element", "HTMLOutputElement")}} {{Spec2('HTML5 W3C')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop(2.0)}} 10.0 {{CompatVersionUnknown}} 5.1
labels {{CompatVersionUnknown}} {{CompatNo}}{{bug(556743)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile(2.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}}
labels {{CompatVersionUnknown}} {{CompatNo}}{{bug(556743)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}

See also

  • The HTML element implementing this interface: {{ HTMLElement("dl") }}.

Revision Source

<div>
  {{DomRef}}</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>
<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>&nbsp;{{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>{{Non-standard_inline}} in Gecko 2.0. Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation. (See {{Bug("604673")}}.)<br />
        The standard behavior is to always return false because <code>output</code> objects are never candidates for constraint validation.</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<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>{{Non-standard_inline}} in Gecko 2.0. Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an <code>invalid</code> event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.<br />
        The standard behavior is to always return true because <code>output</code> objects are never candidates for constraint validation.<!--
      </td--></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 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>10.0</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("dl") }}.</li>
</ul>
Revert to this revision