<output>: Das Output-Element

Dieses Element enthält die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste von anderen Elementen-ids, die anzeigt, dass diese Elemente Eingabewerte zu der Berechnung beigetragen haben (oder diese anderweitig beeinflusst haben).

form

Das <form>-Element, mit dem das <output>-Element verknüpft werden soll (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben 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 Ihnen, <output>-Elemente mit <form>-Elementen überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren-<form>-Element überschreiben. Der Name und der Inhalt des <output>-Elements werden nicht übermittelt, wenn das Formular gesendet wird.

name

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

Der <output>-Wert, der Name und der Inhalt werden NICHT während der Formularübermittlung übermittelt.

Viele Browser implementieren dieses Element als aria-live-Region. Unterstützende Technologie wird daher die Ergebnisse von UI-Interaktionen, die darin gepostet werden, ansagen, ohne dass der Fokus von den Steuerungen weggelenkt werden muss, die diese Ergebnisse erzeugen.

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 angezeigt, jedes Mal wenn sich der Wert einer der Steuerungen ändert.

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

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 = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();