<meter>: Das 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 umfasst die globalen Attribute.

value

Der aktuelle numerische Wert. Dieser muss zwischen den minimalen und maximalen Werten liegen (min-Attribut und max-Attribut), sofern diese angegeben sind. Wenn nicht angegeben oder fehlerhaft, ist der Wert 0. Wenn angegeben, aber nicht innerhalb des Bereichs, der durch das min-Attribut und das max-Attribut definiert wird, entspricht der Wert dem nächstgelegenen Ende des Bereichs.

Hinweis: Sofern das value-Attribut nicht zwischen 0 und 1 (einschließlich) liegt, sollten die min- und max-Attribute den Bereich definieren, damit der Wert des value-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 Wert 0.

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 Wert 1.

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 und max-Attribut, falls angegeben) sein. Wenn nicht angegeben oder kleiner als der minimale Wert, entspricht der low-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 der low-Wert und der minimale Wert (low-Attribut und min-Attribut, falls angegeben) sein. Wenn nicht angegeben oder größer als der maximale Wert, entspricht der high-Wert dem maximalen Wert.

optimum

Dieses Attribut zeigt den optimalen numerischen Wert an. Er muss innerhalb des Bereichs liegen (wie durch das min-Attribut und max-Attribut definiert). In Kombination mit dem low-Attribut und high-Attribut gibt es einen Hinweis darauf, welcher Bereich als bevorzugt gilt. Wenn es beispielsweise zwischen dem min-Attribut und dem low-Attribut liegt, wird der untere Bereich als bevorzugt angesehen. Der Browser kann die Farbanzeige des meter-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 das min-Attribut ausgelassen 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

• 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