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 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 umfasst dieglobalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen den minimalen und maximalen Werten (min-Attribut undmax-Attribut) liegen, wenn sie angegeben sind. Wenn nicht angegeben oder fehlerhaft, ist der Wert0. Wenn angegeben, aber nicht innerhalb des durch diemin- undmax-Attribute definierten Bereichs, entspricht der Wert dem nächstgelegenen Ende des Bereichs.

Hinweis:Sofern dasvalue-Attribut nicht zwischen0 und1 (einschließlich) liegt, sollten diemin- undmax-Attribute den Bereich so definieren, dass der Wert desvalue-Attributs darin liegt.

min

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

max

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

low

Die obere numerische Grenze des unteren Endes des gemessenen Bereichs. Diese muss größer sein als der Mindestwert (min-Attribut), und ebenfalls kleiner als der hohe Wert und Maximalwert (high-Attribut undmax-Attribut), falls angegeben. Wenn nicht angegeben oder kleiner als der Mindestwert, entspricht derlow-Wert dem Mindestwert.

high

Die untere numerische Grenze des oberen Endes des gemessenen Bereichs. Diese muss kleiner sein als der Maximalwert (max-Attribut), und ebenfalls größer als der niedrige Wert und Mindestwert (low-Attribut undmin-Attribut), falls angegeben. Wenn nicht angegeben oder größer als der Maximalwert, entspricht derhigh-Wert dem Maximalwert.

optimum

Dieses Attribut zeigt den optimalen numerischen Wert an. Es muss innerhalb des Bereichs liegen (wie durch dasmin-Attribut und dasmax-Attribut definiert). Wird es zusammen mit denlow- undhigh-Attributen verwendet, gibt es an, welcher Teil des Bereichs als bevorzugt gilt. Zum Beispiel, wenn es zwischen demmin-Attribut und demlow-Attribut liegt, wird der untere Bereich als bevorzugt angesehen. Der Browser kann die Leiste des Meter-Elements unterschiedlich einfä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

Hoher und niedriger Bereich Beispiel

Beachten Sie, dass in diesem Beispiel dasmin-Attribut weggelassen wird. Das ist erlaubt, da es standardmäßig0 sein wird.

HTML

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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