Тег meter используется для вывода некоторого значения в красиво оформленном виде.

Внешний вид тега представляет собой частично или полностью закрашенную полоску. Полоска может быть зеленой, желтой или красной (цвет полоски зависит от значений атрибутов, об этом будет ниже):

Результат выполнения кода:

В вашем браузере тег meter не поддерживается.

См. также тег progress, который создает полосу загрузки.

Тег meter следует использовать, к примеру, в следующей ситуации: вы хотите вывести на экран текущее значение температуры, при этом температура может изменятся от 0 до 100. Вам следует указать следующие атрибуты: атрибут value должен указывать текущее значение температуры, атрибут min - минимально возможное значение (в нашем случае 0), атрибут max - максимально возможное (в нашем случае 100).

В зависимости от значения атрибута value полоска будет маленькой или большой. Если указать value в значении 10, то полоска будет маленькой (так как 10 очень близко к минимуму - к нулю), если же указать значение 90, то полоска будет большой (так как 90 близко к максимуму - к 100). Если указать значение 100 - то полоска займет весь элемент (так как значение достигло максимума).

Если указать значение, большее, чем 100, то полоска все равно займет весь элемент. Если же указать 0 и менее - то полоски совсем не будет.

Посмотрите примеры

Пример

Значение атрибута value маленькое:

<meter value="10" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value большое:

<meter value="90" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value среднее:

<meter value="50" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value равно максимальному:

<meter value="100" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value равно минимальному:

<meter value="0" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value больше максимального:

<meter value="110" min="0" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value меньше минимального:

<meter value="-10" min="0" max="100"></meter>

Результат выполнения кода:

Добавляем атрибуты low и high

В теге meter есть еще 2 атрибута: low и high.

Рассмотрим их работу на примере температуры. Напоминаю, что наша минимальная температура равна 0, а максимальная - 100. Пусть теперь мы хотим сделать следующие диапазоны - "холодная температура" от 0 до 20, "нормальная" от 20 до 80 и "горячая" от 80 до 100.

Чтобы задать холодную температуру, укажем значением атрибута low число 20. Получится, что от нуля (это значение атрибута min) до 20 (значение атрибута low) у нас область низких значений.

Чтобы задать горячую температуру, укажем значением атрибута high число 80. Получится, что от 80 (это значение атрибута high) до 100 (значение атрибута max) у нас область высоких значений.

Нормальная температура будет от 20 (это значение атрибута low) до 80 (значение атрибута high). Эту область назовем областью нормальных значений.

Теперь, в зависимости от того, в какую область попадает значение атрибута value, полоска будет окрашиваться в зеленый или желтый цвет. Зеленый будет, если мы попали в область нормальных значений, а желтый - если в область высоких или низких значений.

Посмотрите примеры

Пример

Значение атрибута value попадает в область низких значений:

<meter value="10" min="0" low="20" high="80" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область нормальных значений:

<meter value="50" min="0" low="20" high="80" max="100"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область высоких значений:

<meter value="90" min="0" low="20" high="80" max="100"></meter>

Результат выполнения кода:

Добавляем атрибут optimum

Атрибут optimum определяет оптимальное значение. Для нашего примера оптимальной может быть холодная температура, нормальная или горячая - на ваш выбор. Предположим, что вы укажите, что оптимальная температура холодная. Теперь, в зависимости от значения атрибута value (то есть от текущей температуры) цвет полоски будет зеленый, желтый или красный.

Если текущая температура попадает в область оптимальных температур (а мы указали, что оптимальная - холодная), то цвет полоски будет зеленый. Если текущая температура попадает в соседний с оптимальным диапазон (в нашем случае это нормальная температура), то полоска станет желтой. Если же текущая температура попадает не в соседний с оптимальным диапазон (в нашем случае это горячая температура), то полоска станет красной.

Аналогичным образом все будет происходить, если оптимальной температурой указать горячую. В этом случае, если текущая температура попала в область горячих температур - полоска будет зеленой, если попала в область нормальных - желтой, если в область холодных - красной.

Если оптимальной указать нормальную температуру, то полоска может быть только зеленой (если текущая температура попала в нормальную) или желтой (если текущая температура попала в соседа нормальной температуры, а это горячая или холодная).

Чтобы указать, какой диапазон является оптимальным, нужно указать в качестве значения атрибута optimum любое число из этого диапазона.

Посмотрите примеры

В примерах ниже значение атрибута optimum попадает в область низких значений (то есть холодных температур).

Пример

Значение атрибута value попадает в область низких значений:

<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область нормальных значений:

<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область высоких значений:

<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

Результат выполнения кода:

В примерах ниже значение атрибута optimum попадает в область высоких значений (то есть горячих температур).

Пример

Значение атрибута value попадает в область низких значений:

<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область нормальных значений:

<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область высоких значений:

<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

Результат выполнения кода:

В примерах ниже значение атрибута optimum попадает в область нормальных значений (то есть нормальных температур).

Пример

Значение атрибута value попадает в область низких значений:

<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область нормальных значений:

<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат выполнения кода:

Пример

Значение атрибута value попадает в область высоких значений:

<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

Результат выполнения кода:

Старые браузеры

Старые браузеры не смогут показать тег meter в красивом виде и будут выводить вместо этого содержимое самого тега:

<meter value="10" min="0" max="100">Этот текст покажется в старых браузерах.</meter>

Атрибуты

Значение атрибутов может быть дробным и отрицательным числом.

Атрибут Описание
value Устанавливает текущее значение. Обязательный атрибут.
min Задает минимально возможное значение. Значение по умолчанию: 0.
max Задает максимально возможное значение. Значение по умолчанию: 1.
low Задает границу области низких значений. Низкие значения будут от числа в атрибуте min до числа в атрибуте low.
high Задает границу области низких значений. Низкие значения будут от числа в атрибуте high до числа в атрибуте max.
optimum Определяет область оптимальных значений.