Das meter-Tag

Das Tag meter wird verwendet, um einen Wert auf ansprechend gestaltete Weise anzuzeigen.

Die Darstellung des Tags ist ein teilweise oder vollständig ausgefüllter Balken. Der Balken kann grün, gelb oder rot sein (die Farbe des Balkens hängt von den Attributwerten ab, dazu später mehr):

Das Tag meter sollte man beispielsweise in der folgenden Situation verwenden: Man möchte den aktuellen Temperaturwert anzeigen, wobei sich die Temperatur von 0 bis 100 ändern kann. Man sollte folgende Attribute angeben: Das Attribut value sollte den aktuellen Temperaturwert angeben, das Attribut min - den minimal möglichen Wert (in unserem Fall 0), das Attribut max - den maximal möglichen Wert (in unserem Fall 100).

Abhängig vom Wert des Attributs value wird der Balken klein oder groß sein. Wenn man value auf den Wert 10 setzt, wird der Balken klein sein (da 10 sehr nah am Minimum - also Null - liegt). Wenn man jedoch den Wert 90 angibt, wird der Balken groß sein (da 90 nahe am Maximum - also 100 - liegt). Wenn man den Wert 100 angibt - dann wird der Balken das gesamte Element ausfüllen (da der Wert das Maximum erreicht hat).

Wenn man einen Wert angibt, der größer als 100 ist, wird der Balken trotzdem das gesamte Element ausfüllen. Wenn man 0 oder weniger angibt - dann wird es überhaupt keinen Balken geben.

Beispiel

Der Wert des Attributs value ist klein:

<meter value="10" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value ist groß:

<meter value="90" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value ist mittel:

<meter value="50" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value entspricht dem maximalen Wert:

<meter value="100" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value entspricht dem minimalen Wert:

<meter value="0" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value ist größer als der maximale Wert:

<meter value="110" min="0" max="100"></meter>

Beispiel

Der Wert des Attributs value ist kleiner als der minimale Wert:

<meter value="-10" min="0" max="100"></meter>

Hinzufügen der Attribute low und high

Im Tag meter gibt es noch 2 weitere Attribute: low und high.

Betrachten wir ihre Funktion am Beispiel der Temperatur. Zur Erinnerung: Unsere Minimaltemperatur beträgt 0, die Maximale - 100. Nehmen wir nun an, wir möchten folgende Bereiche festlegen - "kalte Temperatur" von 0 bis 20, "normale" von 20 bis 80 und "heiße" von 80 bis 100.

Um die kalte Temperatur zu definieren, setzen wir den Wert des Attributs low auf die Zahl 20. Somit ergibt sich, dass von Null (dies ist der Wert des Attributs min) bis 20 (Wert des Attributs low) unser Bereich niedriger Werte liegt.

Um die heiße Temperatur zu definieren, setzen wir den Wert des Attributs high auf die Zahl 80. Somit ergibt sich, dass von 80 (dies ist der Wert des Attributs high) bis 100 (Wert des Attributs max) unser Bereich hoher Werte liegt.

Die normale Temperatur liegt von 20 (dies ist der Wert des Attributs low) bis 80 (Wert des Attributs high). Diesen Bereich nennen wir Bereich normaler Werte.

Nun wird, abhängig davon, in welchen Bereich der Wert des Attributs value fällt, der Balken grün oder gelb eingefärbt. Grün wird angezeigt, wenn der Wert in den Bereich normaler Werte fällt, und gelb - wenn er in den Bereich hoher oder niedriger Werte fällt.

Beispiel

Der Wert des Attributs value fällt in den Bereich niedriger Werte:

<meter value="10" min="0" low="20" high="80" max="100"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich normaler Werte:

<meter value="50" min="0" low="20" high="80" max="100"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich hoher Werte:

<meter value="90" min="0" low="20" high="80" max="100"></meter>

Hinzufügen des Attributs optimum

Das Attribut optimum definiert den optimalen Wert. Für unser Beispiel könnte die optimale Temperatur die kalte, die normale oder die heiße sein - je nach Wahl. Nehmen wir an, dass man angibt, dass die optimale Temperatur die kalte ist. Nun wird, abhängig vom Wert des Attributs value (also von der aktuellen Temperatur) die Farbe des Balkens grün, gelb oder rot sein.

Wenn die aktuelle Temperatur in den Bereich der optimalen Temperaturen fällt (und wir haben angegeben, dass die optimale die kalte ist), dann wird die Farbe des Balkens grün sein. Wenn die aktuelle Temperatur in den benachbarten Bereich zum optimalen Bereich fällt (in unserem Fall ist das die normale Temperatur), dann wird der Balken gelb. Wenn die aktuelle Temperatur jedoch nicht in den benachbarten Bereich zum optimalen Bereich fällt (in unserem Fall ist das die heiße Temperatur), dann wird der Balken rot.

Analog verhält es sich, wenn man die heiße Temperatur als optimal angibt. In diesem Fall wird der Balken grün, wenn die aktuelle Temperatur in den Bereich der heißen Temperaturen fällt, gelb, wenn sie in den Bereich der normalen fällt, und rot, wenn sie in den Bereich der kalten fällt.

Wenn man die normale Temperatur als optimal angibt, kann der Balken nur grün sein (wenn die aktuelle Temperatur in den normalen Bereich fällt) oder gelb (wenn die aktuelle Temperatur in einen benachbarten Bereich der normalen Temperatur fällt, also heiße oder kalte).

Um anzugeben, welcher Bereich optimal ist, muss man als Wert des Attributs optimum eine beliebige Zahl aus diesem Bereich angeben.

In den folgenden Beispielen fällt der Wert des Attributs optimum in den Bereich niedriger Werte (also kalter Temperaturen).

Beispiel

Der Wert des Attributs value fällt in den Bereich niedriger Werte:

<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich normaler Werte:

<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich hoher Werte:

<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

In den folgenden Beispielen fällt der Wert des Attributs optimum in den Bereich hoher Werte (also heißer Temperaturen).

Beispiel

Der Wert des Attributs value fällt in den Bereich niedriger Werte:

<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich normaler Werte:

<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich hoher Werte:

<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

In den folgenden Beispielen fällt der Wert des Attributs optimum in den Bereich normaler Werte (also normaler Temperaturen).

Beispiel

Der Wert des Attributs value fällt in den Bereich niedriger Werte:

<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich normaler Werte:

<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

Beispiel

Der Wert des Attributs value fällt in den Bereich hoher Werte:

<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

Alte Browser

Alte Browser können das Tag meter nicht ansprechend darstellen und werden stattdessen den Inhalt des Tags selbst anzeigen:

<meter value="10" min="0" max="100">Dieser Text wird in alten Browsern angezeigt.</meter>

Attribute

Der Wert der Attribute kann eine gebrochene oder negative Zahl sein.

Attribut	Beschreibung
`value`	Setzt den aktuellen Wert. Erforderliches Attribut.
`min`	Legt den minimal möglichen Wert fest. Standardwert: `0`.
`max`	Legt den maximal möglichen Wert fest. Standardwert: `1`.
`low`	Legt die Grenze des Bereichs niedriger Werte fest. Niedrige Werte reichen von der Zahl im Attribut `min` bis zur Zahl im Attribut `low`.
`high`	Legt die Grenze des Bereichs hoher Werte fest. Hohe Werte reichen von der Zahl im Attribut `high` bis zur Zahl im Attribut `max`.
`optimum`	Definiert den Bereich optimaler Werte.

Siehe auch

das Tag progress,
das einen Ladebalken erstellt.