HTML output: Ausgabe von Berechnungen

HTML output-Tag

HTML output gehört zu den semantischen Elementen und gibt die Ergebnisse einer Berechnung aus – z.B. die aktuellen Werte eines Range-Sliders oder eines kleinen Online-Taschenrechners. output repräsentiert einen numerischen Rechenwert und ist kein neutrales Container-Element wie <span> oder <div>, sondern ein formulargebundenes Element mit eigener Logik. innerHTML wird ignoriert.

output ist sinnvoll, wenn ein berechnetes Ergebnis eine Summe oder eine Differenz, ein Produkt oder das Ergebnis aus mehreren Eingaben ist.

<form oninput="brutto.value = (net.value * (1 + vat.value/100)).toFixed(2)">
<label>
	Nettopreis (€)
	<input type="number" id="net" value="100" step="0.01">
</label>

<label>
	MwSt (%)
	<input type="number" id="vat" value="19">
</label>

<p>
	Brutto:
	<output id="brutto" name="brutto" for="net vat">119.00</output> €
</p>

output Attribute

for

Setzt den Ausgabebereich in eine Beziehung zu den Parametern der Berechnung, z.B.

<input type="range" id="range">
<output for="range"></output>

form

Ein oder mehrere Formulare, denen das meter-Element zugeordnet ist

name

name-Attribut des output-Elements für die serverseitige Anwendung

Der Wert von output ist primär numerisch und sollte weder ein Text, ein Zustand oder eine Erklärung sein.

Alternative für output

Für viele Anwendungen ist output viel zu widerspenstig und überqualifiziert. Klassisches Beispiel ist die Ausgabe eines Range-Sliders wie Lautstärke, Zoom-Level, Filter oder Statusanzeigen. Das sind Zustände des User Interface und keine Rechenergebnisse.

Wenn output nicht als semantisches Element gebraucht wird, kann man problemlos einen span- oder div-Container einsetzen.

<span id="res">2</span>

Dann ist auch nichts gegen innerHTML einzusetzen.

Ein Wort zum oninput-Attribut des output-Tags

Einn inline-Script im HTML triggert heute schnell eine Abwehrhaltung. Natürlich ist inline-Scripting veraltet und schlecht wartbar. Tatsächlich nutzen die HTML Specs dieses Muster selber, denn HTML darf rechnen, JavaScript muss es nicht. Das oninput-Attribut ist nicht deprecated, sondern immer noch im Standard. Es macht das HTML-Formular ohne Javascript-Datei interaktiv.

A simple calculator could use output for its display of calculated results:

<form onsubmit="return false" 
      oninput="o.value = a.valueAsNumber + b.valueAsNumber">
	<input id=a type=number step=any> +
	<input id=b type=number step=any> =
	<output id=o for="a b"></output>
</form>

Quelle: HTML Living Standard — Last Updated 5 February 2026 4.10.12 The output element

Best Practice ist natürlich ein rein semantisches HTML mit einem ausgelagerten Script.

<form id="calc">
	<label>Netto <input id="net" type="number" value="100" step="0.01"></label>
	<label>MwSt<input id="mwst" type="number" value="19"></label>
	Brutto: <output id="brutto" for="net mwst" name="brutto">119.00</output> €
</form>

const form = document.querySelector("#calc");
const net = form.querySelector("#net");
const mwst = form.querySelector("#mwst");
const brutto = form.querySelector("#brutto");

function recalc() {
	const result = net.value * (1 + mwst.value / 100);
	brutto.value = result.toFixed(2);
}