<output>

Zuletzt aktualisiert am 4. Februar 2026

Das <output>-Element zeigt das Ergebnis einer Berechnung oder einer Nutzer-Aktion an. Es ist semantisch dafür gedacht, Werte darzustellen, die von anderen Formularfeldern abhängen, zum Beispiel Summen, Zwischenergebnisse oder berechnete Preise. Im Gegensatz zu einem einfachen <span> signalisiert <output> Screenreadern, dass hier ein berechnetes Ergebnis steht.

Grundlagen

• <output> zeigt berechnete Ergebnisse oder dynamische Werte an
• Das for-Attribut verweist auf die IDs der Elemente, die zur Berechnung beitragen
• Es ist ein Inline-Element und kann direkt im Fließtext stehen
• Der Inhalt wird typischerweise per JavaScript aktualisiert
• Screenreader erkennen <output> als Live-Region und kündigen Änderungen an
• Das Element hat standardmäßig die ARIA-Rolle status
• Der Initialwert kann direkt als Textinhalt im HTML stehen

Syntax

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <label>Wert A: <input type="number" id="a" name="a" value="5"></label>
  +
  <label>Wert B: <input type="number" id="b" name="b" value="3"></label>
  =
  <output name="result" for="a b">8</output>
</form>

Attribute

Beispiele

Einfacher Rechner

Ein Taschenrechner, der zwei Werte addiert und das Ergebnis in Echtzeit anzeigt:

<form oninput="total.value =
  (parseFloat(price.value) * parseInt(qty.value)).toFixed(2)">

  <label for="price">Preis (€):</label>
  <input type="number" id="price" name="price"
         value="9.99" step="0.01">

  <label for="qty">Anzahl:</label>
  <input type="number" id="qty" name="qty"
         value="2" min="1" max="100">

  <p>
    Gesamtpreis:
    <output name="total" for="price qty">19.98</output> €
  </p>
</form>

Range-Slider mit Output

Ein häufiger Anwendungsfall: Den aktuellen Wert eines Range-Sliders in Echtzeit anzeigen:

<form oninput="display.value = slider.value">
  <label for="slider">Bewertung:</label>

  <input type="range" id="slider" name="slider"
         min="0" max="10" value="7">

  <output name="display" for="slider">7</output>
  <span>/ 10</span>
</form>

Mehrere Berechnungen

Ein Formular mit mehreren berechneten Outputs:

<form oninput="
  var p = parseFloat(netto.value);
  var tax = (p * 0.19).toFixed(2);
  mwst.value = tax;
  brutto.value = (p + parseFloat(tax)).toFixed(2);
">
  <label for="netto">Nettobetrag (€):</label>
  <input type="number" id="netto" name="netto"
         value="100" step="0.01">

  <p>MwSt (19%): <output name="mwst" for="netto">19.00</output> €</p>
  <p>Brutto: <output name="brutto" for="netto">119.00</output> €</p>
</form>

Barrierefreiheit

Das <output>-Element hat standardmäßig die ARIA-Rolle status, was bedeutet, dass Screenreader Änderungen automatisch ankündigen, ohne den aktuellen Fokus zu unterbrechen. Das ist ideal für berechnete Ergebnisse: Wenn der Nutzer einen Slider bewegt, wird der neue Wert im Output vorgelesen, ohne dass der Fokus vom Slider wegspringt.

Das for-Attribut verbessert die Barrierefreiheit zusätzlich, indem es die semantische Beziehung zwischen Eingabefeldern und Ergebnis herstellt. Screenreader können diese Verbindung nutzen, um den Kontext zu vermitteln.

Wenn du die Standard-Live-Region-Eigenschaft ändern willst, kannst du aria-live explizit setzen. Für Ergebnisse, die sofort auffallen sollen, verwende aria-live="assertive", aber in den meisten Fällen ist das Standard-Verhalten (polite) die bessere Wahl.

Häufige Fehler

Span statt Output verwenden: Viele Entwickler verwenden ein <span> oder <div>, um berechnete Ergebnisse anzuzeigen. Das funktioniert visuell, aber Screenreader erkennen den Wert dann nicht als Berechnungsergebnis. Verwende <output> für semantisch korrekte Ergebnisse: Der Aufwand ist minimal und die Barrierefreiheit profitiert.

Fehlendes for-Attribut: Das for-Attribut ist optional, aber es stellt die semantische Verbindung zwischen Eingabe und Ergebnis her. Ohne for fehlt Screenreadern der Kontext, welche Felder zum Ergebnis beitragen.

Output ohne JavaScript: Das <output>-Element selbst hat keine eingebaute Berechnungslogik. Du brauchst JavaScript (oder das oninput-Event auf dem Formular), um den Wert zu aktualisieren. Ein <output> ohne zugehörige Logik zeigt nur seinen initialen Textinhalt an.

Zu komplexe Inline-Berechnungen: Das oninput-Attribut auf dem <form> eignet sich für einfache Berechnungen. Für komplexere Logik solltest du die Berechnung in eine JavaScript-Funktion auslagern, um den Code lesbar und wartbar zu halten.

Browser-Kompatibilität

Das output-Element wird von allen modernen Browsern unterstützt.

Email-Kompatibilität

Interaktive Elemente wie output werden von E-Mail-Clients nicht unterstützt. JavaScript wird in E-Mails blockiert, daher können keine dynamischen Berechnungen stattfinden.

Verwandte Elemente