<output> HTML-Ausgabeelement

Attribute

Dieses Element unterstützt die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste der id-Werte anderer Elemente. Sie gibt an, dass diese Elemente Eingabewerte für die Berechnung geliefert oder sie anderweitig beeinflusst haben.

form

Das <form>-Element, dem die Ausgabe zugeordnet ist (ihr Formulareigentümer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben Dokument sein. (Ist dieses Attribut nicht gesetzt, wird <output> dem übergeordneten <form>-Element zugeordnet, sofern eines vorhanden ist.)

Mit diesem Attribut können Sie <output>-Elemente einem <form> an beliebiger Stelle im Dokument zuordnen, nicht nur innerhalb eines <form>. Es kann auch die Zuordnung zu einem übergeordneten <form>-Element überschreiben. Name und Inhalt des <output>-Elements werden beim Absenden des Formulars nicht übermittelt.

name

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

Wert, Name und Inhalt von <output> werden beim Absenden des Formulars nicht übermittelt.

Barrierefreiheit

Viele Browser implementieren dieses Element als aria-live-Bereich. Dadurch können assistive Technologien die darin ausgegebenen Ergebnisse von Interaktionen mit der Benutzeroberfläche ansagen, ohne dass der Fokus von den Bedienelementen wegbewegt werden muss, die diese Ergebnisse erzeugen.

Aktualisierungen von Live-Bereichen werden im Allgemeinen als reiner Text angesagt. Links, Schaltflächen und andere semantische Informationen innerhalb von <output> werden bei der Ansage daher möglicherweise nicht vermittelt.

Beispiele

Im folgenden Beispiel gibt es einen Schieberegler mit Werten zwischen 0 und 100 und ein <input>-Element, in das Sie eine zweite Zahl eingeben können. Die beiden Zahlen werden addiert, und das Ergebnis wird bei jeder Wertänderung eines der Bedienelemente im <output>-Element angezeigt.

<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output id="result" for="a b">60</output>

const a = document.getElementById("a");
const b = document.getElementById("b");
const result = document.getElementById("result");

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

a.addEventListener("input", updateResult);
b.addEventListener("input", updateResult);

updateResult();

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität