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

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

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

Атрибути

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

value

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

[!NOTE] Якщо атрибут 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="0" max="100" value="75">75%</meter></p>

Результат

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

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

HTML

<p>
  Оцінка студента за іспит:
  <meter min="0" low="50" high="80" max="100" value="84">84%</meter>
</p>

Результат

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

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

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

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

• Створення вертикальних формових елементів
• <progress>
• ::-webkit-meter-bar, ::-webkit-meter-inner-element, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value – нестандартні псевдоелементи