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

<meter>

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

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

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

Демо

Формы

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

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

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

Синтаксис

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

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

Атрибуты

value

Устанавливает значение.

min

Задаёт минимально возможное значение.

max

Задаёт максимально возможное значение.

low

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

high

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

optimum

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

value

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

Синтаксис

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

Значения

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

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

Нет.

min

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

Синтаксис

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

Значения

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

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

0

max

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

Синтаксис

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

Значения

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

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

1

low

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

Синтаксис

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

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ≤ low ≤ max, а также low ≤ high.

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

Нет.

high

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

Синтаксис

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

Значения

В качестве значения указывается целое или дробное число. Обязательно должно соблюдаться условие min ≤ high ≤ max, а также low ≤ high.

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

Нет.

optimum

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

Синтаксис

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

Значения

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

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

Нет.

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!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>

Ссылки

Комментарии