Тег <meter> определяет скалярную величину в том же диапазоне или графическое представление дробного числа. Тег может быть использован, когда необходимо отобразить, к примеру, уровень заряда батареи, объем жидкости/давления, долю населения, которая имеет право голоса и т.д.
Для использования тега <meter> должно быть известно максимальное значение.
Тег <meter> не используется для обозначения индикатора прогресса. Для этого используется тег <progress>.
Синтаксис
Тег <meter> - парный элемент, закрывающий тег обязателен. Тег строчный, а значит может быть использован внутри большинства элементов, включая <header> и <p>.
Тег <meter> - новый в HTML5.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<meter value="4" min="0" max="10"></meter> 4 из 10<br>
<meter value="0.75">75%</meter> 75%
</body>
</html>Результат
Используйте свойства CSS background-color, box-shadow, width и height для стилизации элемента <progress>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 0 3px #666 inset;
}
progress[value]::-webkit-progress-value {
background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
-webkit-linear-gradient(top, #96f204, #8ebf42),
-webkit-linear-gradient(right, #96f204, #8ebf42);
background-size: 40px 20px, 10%;
}
</style>
</head>
<body>
<p>Загрузка:
<progress value="35" max="100"></progress>
<span>35%</span>
</p>
<p>Индикатор:
<progress value="80" max="100"></progress>
<span>80%</span>
</p>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| form | form_id | Указывает форму (формы), к которым относится тег <meter>. |
| high | number | Указывает высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max. |
| low | number | Указывает определяет низкие значения (но не минимальные). Это значение должно быть меньше чем high. Если указывается значение low меньше чем значение min, то low = min. |
| max | number | Определяет максимально возможное значение. Значение по умолчанию 1. |
| min | number | Определяет минимально возможное значение.Значение по умолчанию 0. |
| optimum | number | Задает оптимальное число, которое должно быть в пределах диапазона, определяемого атрибутами min и max. Оно может быть большим, чем значение high. Цвет зависит от расположения optimum: красный: min ≤ optimum < low желтый: low ≤ optimum ≤ high зеленый: high < optimum ≤ max |
| value | number | Устанавливает текущее значение, которое должно быть в пределах диапазона, определяемого атрибутами min и max. Обязательный атрибут. |
Тег <meter> поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 8+ | 6+ | 6+ | 11+ |
Практикуйте свои знания
What attributes does the HTML <meter> tag support?
Правильный!
Неправильно!