Тег <meter>
Тег <meter> (укр. — “шкала значень” або “вимірювач”) в HTML використовується для відображення числового значення в межах відомого діапазону. Це може бути, наприклад, рівень завантаження, прогрес, рейтинг, сила сигналу, складність пароля тощо.
На відміну від <progress>, який показує виконання задачі, <meter> показує оцінку або рівень.
Атрибути
Специфічні атрибути
- value — фактичне значення шкали. Обов’язковий атрибут. Наприклад:
<meter value="70"></meter>- min — мінімально можливе значення (за замовчуванням 0). Наприклад:
<meter min="0" value="70"></meter>- max — максимально можливе значення (за замовчуванням 1). Наприклад:
<meter min="0" max="100" value="70"></meter>- low — нижня межа “низького” діапазону. Наприклад:
<meter min="0" max="100" low="30" value="20"></meter>- high — верхня межа “високого” діапазону. Наприклад:
<meter min="0" max="100" high="80" value="70"></meter>- optimum — оптимальне значення. Наприклад:
<meter min="0" max="100" optimum="50" value="70"></meter>Глобальні атрибути
Тег <meter> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор. Наприклад:
<meter id="cpu-usage" min="0" max="100" value="70"></meter>- class — для CSS-стилізації. Наприклад:
<meter class="battery-level" min="0" max="100" value="90"></meter>- style — для інлайн-стилів. Наприклад:
<meter style="width: 200px;" min="0" max="100" value="40"></meter>- title — підказка при наведенні. Наприклад:
<meter title="Рівень заряду батареї" min="0" max="100" value="90"></meter>Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання meter</title>
<style>
meter {
width: 300px;
height: 25px;
}
</style>
</head>
<body>
<h2>Приклад шкали значень:</h2>
<p>Завантаження процесора:
<meter id="cpu-usage" min="0" max="100" low="30" high="80" optimum="50" value="70">
70%
</meter>
</p>
<p>Рівень заряду батареї:
<meter min="0" max="100" value="90">90%</meter>
</p>
<p>Складність пароля:
<meter min="0" max="10" value="7">7/10</meter>
</p>
</body>
</html>Додаткові моменти
- На відміну від
<progress>, тег<meter>не відображає процес виконання завдання, а відображає оцінку рівня в певному діапазоні. - Може містити текст всередині, який буде показаний у старих браузерах, що не підтримують
<meter>. - Дозволяє браузеру вибирати стилізацію в залежності від діапазонів (
low,high,optimum), хоча кросбраузерна підтримка цих візуальних відмінностей поки обмежена. - Може стилізуватись через CSS, але не всі частини елемента піддаються кастомізації без додаткових хаків.
- Підтримується всіма сучасними браузерами.
