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 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 liegen (min-Attribut undmax-Attribut), sofern diese angegeben sind. Wenn nicht angegeben oder fehlerhaft, ist der Wert0. Wenn angegeben, aber nicht innerhalb des Bereichs, der durch dasmin-Attribut und dasmax-Attribut definiert wird, 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 definieren, damit der Wert desvalue-Attributs innerhalb dieses Bereichs liegt.

min

Die untere numerische Grenze des gemessenen Bereichs. Diese muss kleiner als der maximale Wert sein (max-Attribut), wenn angegeben. Wenn nicht angegeben, beträgt der minimale Wert0.

max

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

low

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

high

Die untere numerische Grenze des hohen Endes des gemessenen Bereichs. Diese muss kleiner als der maximale Wert sein (max-Attribut) und muss auch größer als derlow-Wert und der minimale Wert (low-Attribut undmin-Attribut, falls angegeben) sein. Wenn nicht angegeben oder größer als der maximale Wert, entspricht derhigh-Wert dem maximalen Wert.

optimum

Dieses Attribut zeigt den optimalen numerischen Wert an. Er muss innerhalb des Bereichs liegen (wie durch dasmin-Attribut undmax-Attribut definiert). In Kombination mit demlow-Attribut undhigh-Attribut gibt es einen Hinweis darauf, welcher Bereich als bevorzugt gilt. Wenn es beispielsweise zwischen demmin-Attribut und demlow-Attribut liegt, wird der untere Bereich als bevorzugt angesehen. Der Browser kann die Farbanzeige desmeter-Balkens je nach Wert im Vergleich zum optimalen Wert unterschiedlich gestalten.

Beispiele

Einfaches Beispiel

HTML

<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

Ergebnis

Hoher und niedriger Bereichsbeispiel

Beachten Sie, dass in diesem Beispiel dasmin-Attribut ausgelassen wird. Dies ist zulässig, da es standardmäßig0 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

• Erstellung vertikaler Formularelemente
• <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