<meter> Tag - Grafische Anzeige von Werten

Zeigt Werte grafisch an:

<meter id="meter1" value="10" min="0" max="100"></meter>
<meter id="meter2" value="10" min="0" low="25" high="75" max="100"></meter>
<meter id="meter3" value="50" min="0" low="25" optimum="50" high="75" max="100"></meter>
<meter id="meter4" value="80" min="0" low="25" optimum="75" high="50" max="100"></meter>
<meter id="meter5" value="100" min="0" low="50" optimum="25" high="75" max="100"></meter>

Online testen

Verwendung

Mit dem meter Tag können Sie Werte grafisch darstellen. Die Darstellung ähnelt der Fortschrittsanzeige, kann aber farbliche Unterscheidungen treffen. Ein typischer Anwendungsfall wäre eine Anzeige wieviel Online-Speicherplatz man bereits verwendet hat. Neben dem aktuellen Wert können Sie mit den Attributen auch die untere Grenze, das Optimum un den Hoch-Wert setzen. Liegt der Wert über dem Hoch-Wert, wird die Anzeige rot, im Optimum ist die Anzeige grün.

Der Tag wird von mittlerweile von allen Browsern unterstützt, allerdings nicht von älteren Versionen des Internet Explorers.

Attribute

Attribut Wert Beschreibung
form Formular-ID ID des Formulars zu welchem das Element gehört.
high Zahl Grenze ab der die Anzeige rot wird.
low Zahl Untere Grenze, ab der die Anzeige gelb wird.
max Zahl Der Maximalwert der Anzeige.
min Zahl Der Minimalwert der Anzeige.
optimum Zahl Der Optimalwert. Die Anzeige ist grün.
value Zahl Benötigtes Attribut, gibt den aktuellen "Zählerstand" an.

Darstellung