<output>: Das Output-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Das <output> HTML-Element ist ein Container-Element, in das eine Website oder App die Ergebnisse einer Berechnung oder das Ergebnis einer Benutzeraktion einfügen kann.

Attribute

Dieses Element umfasst die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste von ids anderer Elemente, die anzeigt, dass diese Elemente Eingabewerte zur Berechnung beigetragen haben (oder diese anderweitig beeinflusst haben).

form

Das <form>-Element, mit dem das Ausgabeergebnis verknüpft werden soll (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form> im gleichen Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <output> mit seinem Vorfahren-<form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es, <output>-Elemente mit <form>s überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren-<form>-Element überschreiben. Der Name und Inhalt des <output>-Elements werden nicht beim Absenden des Formulars übermittelt.

name

Der Name des Elements. Wird in der form.elements-API verwendet.

Der Wert, der Name und der Inhalt des <output> werden bei der Formularübermittlung NICHT übermittelt.

Barrierefreiheit

Viele Browser implementieren dieses Element als aria-live Bereich. Assistive Technologien werden dadurch die Ergebnisse von UI-Interaktionen, die darin angezeigt werden, ankündigen, ohne dass der Fokus von den Steuerungen, die diese Ergebnisse erzeugen, wegschalten muss.

Beispiele

Im folgenden Beispiel bietet das Formular einen Schieberegler, dessen Wert zwischen 0 und 100 liegen kann, und ein <input>-Element, in das Sie eine zweite Zahl eingeben können. Die beiden Zahlen werden addiert und das Ergebnis wird im <output>-Element jedes Mal angezeigt, wenn sich der Wert eines der Steuerungen ändert.

html
<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
js
const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = parseInt(a.value);
  const bValue = parseInt(b.value);
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, phrasierter Inhalt, aufgelistet, beschriftbar, zurücksetzbar formularassoziiertes Element, fühlbarer Inhalt.
Zulässiger Inhalt Phrasierter Inhalt.
Tag-Auslassung Keine, sowohl der öffnende als auch der schließende Tag sind zwingend erforderlich.
Zulässige Eltern Jedes Element, das phrasierten Inhalt akzeptiert.
Implizite ARIA-Rolle status
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLOutputElement`](/de/docs/Web/API/HTMLOutputElement)

Spezifikationen

Specification
HTML Standard
# the-output-element

Browser-Kompatibilität

BCD tables only load in the browser