HTML <output>-Element
Das <output>-Element ist eines der HTML5-Elemente. Es definiert einen Bereich zur Darstellung des Ergebnisses einer Berechnung, die von einem Skript oder der Benutzerinteraktion mit einem Formularelement (<form>-Tag) durchgeführt wird. Das <output>-Element ist für komplexe Berechnungen konzipiert, wie z. B. die Ergebnisse einer Wechselkursumrechnung.
Berechnungen mit dem <output>-Element
Um das <output>-Element zu verwenden, sind grundlegende JavaScript-Kenntnisse erforderlich. Definieren Sie einen <input>-Typ vom Typ number, um das Formular darüber zu informieren, dass der Benutzer Ganzzahlen eingibt. Gibt der Benutzer nicht-numerische Eingaben ein, kann das Skript je nach Berechnungslogik NaN (Not a Number) an die Ausgabe zuweisen. Das <output>-Element wird in allen modernen Browsern weitgehend unterstützt.
Syntax
Das <output>-Element wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<output>) und dem schließenden (</output>)-Tag geschrieben.
Beispiel für das HTML <output>-Element mit zwei <form>-Elementen:
Beispiel für das HTML <output>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50" />100 +
<input type="number" id="b" value="25" /> =
<output name="x" for="a b"></output>
</form>
<p>Multiplication:</p>
<form oninput="d.value = e.valueAsNumber * f.valueAsNumber">
<input type="number" id="e" /> *
<input type="number" id="f" /> =
<output name="d" for="e f"> </output>
</form>
</body>
</html>Ergebnis
Beispiel für das HTML <output>-Element mit einem <form>-Element:
Ein weiteres Beispiel für das HTML <output>-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
display: flex;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
<div>
<input type="number" name="a" value="30" /> +
<input type="range" name="b" value="0" /> +
<input type="number" name="c" value="25" />
</div>
The result is:
<output name="result"></output>
</form>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| for | element_id | Definiert eine oder mehrere durch Leerzeichen getrennte Element-IDs, die die Verbindung zwischen dem Berechnungsergebnis und den bei der Berechnung verwendeten Elementen angeben. |
| form | form_id | Definiert eines oder mehrere Formulare, zu denen das Ausgabe-Element gehört. |
| name | name | Definiert den Namen des Elements. |
Das <output>-Element unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Was ist der Hauptzweck des HTML <output>-Elements?