<meter>: Елемент лічильника HTML
Елемент 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 результівний лічильник має такий вигляд:
Приклад з високим і низьким діапазонами
Зверніть увагу на те, що в цьому прикладі пропущений атрибут min
. Це дозволено, адже його усталене значення – 0
.
HTML
<p>
Він отримав <meter low="69" high="80" max="100" value="84">B</meter> за іспит.
</p>
Результат
У Google Chrome результівний лічильник має такий вигляд:
Технічний підсумок
Категорії вмісту | Потоковий вміст, оповідальний вміст, підписний вміст, відчутний вміст. |
---|---|
Дозволений вміст |
Оповідальний вміст, але серед його нащадків не повинно бути елементів <meter> .
|
Пропуск тега | Немає; і початковий, і кінцевий теги – обов'язкові. |
Дозволені батьківські елементи | Всі елементи, що приймають оповідальний вміст. |
Неявна роль ARIA | Немає відповідної ролі |
Дозволені ролі ARIA | Жодної дозволеної ролі |
Інтерфейс DOM | HTMLMeterElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-meter-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
meter
|
Chrome Full support 6 | Edge Full support 18 | Firefox Full support 16 | Internet Explorer No support Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 Ні | Opera Full support 11 | Safari Full support 6 | WebView Android No support Ні | 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 |