Live form output without DOM writes
Showing a live result from a form used to mean wiring up input listeners that wrote to a div on every change. The output element connects directly to form inputs with no JavaScript.
2<output for="volume">50</output>
2<div id="display"></div>
3const input = document.getElementById('volume');
4const display = document.getElementById('display');
5input.addEventListener('input', () => {
6 display.textContent = input.value;
7});
Output Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2018.
Safe to use without fallbacks.
Your first month is free
Managed WordPress hosting for faster sites.
Semantic
output is a form element. It participates in the form, has a for attribute that links it to inputs, and is announced correctly by screen readers.
Part of the form
Unlike a div, output belongs to the form element. You can reference it with form.elements and it resets with the form on reset.
Multiple inputs
The for attribute takes a space-separated list of input IDs. One output can reflect multiple inputs.
How it works
The <output> element is a form-associated element that displays a result. Connect it to one or more inputs using the for attribute, which takes a space-separated list of input IDs. The initial value is whatever text content you put inside the tag.
Note: the browser does not automatically update the output value when the input changes. You still need a small JS listener to write to outputEl.value. What you gain is semantics: the element belongs to the form, announces as a live region to screen readers, and resets with the form.
For a truly zero-JS live display, combine output with a CSS custom property updated via an inline oninput: <input oninput="this.form.display.value=this.value">. This keeps JS inline and minimal.