Úvod >Www >HTML manuál – prvky a atributy >meter – měřidlo

meter – měřidlo

<meter value="0.6" min="0" max="1">60 %</meter>

Měřidlo: hodnota v známém rozsahu – zaplnění skladu, obsazenost kurzu, hodnocení, síla hesla. Podle atributů low, high a optimum ho prohlížeč obarví zeleně, žlutě nebo červeně.

  • Výchozí zobrazení: display: inline-block
  • Koncová značka: povinná
  • Obsah: řádkový obsah bez dalšího meter
  • Kde smí stát: kdekoli, kde smí být řádkový obsah
  • Rozhraní v DOM: HTMLMeterElement

Atributy

  • value – hodnota; min, max – rozsah (výchozí 0 a 1).
  • low, high – hranice nízkých a vysokých hodnot.
  • optimum – ideální hodnota; podle ní prohlížeč pozná, jestli jsou dobré nízké, nebo vysoké hodnoty.

Příklady

Obsazenost kurzu pečení – vysoké hodnoty jsou špatné (málo volných míst):

<label for="obsazenost">Obsazenost kurzu</label>
<meter id="obsazenost" value="11" min="0" max="12" low="6" high="10" optimum="2">11 z 12 míst</meter>

Měřidlo vykresluje systém, proto je ukázka bez náhledu.

Přístupnost

meter má roli meter. Barvu nevnímá každý – hodnotu napište i textem vedle měřidla.

Na co si dát pozor

  • Průběh úkolu (nahrávání) je progress, ne meter.
  • meter bez min a max počítá s rozsahem 0–1: value="60" ukáže plné měřidlo.

Podpora

Baseline – široce dostupné: ve všech hlavních prohlížečích od března 2017, za široce dostupné se považuje od září 2019. Od verze: Chrome 6, Firefox 16, Safari 6. Stav k říjnu 2026 (MDN browser-compat-data).

Příbuzné:
progress – průběh úkolu
output – výsledek výpočtu
label – popisek pole