<output>: Das Output-Element

Dieses Element umfasst die globalen Attribute.

for

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

form

Das <form>-Element, mit dem das Output-Element verknüpft werden soll (sein Formulareigentümer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben Dokument sein. (Ist dieses Attribut nicht gesetzt, wird das <output> mit seinem übergeordneten <form>-Element verknüpft, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <output>-Elemente zu <form>-Elementen überall im Dokument zuzuordnen, 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 übermittelt wird.

name

Der Name des Elements. Verwendet in der form.elements-API.

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

Viele Browser implementieren dieses Element als aria-live-Bereich. Unterstützende Technologien kündigen dadurch die Ergebnisse von UI-Interaktionen an, die darin veröffentlicht werden, ohne dass der Fokus von den Steuerelementen, die diese Ergebnisse erzeugen, weg wechseln muss.

Im folgenden Beispiel enthält 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 eines der Steuerelemente ä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();