<meter>: Елемент лічильника HTML

{{HTMLSidebar}}

Елемент HTML <meter> (вимірювач, лічильник) представляє або скалярне значення в межах відомого діапазону, або дробове значення.

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

value

Поточне числове значення. Воно повинно перебувати в діапазоні між мінімальним і максимальним значеннями (атрибутом min і атрибутом max), якщо вони задані. Якщо цей атрибут не заданий, або заданий некоректно, то значенням вважається 0. Якщо цей атрибут заданий, але його значення лежить поза діапазоном, заданим атрибутом min і атрибутом max, то значення вважається рівним найближчому кінцю діапазону.

Примітка: Якщо атрибут value не лежить в діапазоні від 0 до 1 (включно), то атрибути min і max повинні визначати такий діапазон, щоб значення атрибута value перебувало в ньому.

min

Нижня числова межа вимірюваного діапазону. Повинна бути меншою за максимальне значення (атрибут max), якщо задана. Якщо не задана, то мінімальним значенням вважається 0.

max

Верхня числова межа вимірюваного діапазону. Повинна бути більшою за мінімальне значення (атрибут min), якщо задана. Якщо не задана, то максимальним значенням вважається 1.

low

Верхня числова межа нижнього кінця вимірюваного діапазону. Вона повинна бути більшою за мінімальне значення (атрибут min), а також меншою за значення high і максимальне значення (атрибути high і max відповідно), якщо вони задані. Якщо не задана, або якщо вона менша за мінімальне значення, то значенням low вважається мінімальне значення.

high

Нижня числова межа верхнього кінця вимірюваного діапазону. Вона повинна бути меншою за максимальне значення (атрибут max), а також більшою за значення low і мінімальне значення (атрибути low і min відповідно), якщо вони задані. Якщо не задана, або якщо вона більша за максимальне значення, то значенням high вважається максимальне значення.

optimum

Цей атрибут вказує оптимальне числове значення. Він повинен перебувати в межах діапазону (як визначено атрибутом min і атрибутом max). Коли використовується разом з атрибутом low і атрибутом high, то вказує, яка частина діапазону вважається бажаною. Наприклад, якщо він знаходиться між атрибутом min і атрибутом low, то нижній діапазон вважається бажаним. Браузер може розфарбовувати смугу лічильника по різному в залежності від того, чи є задане значення меншим, чи є рівним оптимальному.

form

Цей необов'язковий атрибут вживається для явного задання форми-власника елемента <meter>. Коли він пропущений, то <meter> пов'язаний з елементом-предком <form>, або ж зв'язок з формою заданий атрибутом form на іншому елементі-предку, наприклад, на <fieldset>, якщо такий є. Якщо цей атрибут присутній, то його значення повинно бути id елемента <form> у тому ж самому дереві елементів.

Приклади

Простий приклад

HTML

<p>
  Розігрійте піч до <meter min="200" max="500" value="350">350 градусів</meter>.
</p>

Результат

У Google Chrome результівний лічильник має такий вигляд:

Знімок екрана з елементом лічильника в Google Chrome

Приклад з високим і низьким діапазонами

Зверніть увагу на те, що в цьому прикладі пропущений атрибут min. Це дозволено, адже його усталене значення – 0.

HTML

<p>
  Він отримав <meter low="69" high="80" max="100" value="84">B</meter> за іспит.
</p>

Результат

У Google Chrome результівний лічильник має такий вигляд:

червоний лічильник у Google Chrome

Технічний підсумок

Категорії вмісту Потоковий вміст, оповідальний вміст, підписний вміст, відчутний вміст.
Дозволений вміст Оповідальний вміст, але серед його нащадків не повинно бути елементів <meter>.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Всі елементи, що приймають оповідальний вміст.
Неявна роль ARIA Немає відповідної ролі
Дозволені ролі ARIA Жодної дозволеної ролі
Інтерфейс DOM HTMLMeterElement

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
meter
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
form
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
high
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
low
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
max
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
min
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
optimum
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0
value
Chrome Full support 6
Edge Full support 18
Firefox Full support 16
Internet Explorer No support No
Opera Full support 11
Safari Full support 6
WebView Android No support No
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 11
Safari on iOS Full support 10.3
Samsung Internet Full support 1.0

Дивіться також