<meter> HTML

Тег <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>

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

WAI ARIA

Нет значения role по-умолчанию.

Атрибуты

  • 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>