HTML/Formulare/meter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera
  • HTML5
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>

Attribute[Bearbeiten]

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: meter