<output>: Das Output-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
Das <output>
HTML-Element ist ein Container-Element, in das eine Website oder App die Ergebnisse einer Berechnung oder das Ergebnis einer Benutzeraktion einfügen kann.
Attribute
Dieses Element umfasst die globalen Attribute.
for
-
Eine durch Leerzeichen getrennte Liste von
id
s anderer Elemente, die anzeigt, dass diese Elemente Eingabewerte zur Berechnung beigetragen haben (oder diese anderweitig beeinflusst haben). form
-
Das
<form>
-Element, mit dem das Ausgabeergebnis verknüpft werden soll (sein Formular-Eigentümer). Der Wert dieses Attributs muss dieid
eines<form>
im gleichen Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird das<output>
mit seinem Vorfahren-<form>
-Element verknüpft, falls vorhanden.)Dieses Attribut ermöglicht es,
<output>
-Elemente mit<form>
s überall 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 nicht beim Absenden des Formulars übermittelt. name
-
Der Name des Elements. Wird in der
form.elements
-API verwendet.
Der Wert, der Name und der Inhalt des <output>
werden bei der Formularübermittlung NICHT übermittelt.
Barrierefreiheit
Viele Browser implementieren dieses Element als aria-live
Bereich. Assistive Technologien werden dadurch die Ergebnisse von UI-Interaktionen, die darin angezeigt werden, ankündigen, ohne dass der Fokus von den Steuerungen, die diese Ergebnisse erzeugen, wegschalten 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 jedes Mal angezeigt, wenn sich der Wert eines der Steuerungen ä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 = parseInt(a.value);
const bValue = parseInt(b.value);
result.value = aValue + bValue;
}
form.addEventListener("input", updateResult);
updateResult();
Ergebnis
Technische Zusammenfassung
Inhaltskategorien | Fließender Inhalt, phrasierter Inhalt, aufgelistet, beschriftbar, zurücksetzbar formularassoziiertes Element, fühlbarer Inhalt. |
---|---|
Zulässiger Inhalt | Phrasierter Inhalt. |
Tag-Auslassung | Keine, sowohl der öffnende als auch der schließende Tag sind zwingend erforderlich. |
Zulässige Eltern | Jedes Element, das phrasierten Inhalt akzeptiert. |
Implizite ARIA-Rolle | status |
Zulässige ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLOutputElement`](/de/docs/Web/API/HTMLOutputElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-output-element |
Browser-Kompatibilität
BCD tables only load in the browser