<output>

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.

Steckbrief <output>

Kategorie: Formulare
Art: Inline
Attribute: 3
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

Grundlagen

7 Punkte

<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

index.html

Grundsyntax

<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

3 Attribute

Attribut und Beispiel	Beschreibung
`for` String for="price quantity"	Eine oder mehrere IDs (mit Leerzeichen getrennt) der Elemente, die zur Berechnung beitragen. Ähnlich wie beim label-Element, aber mit mehreren IDs möglich.
`form` String form="calculator"	ID des zugehörigen Formulars. Ermöglicht ein output-Element außerhalb des form-Elements.
`name` String name="total"	Name des Output-Elements. Wird beim Formular-Submit als Teil der Formulardaten übertragen.

Beispiele

3 Beispiele

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

index.html

Preisrechner

<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>

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

index.html

Range-Slider

<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>

Ein Formular mit mehreren berechneten Outputs:

index.html

MwSt-Rechner

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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.

Apple Mail

Keine

JavaScript wird blockiert, output nicht gerendert.
Gmail

Keine

Entfernt output-Elemente und JavaScript.
Outlook

Keine

Keine Unterstützung für interaktive Elemente.
Thunderbird

Keine

JavaScript und dynamische Elemente werden blockiert.
Yahoo Mail

Keine

Entfernt interaktive Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<output>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter