<output>: Das Output-Element

Dieses Element beinhaltet die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste von ids anderer Elemente, die anzeigt, dass diese Elemente Eingabewerte für die Berechnung bereitgestellt haben (oder diese anderweitig beeinflusst haben).

form

Das <form>-Element, dem das Ergebnis zugeordnet werden soll (sein form owner). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das <output> mit seinem Vorfahren <form>-Element assoziiert, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen, <output>-Elemente mit <form>-Elementen irgendwo 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 beim Absenden des Formulars nicht übermittelt.

name

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

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

Viele Browser implementieren dieses Element als aria-live-Region. Assistive Technologien kündigen somit die Ergebnisse von Benutzerinteraktionen an, die darin gepostet werden, ohne dass der Fokus von den Steuerelementen wegbewegt 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 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();