<meter>: Das HTML-Meter-Element

Das <meter> HTML-Element repräsentiert entweder einen Skalarwert innerhalb eines bekannten Bereichs oder einen Bruchwert.

Probieren Sie es aus

Attribute

Dieses Element enthält die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss, wenn sie angegeben sind, zwischen dem minimalen und maximalen Wert (min-Attribut und max-Attribut) liegen. Wenn nicht angegeben oder fehlerhaft, ist der Wert 0. Wenn angegeben, aber nicht innerhalb des durch das min-Attribut und das max-Attribut definierten Bereichs, entspricht der Wert dem nächstgelegenen Ende des Bereichs.

Hinweis: Sofern das value-Attribut nicht zwischen 0 und 1 (einschließlich) liegt, sollten die min- und max-Attribute den Bereich definieren, sodass der Wert des value-Attributs innerhalb dieses liegt.

min

Die untere numerische Grenze des gemessenen Bereichs. Diese muss, sofern angegeben, kleiner als der maximale Wert (max-Attribut) sein. Wenn nicht angegeben, ist der minimale Wert 0.

max

Die obere numerische Grenze des gemessenen Bereichs. Diese muss, sofern angegeben, größer als der minimale Wert (min-Attribut) sein. Wenn nicht angegeben, ist der maximale Wert 1.

low

Die obere numerische Grenze des niedrigen Endes des gemessenen Bereichs. Diese muss größer als der minimale Wert (min-Attribut) sein und ebenfalls kleiner als der hohe Wert und der maximale Wert (high-Attribut und max-Attribut) sein, sofern angegeben. Wenn nicht angegeben oder kleiner als der minimale Wert, entspricht der low-Wert dem minimalen Wert.

high

Die untere numerische Grenze des hohen Endes des gemessenen Bereichs. Diese muss kleiner als der maximale Wert (max-Attribut) sein und ebenfalls größer als der low-Wert und der minimale Wert (low-Attribut und min-Attribut), sofern angegeben. Wenn nicht angegeben oder größer als der maximale Wert, entspricht der high-Wert dem maximalen Wert.

optimum

Dieses Attribut gibt den optimalen numerischen Wert an. Es muss innerhalb des Bereichs (wie durch das min-Attribut und das max-Attribut definiert) liegen. Wenn es zusammen mit den Attributen low und high verwendet wird, gibt es an, welcher Bereich als vorzuziehen angesehen wird. Zum Beispiel, wenn es zwischen dem min-Attribut und dem low-Attribut liegt, wird der niedrigere Bereich als bevorzugt betrachtet. Der Browser kann die Meterleiste unterschiedlich einfärben, je nachdem, ob der Wert kleiner oder gleich dem optimalen Wert ist.

form

Dieses optionale Attribut wird verwendet, um explizit einen <form>-Eigentümer für das <meter>-Element festzulegen. Wenn weggelassen, wird das <meter> mit seinem Vorfahren <form>-Element oder der Formularzuordnung verbunden, die durch das form-Attribut auf einem anderen Vorfahren-Element, wie zum Beispiel einem <fieldset>, festgelegt wurde, sofern vorhanden. Wenn vorhanden, muss der Wert die id eines <form> im gleichen Baum sein.

Beispiele

Einfaches Beispiel

HTML

html
<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

Ergebnis

Beispiel mit hohen und niedrigen Bereich

Beachten Sie, dass in diesem Beispiel das min-Attribut weggelassen wird. Dies ist erlaubt, da es standardmäßig auf 0 gesetzt wird.

HTML

html
<p>
  Student's exam score:
  <meter min="0" low="50" high="80" max="100" value="84">84%</meter>
</p>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasinhalte, beschriftbares und fühlbares Inhaltselement.
Zulässiger Inhalt Phrasinhalte, aber es darf kein <meter>-Element unter seinen Nachkommen geben.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Zulässige Eltern Jedes Element, das Phrasinhalte akzeptiert.
Implizite ARIA-Rolle meter
Zulässige ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLMeterElement`](/de/docs/Web/API/HTMLMeterElement)

Spezifikationen

Specification
HTML Standard
# the-meter-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch