<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 March 2017.

Das <meter> HTML-Element repräsentiert entweder einen skalaren Wert 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 beinhaltet die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen den Minimal- und Maximalwerten (min-Attribut und max-Attribut) liegen, wenn sie angegeben sind. Wenn nicht angegeben oder fehlerhaft, beträgt der Wert 0. Wenn angegeben, aber nicht innerhalb des durch die Attribute min und max definierten Bereichs, entspricht der Wert dem nächsten Ende des Bereichs.

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

min

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

max

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

low

Die obere numerische Grenze des unteren Endes des gemessenen Bereichs. Diese muss größer als der Minimalwert (min-Attribut) sein und außerdem kleiner als der hohe Wert und der Maximalwert (high-Attribut bzw. max-Attribut), wenn welche angegeben sind. Wenn nicht angegeben oder wenn kleiner als der Minimalwert, entspricht der low-Wert dem Minimalwert.

high

Die untere numerische Grenze des hohen Endes des gemessenen Bereichs. Diese muss kleiner als der Maximalwert (max-Attribut) sein und außerdem größer als der niedrige Wert und der Minimalwert (low-Attribut bzw. min-Attribut), wenn welche angegeben sind. Wenn nicht angegeben oder wenn größer als der Maximalwert, entspricht der high-Wert dem Maximalwert.

optimum

Dieses Attribut gibt den optimalen numerischen Wert an. Es muss innerhalb des Bereichs (wie durch die Attribute min und max definiert) liegen. Wenn es mit den Attributen low und high verwendet wird, gibt es einen Hinweis darauf, wo im Bereich eine Präferenz besteht. Zum Beispiel, wenn es zwischen den Attributen min und low liegt, wird der untere Bereich als bevorzugt angesehen. Der Browser kann den Balken des Meters anders färben, abhängig davon, 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 es weggelassen wird, wird das <meter>-Element mit seinem übergeordneten <form>-Element assoziiert oder mit der Formularzuordnung, die durch das form-Attribut auf einem anderen übergeordneten Element, wie z.B. einem <fieldset>, festgelegt wird, falls vorhanden. Wenn es angegeben wird, muss der Wert die id eines <form> im selben Baum sein.

Beispiele

Grundlegendes 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 Attribute min weggelassen wird. Dies ist zulässig, da es standardmäßig 0 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 Fließende Inhalte, formulierende Inhalte, etikettierbare Inhalte, fühlbare Inhalte.
Erlaubte Inhalte Formulierende Inhalte, aber es darf kein <meter>-Element unter seinen Nachkommen geben.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das formulierende Inhalte akzeptiert.
Implizite 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