HTML-Ausgabeelement <output>

Attribute

Dieses Element enthält die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste der ids anderer Elemente, die angibt, dass diese Elemente Eingabewerte zur Berechnung beigetragen oder sie anderweitig beeinflusst haben.

form

Das <form>-Element, dem die Ausgabe 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 <output> seinem übergeordneten <form>-Element zugeordnet, falls vorhanden.)

Mit diesem Attribut können Sie <output>-Elemente <form>s an jeder Stelle im Dokument zuordnen, nicht nur innerhalb eines <form>. Es kann auch ein übergeordnetes <form>-Element überschreiben. Der Name und der Inhalt des <output>-Elements werden beim Absenden des Formulars nicht übermittelt.

name

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

Der Wert, der Name und der Inhalt von <output> werden beim Absenden eines Formulars NICHT übermittelt.

Barrierefreiheit

Viele Browser implementieren dieses Element als aria-live-Region. Assistive Technologien geben dadurch die darin veröffentlichten Ergebnisse von UI-Interaktionen bekannt, ohne dass der Fokus von den Steuerelementen weg verschoben werden muss, die diese Ergebnisse erzeugen.

Aktualisierungen von Live-Regionen werden in der Regel als Klartext angekündigt, sodass Links, Schaltflächen und andere innerhalb von <output> verschachtelte Semantik möglicherweise nicht in der Ankündigung vermittelt werden.

Beispiele

Im folgenden Beispiel bietet das Formular einen Schieberegler, dessen Wert zwischen 0 und 100 liegen kann, sowie ein <input>-Element, in das Sie eine zweite Zahl eingeben können. Die beiden Zahlen werden addiert, und das Ergebnis wird bei jeder Änderung des Werts eines der Steuerelemente im <output>-Element angezeigt.

<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();

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität