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 …
<form oninput="x.value=parseInt(a.value)"> Lautstärke: <input type="range" id="a" value="50"> <output name="x" for="a">50</output> </form>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
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" name="" step="1" >
 
  <label for="satz">Stundensatz (€)</label>
  <input type="number" min="8,5" id="satz" step="0.01" >
 
  <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) + ((stunden.valueAsNumber * satz.valueAsNumber) * (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.

[Bearbeiten] Siehe auch

[Bearbeiten] Referenz

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML