<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 (min-Attribut und max-Attribut) liegen, wenn sie angegeben sind. Wenn nicht angegeben oder fehlerhaft, ist der Wert 0. Wenn angegeben, aber nicht innerhalb des durch die min- und max-Attribute definierten Bereichs, 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 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), wenn angegeben. Wenn nicht angegeben, ist der Mindestwert 0.

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

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

optimum

Dieses Attribut zeigt den optimalen numerischen Wert an. Es muss innerhalb des Bereichs liegen (wie durch das min-Attribut und das max-Attribut definiert). Wird es zusammen mit den low- und high-Attributen verwendet, gibt es an, welcher Teil des Bereichs als bevorzugt gilt. Zum Beispiel, wenn es zwischen dem min-Attribut und dem low-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 das min-Attribut weggelassen wird. Das ist erlaubt, da es standardmäßig 0 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