Синтаксис

<meter value="...">...</meter>

Описание

Тег <meter> (от англ. meter — измеритель, счётчик) отображает значение в виде заполняемой шкалы, на котором цветом помечается текущее значение в указанном диапазоне.

Данный тег используется, к примеру, для отображения объема жидкости/давления, результатов опроса, заряда батареи, использования дискового пространства и т.д.

Примечание!

Тег <meter> не должен использоваться для обозначения индикатора прогресса, для этого используйте тег <progress>.

Атрибуты, которые можно использовать в теге <meter>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
form id формы

Указывает одну или несколько форм, к которым принадлежит элемент <meter>

high число

Указывает диапазон, который считается высоким значением

low число

Указывает диапазон, который считается низким значением

max число

Задает максимальное значение диапазона

min число

Задает минимальное значение диапазона

optimum число

Определяет, какое значение является оптимальным для датчика

value число

Указывает текущее значение датчика.
Обязательный атрибут

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег meter</title>
</head>
<body>
    <meter value="15" min="0" max="100" low="20" high="80" optimum="90">15 из 100</meter><br>
    <meter value="50" min="0" max="100" low="20" high="80" optimum="90">50 из 100</meter><br>
    <meter value="90" min="0" max="100" low="20" high="80" optimum="90">90 из 100</meter>
</body>
</html>

Отображение в браузере:

15 из 100
50 из 100
90 из 100

Параметры CSS по умолчанию

Нет.

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<meter> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных