HTML/Elemente/meter
Das meter-Element visualisiert einen skalaren Wert einer Größe in Abhängigkeit einer Skala in bis zu drei (Ampel-)Farben, beispielsweise die Anzahl der Kommentare zu einer Frage oder wie viel Speicherplatz belegt ist. Mit -meter wird auch ein Messgerät bezeichnet, bekannt sind vor allem Volt- oder Amperemeter.
Für eine Fortschrittsanzeige bei Formularen ist das progress-Element besser geeignet.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- WAI‑ARIA‑Rolle
-
- keine
- Elternelemente
- Darf vorkommen in:
- Elementen mit flow content
- erlaubte Inhalte
-
- Text
- beliebig viele Elemente mit phrasing content
- aber nicht meter
<meter value=".65">Stand der Abarbeitung: 65%</meter>
| Name | Inhalt | Standardwert | Bedeutung |
|---|---|---|---|
| Universalattribute | |||
| id | ID | identifiziert ein einziges Element innerhalb eines Dokuments | |
| class | CDATA | ordnet ein Element einer oder mehreren Klassen zu. | |
| accesskey | ID | Tastaturkürzel | |
| contenteditable | CDATA | editierbarer Inhalt | |
| contextmenu | definiert Kontextmenü | ||
| dir | ltr, rtl | definiert die Schreibrichtung innerhalb des Dokuments | |
| draggable | ID | kann mit Drag & Drop gezogen werden | |
| dropzone | CDATA | Aktion bei Ablegen | |
| hidden | versteckter Inhalt | ||
| lang | NAME | legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766] | |
| spellcheck | ID | Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
| |
| style | CDATA | notiert direkt in einem Element- style sheet data | |
| tabindex | NAME | zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird. | |
| title | CDATA | betitelt oder beschreibt ein Element. | |
| form | CDATA | bestimmt das Form-Element, welches diesem Element, als Besitzer, zugeordnet ist. Dieses Attribut wird nur verwendet, wenn dieses Element mit einem Form-Element verwendet wird. | |
| high | NUMBER | max | bestimmt die untere numerische Begrenzung des oberen zu messenden Bereichs. Dieser muss kleiner als der Wert des max Attributes und größer als der Wert des min Attributes sein, wenn einer dieser Werte angegeben wurde. Fehlt high, ist dieses Attribut gleich dem max Attribut.
|
| low | NUMBER | min | bestimmt die obere numerische Begrenzung des unteren zu messenden Bereichs. Dieser muss größer als der Wert des min Attributes und kleiner als der Wert des max Attributes sein, wenn einer dieser Werte angegeben wurde. Fehlt low, ist dieses Attribut gleich dem min Attribut.
|
| max | NUMBER | 1 | Die obere numerische Grenze des zu messenden Bereichs. Dieser Wert muss größer sein als der angegebene Wert im min Attribut. |
| min | NUMBER | 0 | Die untere numerische Grenze des zu messenden Bereichs. Dieser Wert muss kleiner sein als der angegebene Wert im max Attribut. |
| optimum | NUMBER | bestimmt den optimalen numerischen Wert. Dieser muss innerhalb des Bereichs liegen, der durch die min und max Attribute definiert wurde. Wenn dieses mit den low und high Attributen verwendet wird, gibt dies einen Hinweis darauf welcher Bereich vorzuziehen ist. | |
| value | NUMBER | 0 | bestimmt den aktuellen numerischen Wert. Dieser Wert muss zwischen den min und max Attribut Werten liegen, wenn diese Angaben gemacht wurden. Wenn keine Angaben gemacht werden, oder diese fehlerhaft sind ist der Wert 0. Wurden Angaben gemacht und diese sind nicht in dem Bereich die für die min und max Attribute zugewiesen wurden, ist der Wert gleich zu dem Ende des Bereiches der am nächsten liegt. |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Siehe auch
- Formulare
- Ergebnisausgabe mit dem meter-Element
- progress
Weblinks
- Spezifikation (WHATWG): The meter Element
Demonstrationsbeispiel
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.
-
min-low -
low-high -
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.
