HTMLOutputElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.

* Some parts of this feature may have varying levels of support.

The HTMLOutputElement interface provides properties and methods (beyond those inherited from HTMLElement) for manipulating the layout and presentation of <output> elements.

EventTarget Node Element HTMLElement HTMLOutputElement

Constructor

HTMLOutputElement()

Creates a new HTMLOutputElement object.

Instance properties

This interface also inherits properties from its parent, HTMLElement.

HTMLOutputElement.defaultValue

A string 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 the form HTML attribute if it is defined.

HTMLOutputElement.htmlFor Read only

A DOMTokenList reflecting the for HTML attribute, containing a list of IDs of other elements in the same document that contribute to (or otherwise affect) the calculated value.

HTMLOutputElement.labels Read only

A NodeList of <label> elements associated with the element.

HTMLOutputElement.name

A string reflecting the name HTML attribute, containing the name for the control that is submitted with form data.

HTMLOutputElement.type Read only

The string "output".

HTMLOutputElement.validationMessage Read only

A string 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 is false), or it satisfies its constraints.

HTMLOutputElement.validity Read only

A ValidityState representing the validity states that this element is in.

HTMLOutputElement.value

A string representing the value of the contents of the elements. Behaves like the Node.textContent property.

HTMLOutputElement.willValidate Read only

Returns a boolean value that indicates whether the element is a candidate for constraint validation. Always false for HTMLOutputElement objects.

Instance methods

This interface also inherits methods from its parent, HTMLElement.

HTMLOutputElement.checkValidity()

Checks the validity of the element and returns a boolean value 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 returns false; if there are no problems, it returns true.

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
HTML
# htmloutputelement

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLOutputElement
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
HTMLOutputElement() constructor
Experimental
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – No support
Firefox
footnote No support
Opera – No support
Opera
footnote No support
Safari – Full support
Safari 15 (Release date: 2021-09-20)
footnote Full support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – Full support
Safari on iOS 15 (Release date: 2021-09-20)
footnote Full support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – Full support
WebView on iOS 15 (Release date: 2021-09-20)
footnote Full support
checkValidity
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
defaultValue
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
form
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
htmlFor
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote
footnote Before Chrome 50, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote
footnote Before Opera 37, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote
footnote Before Chrome Android 50, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote
footnote Before Opera Android 37, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote
footnote Before Samsung Internet 5.0, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote
footnote Before Chrome 50, this property returned the deprecated child DOMSettableTokenList instead of DOMTokenList.
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
labels
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 18 (Release date: 2018-10-02)
footnote Full support
Firefox – Full support
Firefox 56 (Release date: 2017-09-28)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 56 (Release date: 2017-09-28)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
name
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
reportValidity
Chrome – Full support
Chrome 40 (Release date: 2015-01-21)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 49 (Release date: 2016-09-20)
footnote Full support
Opera – Full support
Opera 27 (Release date: 2015-01-27)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 40 (Release date: 2015-01-21)
footnote Full support
Firefox for Android – Full support
Firefox for Android 49 (Release date: 2016-09-20)
footnote Full support
Opera Android – Full support
Opera Android 27 (Release date: 2015-01-29)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 40 (Release date: 2015-01-21)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
setCustomValidity
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote
footnote This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote
footnote This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote
footnote This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
type
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
validationMessage
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
validity
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
value
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support
willValidate
Chrome – Full support
Chrome 9 (Release date: 2011-02-03)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 5.1 (Release date: 2011-07-20)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 5 (Release date: 2011-10-12)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 5 (Release date: 2011-10-12)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

See also

  • The HTML element implementing this interface: <output>.