<output>: Das Output-Element

Dieses Element umfasst die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste von ids anderer Elemente, die anzeigen, dass diese Elemente Eingabewerte für die Berechnung bereitgestellt haben oder die Berechnung anderweitig beeinflussten.

form

Das <form>-Element, mit dem das Ergebnis verknüpft wird (sein "Formularbesitzer"). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <output> mit seinem übergeordneten <form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <output>-Elemente mit <form>s überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <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 gesendet.

Viele Browser implementieren dieses Element als aria-live-Region. Unterstützende Technologien geben somit die Ergebnisse von Benutzeroberflächen-Interaktionen bekannt, die innerhalb des <output> gepostet werden, ohne dass der Fokus von den Steuerungen, die diese Ergebnisse erzeugen, wegverlegt werden muss.

Im folgenden Beispiel stellt das Formular einen Schieberegler zur Verfügung, 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, sobald 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 = parseInt(a.value);
  const bValue = parseInt(b.value);
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();