Baseline Widely available
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.
Dieses Element enthält die globalen Attribute.
for
Eine durch Leerzeichen getrennte Liste von anderen Elementen-ids, die anzeigt, dass diese Elemente Eingabewerte zu der Berechnung beigetragen haben (oder diese anderweitig beeinflusst haben).
form
Das <form>-Element, mit dem das <output>-Element verknüpft werden soll (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form>-Elements im selben 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 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 nicht übermittelt, wenn das Formular gesendet wird.
name
Der Name des Elements. Wird in der form.elements-API verwendet.
Der <output>-Wert, der Name und der Inhalt werden NICHT während der Formularübermittlung übermittelt.
Viele Browser implementieren dieses Element als aria-live-Region. Unterstützende Technologie wird daher die Ergebnisse von UI-Interaktionen, die darin gepostet werden, ansagen, ohne dass der Fokus von den Steuerungen weggelenkt werden muss, die diese Ergebnisse erzeugen.
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 einer 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 = a.valueAsNumber;
const bValue = b.valueAsNumber;
result.value = aValue + bValue;
}
form.addEventListener("input", updateResult);
updateResult();
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4