<output> HTML-Ausgabeelement

Attribute

Dieses Element enthält die globalen Attribute.

for

Eine durch Leerzeichen getrennte Liste anderer Elemente-IDs id, die anzeigt, dass diese Elemente Eingabewerte zur Berechnung beigetragen haben (oder diese anderweitig beeinflusst haben).

form

Das <form>-Element, mit dem das Output verknüpft werden soll (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im gleichen 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 überall im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren-<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 form.elements-API verwendet.

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

Barrierefreiheit

Viele Browser implementieren dieses Element als ein aria-live-Bereich. Assistive Technologien werden dadurch die Ergebnisse von UI-Interaktionen bekanntgeben, die darin veröffentlicht wurden, ohne dass der Fokus von den Steuerungen, die diese Ergebnisse erzeugen, wegbewegt werden muss.

Beispiele

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität