HTML/Tutorials/Formulare/Ergebnisausgabe

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
12min
Schwierigkeitsgrad
leicht


In ganz alten JavScripten wurden Berechnungen in input-Elementer geschrieben. In HTML5 wurden zwei neue elemente eingeführt: output ist für die Ausgabe von Berechnungen gedacht - während das meter-Element eine visuelle Anzeige ermöglicht.

output[Bearbeiten]

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

Folgende Attribute sind möglich:

  • for: IDs von einem oder mehreren input-Elementen, auf welche sich die Berechnung bezieht (leerzeichen-getrennte Liste von IDs)
  • name: dient wie beim input-Element für eine einmalige Namensbesetzung

Ausgabe der Werte eines Schiebereglers[Bearbeiten]

Beispiel ansehen …
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label>Lautstärke: <input type="range" id="volume" value="50"></label>
<output id="output" for="volume"></output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
let volumeSlider = document.getElementById('volume');

function setzeVolumeAnzeige(wert) {
    document.getElementById('output').value = wert;
}
volumeSlider.addEventListener('input', function(event) {
   setzeVolumeAnzeige(event.target.value);
});
setzeVolumeAnzeige(volumeSlider.value);
Das <output>-Element bekommt im HTML keinen vorbelegten Inhalt. Dadurch würde der Wert "50" unnötig gedoppelt, und falls . Statt dessen wird das <output>-Element im JavaScript initialisiert.
Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Solange das output-Element nicht visuell markiert wird (Hintergründe, Ränder, vorbelegter Wert), ist das ohne Bedeutung. Wenn Sie aber auf "ausprobieren" klicken, finden Sie im Frickl ein output-Element, dem durch die ::after-Pseudoklasse ein Prozentzeichen hinzugefügt wird und das visuell deutlich hervorgehoben wird. Wie man mit inaktivem JavaScript umgeht, wird im Artikel zum Progressive Enhancement angesprochen. Beispielsweise könnten Sie das output-Element im HTML weglassen und erst per JavaScript in das Dokument einsetzen. Oder Sie liefern es mit dem hidden-Attribut aus und entfernen das Attribut im JavaScript. Das Frickl zeigt den zweiten Ansatz (wobei er dort wenig nützt, ohne JavaScript funktioniert das ganze Frickl nicht).

Ausgabe eines Stundenzettels[Bearbeiten]

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 rechne() 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 8 und älter unterstützt das input-Event nicht,
  • der IE 11 und älter stellt den Wert (value) des output-Elements nicht dar und
  • der IE 11 und älter unterstützt valueAsNumber nicht.

meter[Bearbeiten]

Das meter-Element visualisiert einen Wert einer Größe in Abhängigkeit einer Skala in bis zu drei (Ampel-)Farben, beispielsweise die Anzahl der Kommentare zu einer Frage. Mit -meter wird auch ein Messgerät bezeichnet, bekannt sind vor allem Volt- oder Amperemeter.

Beispiel ansehen …
<meter id="m1" value="10" min="0" max="100"></meter> <meter id="m2" value="10" min="0" low="25" high="75" max="100"></meter> <meter id="m3" value="10" min="0" low="25" optimum="50" high="75" max="100"></meter> <meter id="m4" value="10" min="0" low="25" optimum="75" high="50" max="100"></meter> <meter id="m5" value="10" min="0" low="50" optimum="25" high="75" max="100"></meter>
In einer Tabelle werden verschiedene Möglichkeiten zur Visualisierung von Werten dargestellt. Mithilfe eines JavaScriptes werden die entsprechenden Werte verändert.

Sie erhalten einen Anzeigebereich, der in bis zu 3 Intervalle geteilt werden kann.

  1. min - low
  2. low - high
  3. high - max

Zusätzlich kann ein optimaler Wert (optimum) bestimmt werden. Befindet sich der Wert (value) im Intervall des optimalen Wertes, so wird die Skala grün dargestellt, befindet er sich in einem Nachbarintervall, ist die Skale gelb, anderenfalls erfolgt die Darstellung in roter Farbe.

Beachten Sie: Aus Gründen der Barrierefreiheit sollten Sie den aktuellen Wert auch in den Inhalt des meter-Elementes schreiben.
Beispiel
<meter value=".65">Stand der Abarbeitung: 65%</meter>

Das meter-Element erwartet folgende Attribute:

  • value, aktueller Wert
  • min, untere Grenze der Skala
  • max, obere Grenze der Skala
  • low, obere Grenze des "Niedrig"-Bereichs der Skala
  • high, untere Grenze des "Hoch"-Bereichs der Skala
  • optimum, optimaler Wert der Skala

Dabei gelten folgende Regeln:

  • ein fehlendes min-Attribut wird mit dem Wert 0 initialisiert
  • ein fehlendes max-Attribut wird mit dem Wert 1 initialisiert
  • ein fehlendes low-Attribut wird mit dem Wert des min-Attributes initialisiert
  • ein fehlendes high-Attribut wird mit dem Wert des max-Attributes initialisiert
  • der Wert des value-attributs sollte zwischen denen des min- und max-Attributes sein
  • der Wert des optimum-attributs sollte zwischen denen des min- und max-Attributes sein
  • liegen die Werte für value und optimum außerhalb des Anzeigebereiches, so werden sie als min bzw. max behandelt.

Siehe auch[Bearbeiten]

Referenz[Bearbeiten]