<meter>

Wskaźnik wartości w znanym zakresie: zajęte miejsce, wynik testu, poziom baterii.

Wyświetlanie: inline-block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść frazowa bez innych elementów <meter>

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<p>
  <label for="score">Wynik testu z CSS</label>
  <meter id="score" min="0" max="100" value="72">72 na 100</meter>
  72/100
</p>
<p>
  <label for="disk">Miejsce na projekty</label>
  <meter id="disk" value="0.8">80%</meter>
  80% zajęte
</p>

Podgląd

Definicja i zastosowanie

Element <meter> pokazuje pomiar w określonym zakresie, trochę jak wskaźnik paliwa w samochodzie. Podajesz wartość (value) oraz granice (min i max), a przeglądarka rysuje pasek wypełniony odpowiednio do wyniku.

Atrybuty low, high i optimum dzielą zakres na strefy i mówią, które wartości są dobre. Przeglądarka koloruje wtedy pasek: zwykle na zielono, gdy wartość jest w strefie optymalnej, na żółto przy wartości przeciętnej i na czerwono, gdy jest źle.

Nie myl go z <progress>. <meter> pokazuje stan (ile miejsca zajmują pliki), a <progress> postęp zadania w czasie (ile pliku już się wysłało). Tak jak pasek postępu, <meter> potrzebuje etykiety.

Składnia

<meter value="0.6">60%</meter>

Atrybuty

value
liczba
Zmierzona wartość. Powinna mieścić się między min a max, a wartości spoza zakresu przeglądarka przytnie do granic.
min / max
liczba (domyślnie 0 i 1)
Granice zakresu. Dzięki nim podajesz wartości w naturalnych jednostkach, na przykład punkty testu od 0 do 40 albo megabajty.
low / high
liczba z zakresu
low wyznacza górną granicę strefy niskich wartości, a high dolną granicę strefy wysokich. Wartość między nimi jest przeciętna. W przykładzie ten sam wskaźnik baterii zmienia kolor zależnie od strefy.
optimum
liczba z zakresu
Wartość idealna. Jeśli leży w strefie wysokiej, dobre są wysokie wyniki (jak naładowanie baterii), a jeśli w niskiej, dobre są niskie (jak liczba błędów w kodzie). Od tego zależy kolor paska.

Atrybut	Wartości	Opis
value	liczba	Zmierzona wartość. Powinna mieścić się między `min` a `max`, a wartości spoza zakresu przeglądarka przytnie do granic.
min / max	liczba (domyślnie 0 i 1)	Granice zakresu. Dzięki nim podajesz wartości w naturalnych jednostkach, na przykład punkty testu od 0 do 40 albo megabajty.
low / high	liczba z zakresu	`low` wyznacza górną granicę strefy niskich wartości, a `high` dolną granicę strefy wysokich. Wartość między nimi jest przeciętna. W przykładzie ten sam wskaźnik baterii zmienia kolor zależnie od strefy.
optimum	liczba z zakresu	Wartość idealna. Jeśli leży w strefie wysokiej, dobre są wysokie wyniki (jak naładowanie baterii), a jeśli w niskiej, dobre są niskie (jak liczba błędów w kodzie). Od tego zależy kolor paska.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

value

liczba

Zmierzona wartość. Powinna mieścić się między min a max, a wartości spoza zakresu przeglądarka przytnie do granic.

HTML

<p><meter value="0.25">25%</meter> 25%</p>
<p><meter value="0.5">50%</meter> 50%</p>
<p><meter value="0.9">90%</meter> 90%</p>

Podgląd

min / max

liczba (domyślnie 0 i 1)

Granice zakresu. Dzięki nim podajesz wartości w naturalnych jednostkach, na przykład punkty testu od 0 do 40 albo megabajty.

HTML

<p>Punkty z quizu: <meter min="0" max="40" value="31">31 z 40</meter> 31 z 40</p>

Podgląd

low / high

liczba z zakresu

low wyznacza górną granicę strefy niskich wartości, a high dolną granicę strefy wysokich. Wartość między nimi jest przeciętna. W przykładzie ten sam wskaźnik baterii zmienia kolor zależnie od strefy.

HTML

<p>Bateria 90% <meter min="0" max="100" low="20" high="80" optimum="100" value="90"></meter></p>
<p>Bateria 50% <meter min="0" max="100" low="20" high="80" optimum="100" value="50"></meter></p>
<p>Bateria 10% <meter min="0" max="100" low="20" high="80" optimum="100" value="10"></meter></p>

Podgląd

optimum

liczba z zakresu

Wartość idealna. Jeśli leży w strefie wysokiej, dobre są wysokie wyniki (jak naładowanie baterii), a jeśli w niskiej, dobre są niskie (jak liczba błędów w kodzie). Od tego zależy kolor paska.

HTML

<p>Błędy w kodzie: 2 <meter min="0" max="20" low="5" high="10" optimum="0" value="2"></meter></p>
<p>Błędy w kodzie: 15 <meter min="0" max="20" low="5" high="10" optimum="0" value="15"></meter></p>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Kolor nie może być jedyną informacją. Pokaż obok wskaźnika także liczbę lub opis, bo nie każdy odróżnia zielony od czerwonego.
Do pasków postępu (wysyłanie, instalacja, ukończenie kursu) używaj <progress>, nie <meter>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs