HTML <output> Tag

Der <output>-Tag ist eines der HTML5-Elemente. Er definiert einen Bereich zur Anzeige des Ergebnisses einer durch ein Skript durchgeführten Berechnung oder des Resultats der Interaktion eines Benutzers mit einem Formular. Er wird typischerweise mit <input>-Steuerelementen innerhalb eines <form> kombiniert und eignet sich gut für Live-Ergebnisse wie einen laufenden Gesamtbetrag, einen Preis nach Rabatt oder eine Wechselkursumrechnung.

Warum `<output>` statt `<span>` verwenden?

Einen berechneten Wert könnte man auch in einem einfachen <span> anzeigen, aber <output> bietet Semantik und Barrierefreiheit, die ein <span> nicht hat:

Es ist eine implizite Live-Region. <output> hat standardmäßig die ARIA-Rolle status, was es zu einer höflichen Live-Region macht. Wenn sich der Textinhalt ändert, kündigen Hilfstechnologien wie Screenreader den neuen Wert automatisch an — ohne dass role- oder aria-live-Attribute hinzugefügt werden müssen.
Es ist semantisch mit dem Formular verbunden. Browser und Tools behandeln <output> als echtes formularassoziiertes Element, sodass die Beziehung des Werts zu seinen Eingaben Teil der Bedeutung des Dokuments ist und nicht nur seines Layouts.
Das for-Attribut dokumentiert die Beziehung. Es listet die IDs der Steuerelemente auf, die zum Ergebnis beigetragen haben, und drückt die Absicht im Markup aus.

Dank des Live-Region-Verhaltens sieht ein sehender Benutzer die Zahl aktualisiert werden, während ein Screenreader-Benutzer die Aktualisierung hört. Ein <span> liefert nur die visuelle Änderung.

Das `for`-Attribut und die `oninput`-Verdrahtung

Das for-Attribut nimmt eine durch Leerzeichen getrennte Liste von Element-IDs entgegen — die Steuerelemente, deren Werte in die Berechnung einfließen. Es ist rein deklarativ: Es teilt Lesern und Tools mit, von welchen Eingaben das Ergebnis abhängt. Es führt nicht von sich aus eine Neuberechnung durch.

Die Neuberechnung wird durch JavaScript gesteuert. oninput auf dem <form>-Element zu setzen ist eine gängige Abkürzung: Das input-Ereignis blubbert nach oben, sodass ein einzelner Handler auf dem Formular immer dann ausgelöst wird, wenn sich ein beliebiges Steuerelement darin ändert. In diesem Handler liest man die Eingabewerte und weist das Ergebnis output.value zu.

Grundlegendes Beispiel

Im folgenden Beispiel hält ein oninput-Handler auf dem Formular den <output> synchron, während sich eines der Steuerelemente ändert. Das Attribut for="a b" hält fest, dass das Ergebnis von den Eingaben mit den IDs a und b abhängt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
      <input type="range" id="a" value="50" /> +
      <input type="number" id="b" value="25" /> =
      <output name="x" for="a b">75</output>
    </form>
  </body>
</html>

Probier es selbst »

Die 75, die zwischen den Tags steht, ist der Standardwert des Elements — der Wert, der vor jeder Eingabeänderung angezeigt wird, und der Wert, auf den <output> zurückgesetzt wird, wenn das Formular zurückgesetzt wird.

Verdrahtung mit `addEventListener`

Inline-oninput ist prägnant, mischt aber Verhalten ins Markup. In echten Projekten sollte man das Skript separat halten und den Handler mit addEventListener hinzufügen. Diese Version multipliziert zwei Zahlen und verwendet einen Handler für das input-Ereignis des Formulars wieder:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="calc">
      <input type="number" id="e" value="6" /> &times;
      <input type="number" id="f" value="7" /> =
      <output id="result" for="e f">42</output>
    </form>

    <script>
      const form = document.getElementById("calc");
      const result = document.getElementById("result");

      form.addEventListener("input", () => {
        const e = document.getElementById("e").valueAsNumber;
        const f = document.getElementById("f").valueAsNumber;
        result.value = e * f;
      });
    </script>
  </body>
</html>

Probier es selbst »

Hinweis zu valueAsNumber: Bei number- und range-Eingaben gibt es eine echte Zahl zurück (oder NaN bei leerer/ungültiger Eingabe), sodass die parseInt-Konvertierung entfällt. Wenn der Benutzer ein Feld leert, wird das Ergebnis zu NaN; schützen Sie sich in Produktionscode dagegen, wenn ein leeres Feld 0 oder einen leeren String anzeigen soll.

Das `form`-Attribut (losgelöste Ausgaben)

Standardmäßig gehört ein <output> zu dem Formular, in dem es verschachtelt ist. Das form-Attribut ermöglicht es, eine Ausgabe mit einem Formular zu verknüpfen, auch wenn sie außerhalb des Markup dieses Formulars liegt — nützlich, wenn das Layout das Ergebnis an anderer Stelle auf der Seite platziert. Verweisen Sie form auf die id des Zielformulars:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
      <input type="number" id="a" value="10" /> +
      <input type="number" id="b" value="5" />
    </form>

    <p>
      The total is:
      <!-- This output lives outside the form but belongs to it -->
      <output name="total" form="sum-form" for="a b">15</output>
    </p>
  </body>
</html>

Wird der Wert mit dem Formular übermittelt?

Nein. Obwohl <output> ein name-Attribut akzeptiert, wird sein Wert beim Absenden des Formulars nicht gesendet. Das name-Attribut existiert, damit Skripte das Element referenzieren können und für formularbezogene APIs, nicht um Daten an den Server zu übertragen. Wenn das berechnete Ergebnis auf dem Server benötigt wird, kopieren Sie es in ein verstecktes Eingabefeld (<input type="hidden">) oder berechnen Sie es serverseitig neu.

Wenn das Formular zurückgesetzt wird, kehrt <output> zu seinem Standardwert zurück — dem im HTML vorhandenen Textinhalt — und nicht zu dem Wert, den ein Skript zuletzt zugewiesen hat.

Attribute

Attribut	Wert	Beschreibung
for	element_id	Definiert eine oder mehrere durch Leerzeichen getrennte Element-IDs und legt die Verbindung zwischen dem Berechnungsergebnis und den bei der Berechnung verwendeten Elementen fest.
form	form_id	Definiert ein oder mehrere Formulare, zu denen das output-Element gehört.
name	name	Definiert den Namen des Elements.

Der <output>-Tag unterstützt die globalen Attribute und die Ereignisattribute.

Übung

Was ist der primäre Zweck des HTML-output-Elements?

Es validiert Formularfelder vor dem Absenden.Es zeigt das Ergebnis einer Berechnung an und fungiert als Live-Region, sodass Screenreader Aktualisierungen ankündigen.Es funktioniert nur im Firefox-Browser.Sein Wert wird automatisch mit dem Formular an den Server übermittelt.Es bettet eine Website in eine andere Website ein.

Warum <output> statt <span> verwenden?

Das for-Attribut und die oninput-Verdrahtung