<meter>: Das HTML Meter-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

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

Probieren Sie es aus

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Attribute

Dieses Element enthält die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen den minimalen und maximalen Werten (min Attribut und max Attribut) liegen, wenn diese angegeben sind. Wenn nicht spezifiziert oder fehlerhaft, ist der Wert 0. Wenn spezifiziert, aber nicht innerhalb des vom min Attribut und max Attribut angegebenen Bereichs, entspricht der Wert dem nächstgelegenen Ende des Bereichs.

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

min

Die untere numerische Grenze des gemessenen Bereichs. Diese muss kleiner als der maximale Wert (max Attribut) sein, wenn angegeben. Wenn nicht spezifiziert, beträgt der Mindestwert 0.

max

Die obere numerische Grenze des gemessenen Bereichs. Diese muss größer als der Mindestwert (min Attribut) sein, wenn angegeben. Wenn nicht spezifiziert, beträgt der Höchstwert 1.

low

Die obere numerische Grenze des niedrigen Endes des gemessenen Bereichs. Diese muss größer als der Mindestwert (min Attribut) sein und sie muss auch kleiner als der hohe Wert und der maximale Wert (high Attribut und max Attribut) sein, wenn welche angegeben sind. Wenn nicht spezifiziert oder wenn kleiner als der Mindestwert, ist der low Wert gleich dem Mindestwert.

high

Die untere numerische Grenze des hohen Endes des gemessenen Bereichs. Diese muss kleiner als der maximale Wert (max Attribut) sein und sie muss auch größer als der niedrige Wert und der Mindestwert (low Attribut und min Attribut) sein, wenn welche angegeben sind. Wenn nicht spezifiziert oder wenn größer als der Höchstwert, ist der high Wert gleich dem Höchstwert.

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. Bei Verwendung mit dem low Attribut und dem high Attribut gibt es einen Hinweis darauf, welcher Bereich als bevorzugt betrachtet wird. Zum Beispiel, wenn es zwischen dem min Attribut und dem low Attribut liegt, wird der untere Bereich als bevorzugt betrachtet. Der Browser kann die Farbe der Anzeigeleiste des Meters je nach Wert und optimalem Wert unterschiedlich färben.

form

Dieses optionale Attribut wird verwendet, um explizit einen <form>-Besitzer für das <meter>-Element festzulegen. Wenn es weggelassen wird, ist das <meter> seinem Vorfahren <form>-Element zugeordnet oder der Formularassoziation, die durch das form-Attribut an einem anderen Vorfahren-Element festgelegt wurde, wie z. B. bei einem <fieldset>, sofern vorhanden. Wenn es enthalten ist, 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 hohem und niedrigem Bereich

Beachten Sie, dass in diesem Beispiel das min Attribut weggelassen wird. Dies ist zulässig, 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, Satzinhalt, beschriftbares Inhalt, greifbarer Inhalt.
Zulässiger Inhalt Satzinhalt, 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 Satzinhalt akzeptiert.
Implizite ARIA-Rolle meter
Zulässige ARIA-Rollen Keine Rolle erlaubt
DOM-Schnittstelle [`HTMLMeterElement`](/de/docs/Web/API/HTMLMeterElement)

Spezifikationen

Specification
HTML
# the-meter-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch