The HTMLOutputElement
interface provides properties and methods (beyond those inherited from HTMLElement
) for manipulating the layout and presentation of <output>
elements.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLOutputElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
This interface also inherits properties from its parent, HTMLElement
.
HTMLOutputElement.defaultValue
- A
DOMString
representing the default value of the element, initially the empty string. HTMLOutputElement.form
Read only- An
HTMLFormElement
indicating the form associated with the control, reflecting theform
HTML attribute if it is defined. HTMLOutputElement.htmlFor
Read only- A
DOMTokenList
reflecting thefor
HTML attribute, containing a list of IDs of other elements in the same document that contribute to (or otherwise affect) the calculatedvalue
. HTMLOutputElement.labels
Read only- A
NodeList
of<label>
elements associated with the element. HTMLOutputElement.name
- A
DOMString
reflecting thename
HTML attribute, containing the name for the control that is submitted with form data. HTMLOutputElement.type
Read only- The
DOMString
"output
". HTMLOutputElement.validationMessage
Read only- A
DOMString
representing 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
isfalse
), or it satisfies its constraints. HTMLOutputElement.validity
Read only- A
ValidityState
representing the validity states that this element is in. HTMLOutputElement.value
- A
DOMString
representing the value of the contents of the elements. Behaves like theNode.textContent
property. HTMLOutputElement.willValidate
Read only- A
Boolean
indicating whether the element is a candidate for constraint validation.
Methods
This interface also inherits methods from its parent, HTMLElement
.
HTMLOutputElement.checkValidity()
- Checks the validity of the element and returns a
Boolean
holding the check result. HTMLOutputElement.reportValidity()
- This method reports the problems with the constraints on the element, if any, to the user. If there are problems, fires an
invalid
event at the element, and returnsfalse
; if there are no problems, it returnstrue
. - When the problem is reported, the user agent may focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention. User agents may report more than one constraint violation if this element suffers from multiple problems at once. If the element is not rendered, then the user agent may report the error for the running script instead of notifying the user.
HTMLOutputElement.setCustomValidity()
- 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 textContent
property.
Resetting the form puts the element into default mode, and sets the 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 textContent
property. When the element is in value mode, the default value is accessible only through the defaultValue
property.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of 'HTMLOutputElement' in that specification. | Living Standard | |
HTML 5.1The definition of 'HTMLOutputElement' in that specification. | Recommendation | No change |
HTML5The definition of 'HTMLOutputElement' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLOutputElement
|
Chrome
Full support Yes |
Edge
Full support ≤18 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
checkValidity
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
defaultValue
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
form
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
htmlFor
|
Chrome Full support Yes Full support Yes Notes' Before Chrome 50, this property returned the deprecated child |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera Full support Yes Full support Yes Notes' Before Opera 37, this property returned the deprecated child |
Safari
Full support 5 |
WebView Android Full support Yes Full support Yes Notes' Before Chrome 50, this property returned the deprecated child |
Chrome Android Full support Yes Full support Yes Notes' Before Chrome 50, this property returned the deprecated child |
Firefox Android
Full support 4 |
Opera Android Full support Yes Full support Yes Notes' Before Opera 37, this property returned the deprecated child |
Safari iOS
No support No |
Samsung Internet Android Full support Yes Full support Yes Notes' Before Samsung Internet 5.0, this property returned the deprecated child |
labels
|
Chrome
Full support Yes |
Edge
Full support 18 |
Firefox
Full support 56 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 56 |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
name
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
reportValidity
|
Chrome
Full support 40 |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support 27 |
Safari
Full support 5 |
WebView Android
Full support 40 |
Chrome Android
Full support 40 |
Firefox Android
Full support 4 |
Opera Android
Full support 27 |
Safari iOS
No support No |
Samsung Internet Android
Full support 4.0 |
setCustomValidity
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
type
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
validationMessage
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
validity
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
value
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
willValidate
|
Chrome
Full support Yes |
Edge
Full support 14 |
Firefox
Full support 4 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 5 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.'
- See implementation notes.
See also
- The HTML element implementing this interface:
<output>
.
HTMLOutputElement by Mozilla Contributors is licensed under CC-BY-SA 2.5.