HTML/Formulare/Ergebnisausgabe

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das output-Element ist das Gegenstück des input-Elements und dient zur Ausgabe des Ergebnisses einer Benutzereingabe oder einer Berechnung der Applikation.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Folgende Attribute sind möglich:

  • for: Identifizierung eines anderen Elements (input-Element), welches sich auf eins oder mehrere Elemente beziehen kann. Hier sollte ein Name als Wert eingegeben werden.
  • name: dient wie beim input-Element für eine einmalige Namensbesetzung

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Ausgabe der Werte eines Schiebereglers

Beispiel ansehen …
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
function ausgeben(ev) {
    document.getElementById('output').value = ev.target.value;
}
 
document.getElementById('volume').addEventListener('input', ausgeben);
Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
  • Der IE verwendet das input-Event nicht korrekt und
  • stellt den Wert (value) des output-Elements nicht dar.
Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Deshalb ist es überlegens- und empfehlenswert, das output-Element erst vor der Ausgabe des Werts mit createElement dynamisch zu erzeugen und das input-Event mittels AddEventListener anzubinden.
Einfacher als das wäre wohl <output hidden="hidden"></output> und das hidden-Attribut per JavaScript entfernen.

[Bearbeiten] Ausgabe eines Stundenzettels

Beispiel ansehen …
<form id="myForm">
  <legend>Rechnung</legend>
 
  <label for="stunden">Arbeitsstunden</label>
  <input type="number" min="0" id="stunden" value="0" step=".25">
 
  <label for="satz">Stundensatz (€)</label>
  <input type="number" min="8,5" id="satz" value="48.50" step="0.50">
 
  <label for="mwst">MwSt (%)</label>
  <input type="number" min="0" id="mwst" value="19">
 
  <p><span>Gesamt:</span> <output id="betrag" for="stunden satz mwst">0</output></p>
</form>
In drei Eingabefeldern werden Werte für die Anzahl der geleisteten Stunden, des Stundensatzes und der Mehrwertsteuer abgefragt. Um Fehleingaben zu vermeiden, wird das Eingabefeld mit type=number auf die Eingabe von Zahlen beschränkt.
Der berechnete Wert wird in einem output-Element ausgegeben.
document.getElementById("myForm").addEventListener("input", rechne);
 
function rechne() {
var stunden = document.getElementById('stunden'),
    satz  = document.getElementById('satz'),
    mwst  = document.getElementById('mwst');
var summe  = stunden.valueAsNumber * satz.valueAsNumber * (1 + mwst.valueAsNumber/100);
 
summe = summe.toFixed(2);
document.getElementById('betrag').value = summe;
}
In diesem Beispiel wird der Eventhandler mit addEventListener dynamisch angehängt. Wenn etwas ins Formular eingegeben wird, feuert das input-Event und ruft die Funktion berechne() auf.

In dieser Funktion werden die Werte abgerufen und berechnet. Anschließend wird die summe mit toFixed(2) kaufmännisch auf zwei Stellen gerundet.

Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
  • Der IE verwendet das input-Event nicht korrekt und
  • stellt den Wert (value) des output-Elements nicht dar.

[Bearbeiten] Siehe auch

[Bearbeiten] Referenz

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML