# Тег meter

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

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

Тег `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` | Определяет область оптимальных значений.

## Смотрите также

- тег `progress`,
  который создает полосу загрузки.

← →
↑