Перейти к содержанию

<meter>

Тег <meter> (от англ. meter -- счетчик, измеритель) используется для вывода значения в некотором известном диапазоне.

Применяется преимущественно для отображения числовых значений, например, количества результатов поиска, объёма жидкости, давления и др.

Браузеры, которые поддерживают элемент <meter>, отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри <meter>.

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

Can I Use meter? Data on support for the meter feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Синтаксис

<meter value="<число>">текст</meter>

Закрывающий тег обязателен.

Атрибуты

  • value -- Устанавливает значение.
  • min -- Задаёт минимально возможное значение.
  • max -- Задаёт максимально возможное значение.
  • low -- Определяет предел, при достижении которого значение считается низким.
  • high -- Определяет предел, при достижении которого значение считается высоким.
  • optimum -- Определяет наилучшее или оптимальное значение.

value

Устанавливает значение единицы измерения. Значение должно быть в диапазоне, задаваемым атрибутами min и max.

Синтаксис

<meter value="<число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Допускается использование отрицательных значений.

Значение по умолчанию

Нет.

min

Задаёт минимальный порог, который может достигать значение.

Синтаксис

<meter value="<число>" min="<минимальное число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие minvaluemax.

Значение по умолчанию

0

max

Задаёт максимальный порог, который может достигать значение.

Синтаксис

<meter value="<число>" max="<число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие minvaluemax.

Значение по умолчанию

1

low

Определяет предел, при достижении которого значение считается низким.

Синтаксис

<meter value="<число>" low="<число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие minlowmax, а также lowhigh.

Значение по умолчанию

Нет.

high

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

Синтаксис

<meter value="<число>" high="<число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие minhighmax, а также lowhigh.

Значение по умолчанию

Нет.

optimum

Определяет наилучшее или оптимальное значение.

Синтаксис

<meter value="<число>" optimum="<число>"></meter>

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие minoptimummax.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>meter</title>
  </head>
  <body>
    <p>Температура воды</p>
    <meter value="0" max="100" low="10" high="60">Низкая</meter>
    <meter value="30" max="100" low="10" high="60">Нормальная</meter>
    <meter value="80" max="100" low="10" high="60">Горячая</meter>
    <meter value="100" max="100">Кипяток</meter>
  </body>
</html>