Das<output>HTML-Element ist ein Containerelement, in das eine Website oder App die Ergebnisse einer Berechnung oder das Ergebnis einer Benutzeraktion einfügen kann.

Attribute

Dieses Element umfasst dieglobalen Attribute.

for

Eine durch Leerzeichen getrennte Liste von anderen Elementen-IDsids, die anzeigen, dass diese Elemente Eingabewerte zur Berechnung beigetragen haben (oder diese auf andere Weise beeinflussten).

form

Das<form>-Element, dem das Output-Element zugeordnet werden soll (seinFormularbesitzer). Der Wert dieses Attributs muss dieid eines<form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist das<output> seinem übergeordneten<form>-Element zugeordnet, falls vorhanden.)

Dieses Attribut ermöglicht die Zuordnung von<output>-Elementen zu<form> an beliebiger Stelle im Dokument, nicht nur innerhalb eines<form>. Es kann auch ein übergeordnetes<form>-Element überschreiben. Der Name und Inhalt des<output>-Elements werden beim Absenden des Formulars nicht übermittelt.

name

Der Name des Elements. Wird in derform.elements-API verwendet.

Der<output>-Wert, der Name und der Inhalt werden NICHT bei der Formularübermittlung gesendet.

Barrierefreiheit

Viele Browser implementieren dieses Element alsaria-live-Region. Assistive Technologien kündigen dadurch die Ergebnisse von UI-Interaktionen, die darin veröffentlicht werden, an, 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 zwischen0 und100 liegen kann, und ein<input>-Element, in das Sie eine zweite Zahl eingeben können. Die beiden Zahlen werden addiert und das Ergebnis wird jedes Mal im<output>-Element angezeigt, wenn sich der Wert einer der Steuerungen ändert.

<form>  <input type="range" name="b" value="50" /> +  <input type="number" 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