<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 Bruchteilwert.

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 beinhaltet 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 angegeben oder fehlerhaft, ist der Wert 0. Wenn angegeben, aber nicht innerhalb des durch das min- und max-Attribut definierten Bereichs, ist der Wert gleich dem nächstgelegenen Ende des Bereichs.

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

min

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

max

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

low

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

high

Die untere numerische Grenze des oberen Endes des gemessenen Bereichs. Diese muss kleiner sein als der maximale Wert (max-Attribut) und auch größer als der niedrige Wert und der minimale Wert (low-Attribut und min-Attribut), falls diese angegeben sind. Wenn nicht angegeben oder größer als der maximale Wert ist, ist der high-Wert gleich dem maximalen Wert.

optimum

Dieses Attribut gibt den optimalen numerischen Wert an. Es muss innerhalb des Bereichs liegen (definiert durch das min- und max-Attribut). Wenn es mit dem low- und high-Attribut verwendet wird, gibt es einen Hinweis darauf, welcher Bereich als vorzuziehen betrachtet wird. Beispielweise, wenn es zwischen dem min-Attribut und dem low-Attribut liegt, dann wird der niedrigere Bereich als bevorzugt angesehen. Der Browser könnte die Farbdarstellung der Anzeigeleiste abhängig davon ändern, 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>-Element seinem Vorfahren <form>-Element oder der Formularzuordnung zugeordnet, die durch das form-Attribut auf einem anderen Vorfahrenelement, wie zum Beispiel auf einem <fieldset>, festgelegt wird, falls vorhanden. Wenn angegeben, muss der Wert der id eines <form> im selben 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 wurde. Dies ist erlaubt, da es standardmäßig 0 ist.

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 Flussinhalte, Phrasinhalte, beschriftungsfähige Inhalte, fühlbare Inhalte.
Erlaubte Inhalte Phrasinhalte, aber es darf sich kein <meter>-Element unter seinen Nachkommen befinden.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasinhalte akzeptiert.
Implizierte ARIA-Rolle meter
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLMeterElement`](/de/docs/Web/API/HTMLMeterElement)

Spezifikationen

Specification
HTML
# the-meter-element

Browser-Kompatibilität

Siehe auch