<output>: The Output element #

::: section-content The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. :::

Attributes #

::: section-content This element includes the global attributes.

for

A space-separated list of other elements' ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.

form

The <form> element to associate the output with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <output> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <output> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

name

The element's name. Used in the form.elements API.

The <output> value, name, and contents are NOT submitted during form submission. :::

Examples #

::: section-content In the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.

::: code-example [html]{.language-name}

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

::: :::

Result #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Accessibility Concerns #

::: section-content Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results. :::

Technical summary #

::: section-content

Content categories	Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`status`
Permitted ARIA roles	Any
DOM interface	`HTMLOutputElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-output-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

         Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

output 10 ≤18 4 No 11 7 4.4 18 4 11 7 1.0 for 10 ≤18 4 No 11 7 4.4 18 4 11 7 1.0 form 10 ≤18 4 No 11 7 4.4 18 4 11 7 1.0 name 10 ≤18 4 No 11 7 4.4 18 4 11 7 1.0 :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output{._attribution-link} :::