<output> Element

Technical Summary

Definition / Categories

Item	Definition
Meaning	The result of an application calculation or user action
Categories	Flow content, phrasing content, listed, labelable, resettable, form-associated, autocapitalize-and-autocorrect inheriting, and palpable content
Context	Where phrasing content is expected
Content model	Phrasing content
Tag omission	Neither the start tag nor the end tag is omissible
Content attributes	for, form, name, and global attributes
DOM interface	HTMLOutputElement

for and the calculation inputs

The for attribute describes an explicit relationship between a result and the elements whose values contributed to it or otherwise influenced it. Its value is a space-separated set of unique IDs from elements in the same tree.

<label for="price">Price</label>
<input id="price" name="price" type="number" value="10">
<label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="number" value="2">

<label for="total">Total</label>
<output id="total" for="price quantity">20</output>

for records the relationship; it does not watch inputs, perform the calculation, or update the displayed result. The application must implement those operations.

Form owner and name

An output gets a form owner from an ancestor form or from its form attribute. Its name is the name used to reference the element through the form's form.elements API.

<form id="calculation-form">
  <input id="amount" name="amount" type="number" value="1000">
</form>

<output id="tax" name="tax" form="calculation-form" for="amount">100</output>

This association creates a relationship for event handling and form APIs. It does not calculate or submit a result by itself.

Value, defaultValue, and reset

The initial default value is generally the element's descendant text. The value setter changes the current displayed value, while defaultValue reads and writes the value used by the reset algorithm.

<form id="output-form">
  <output id="result" for="a b">3</output>
  <button type="reset">Reset</button>
</form>

const result = document.querySelector('#result');
result.value = '42';
result.defaultValue; // read the initial default
// form.reset() or the reset button returns it to the default

When updating a dynamic result, define what the result should return to on reset. Current value, default value, and descendant text are related but must not be treated as the same state.

Form submission boundary

output is listed and form-associated, but it is not a submittable form control. A form owner does not make the output value part of the form's submission entry list.

<form id="invoice">
  <input name="amount" value="1000">
  <output name="tax" for="amount">100</output>
</form>

const formData = new FormData(document.querySelector('#invoice'));
formData.has('amount'); // true
formData.has('tax');    // false

If a result must be sent to a server, use a separate submittable input or another appropriate control and keep it synchronized with the visible output. Do not trust a displayed result for authorization or monetary calculations; validate or recalculate it on the server.

DOM Interface

HTMLOutputElement exposes the calculation-source htmlFor, form owner, name, type, defaultValue, value, and labels, among other form-related APIs.

API	Meaning	Boundary
htmlFor	The token list reflected from for	Reads or changes the relationship; does not calculate
form	The resolved form owner, or null	Form association does not mean submission
value	The current value; setting it replaces descendant text	Display update, not FormData participation
defaultValue	The default used by reset	Keep it distinct from the current value
labels	The NodeList of associated labels	An entry point for checking the accessible name
willValidate / validity	Exposed constraint-validation APIs	Implementation and validation-target behavior require separate observation

Fact / Evidence

Normative meaning, categories, relationships, state, and the submission boundary are recorded with conditions and source locations. Browser and accessibility-tree observations are kept separate in Implementation Evidence below.

Evidence

1. HTML Standard: The output element — meaning, categories, attributes, form association, submission boundary, reset, and DOM interface
2. HTML Accessibility API Mappings: output — output role and accessible-name computation
3. Web Platform Tests: HTML forms — entry point for locating tests related to output, form association, reset, and DOM APIs

Implementation Evidence

Browser implementation, WPT, and accessibility-tree observations are recorded separately from normative claims. forms-output-v1 ran on 2026-09-20 in Chrome 153 / Windows NT 10.0; the fixture-scope IMPL checks are reviewed and the accessibility-tree result is registered as a partial observation. WPT, Firefox, Safari, assistive technology, and platform API observations remain unrun.

Dedicated fixture: forms-output-v1 reproduces for, form ownership, form.elements, labels, value, defaultValue, reset, dynamic updates, and omission from FormData. The fixture is stored in docs/atlas/forms-output-v1-fixture.html and forms-output-v1-check.js, with the execution record in docs/atlas/forms-output-v1-results-2026-09-20.md.

Notifications after adding aria-live or role="status" must be evaluated separately from the element's normative meaning, browser AX-tree exposure, and assistive-technology announcements. A single environment must not be registered as a universal result.

Coverage / Open Issues

• ReviewedMeaning, categories, context, content model, tag omission, and content attributes
• ReviewedCalculation-source relationships through for, form owner, and the name / form.elements boundary
• Reviewedvalue, defaultValue, reset, and the normative boundary that output values are not submitted
• Partially coveredforms-output-v1 passed 8 checks in Chrome 153 on Windows NT 10.0; labeled output values were observed in the accessibility tree
• OpenFirefox and Safari implementation comparison for value updates, reset, form owner, FormData, and constraint-validation APIs
• OpenIndividual WPT results and browser differences in submission-related and DOM behavior
• OpenComplete HTML-AAM mapping, accessible names from ARIA attributes and title, dynamic-update AX-tree behavior, platform APIs, assistive technology, and ARIA announcements

This is initial coverage. It records the checked normative scope; it does not claim identical DOM, form-API, accessibility-API, or notification results in every browser and assistive technology.

Related surface

For a beginner-friendly explanation of displaying a calculation result, using for, and separating display from submission, see the output element page in Yugien. For input relationships, see the input element; for labelable elements and accessible names, see the label element; and for form ownership and entry lists, see the form element.