`<meter>` HTML-Meter-Element

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Mrz 2017 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Das <meter> HTML-Element reprsentiert 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 schliet die globalen Attribute ein.

value: Der aktuelle numerische Wert. Dieser muss zwischen den minimalen und maximalen Werten liegen (min-Attribut und max-Attribut), falls diese angegeben sind. Falls nicht angegeben oder fehlerhaft, ist der Wert 0. Falls angegeben, aber nicht innerhalb des durch das min-Attribut und das max-Attribut definierten Bereichs, ist der Wert gleich dem nchsten Ende des Bereichs.

Hinweis: Es sei denn, der value-Attributwert liegt zwischen 0 und 1 (einschlielich), sollten die min und max Attribute den Bereich so definieren, dass der Wert des value-Attributs darin liegt.
min: Die untere numerische Grenze des gemessenen Bereichs. Diese muss kleiner sein als der maximale Wert (max-Attribut), falls angegeben. Falls nicht angegeben, ist der Mindestwert 0.
max: Die obere numerische Grenze des gemessenen Bereichs. Diese muss grer sein als der Mindestwert (min-Attribut), falls angegeben. Falls nicht angegeben, ist der Maximalwert 1.
low: Die obere numerische Grenze des unteren Endes des gemessenen Bereichs. Diese muss grer sein als der Mindestwert (min-Attribut) und auch kleiner als der hohe Wert und der Maximalwert (high-Attribut und max-Attribut), falls diese angegeben sind. Falls nicht angegeben oder geringer als der Mindestwert, ist der low-Wert gleich dem Mindestwert.
high: Die untere numerische Grenze des oberen Endes des gemessenen Bereichs. Diese muss kleiner sein als der Maximalwert (max-Attribut) und auch grer als der niedrige Wert und der Mindestwert (low-Attribut und min-Attribut), falls diese angegeben sind. Falls nicht angegeben oder grer als der Maximalwert, ist der high-Wert gleich dem Maximalwert.
optimum: Dieses Attribut gibt den optimalen numerischen Wert an. Er muss innerhalb des Bereichs liegen (wie durch das min-Attribut und das max-Attribut definiert). Wird es in Kombination mit den Attributen low und high verwendet, gibt es an, welcher Teil des Bereichs als vorzuziehen angesehen wird. Zum Beispiel, wenn es sich zwischen dem min-Attribut und dem low-Attribut befindet, wird der untere Bereich als vorzuziehen angesehen. Der Browser knnte die Leiste des Meters unterschiedlich frben, je nachdem, ob der Wert kleiner oder gleich dem optimalen Wert ist.

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 zulssig, da es standardmig 0 ist.

HTML

html

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

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Flieinhalt, Phrasierungsinhalt, beschriftbarer Inhalt, fhlbarer Inhalt.
Erlaubter Inhalt	Phrasierungsinhalt, 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 Phrasierungsinhalt akzeptiert.
Implizierte ARIA-Rolle	`meter`
Erlaubte ARIA-Rollen	Keine `role` erlaubt
DOM-Schnittstelle	[`HTMLMeterElement`](/de/docs/Web/API/HTMLMeterElement)