<meter> HTML-Meter-Element

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 schließt 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 nächsten Ende des Bereichs.

Hinweis: Es sei denn, der value-Attributwert liegt zwischen 0 und 1 (einschließlich), 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 größer 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 größer 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 größer als der niedrige Wert und der Mindestwert (low-Attribut und min-Attribut), falls diese angegeben sind. Falls nicht angegeben oder größer 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 könnte die Leiste des Meters unterschiedlich färben, je nachdem, ob der Wert kleiner oder gleich dem optimalen Wert ist.

Beispiele

Einfaches Beispiel

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 0 ist.

HTML

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Erstellen von vertikalen Formularsteuerelementen
• <progress>
• ::-webkit-meter-bar, ::-webkit-meter-inner-element, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value: nicht standardisierte Pseudo-Elemente