Тег meter показывает шкалу: значение внутри известного диапазона, например заряд батареи, занятое место на диске или оценка за тест. Браузер рисует горизонтальную шкалу и красит её в зелёный, жёлтый или красный цвет в зависимости от зоны, в которую попало значение. Закрывающий тег </meter> нужен, пропускать его нельзя.
Тег появился в HTML5 и нужен для измерений. Для задачи, которая выполняется и имеет конец, подходит тег progress, а для значения, которое двигает сам пользователь, поле input с type="range".
<meter min="0" max="100" low="20" high="80" optimum="100" value="90"></meter>Один тег с тремя уровнями заряда.
В этой статье
- Тег meter в HTML: что это и когда нужен
- Атрибуты value, min и max: диапазон шкалы
- Атрибуты low и high: три зоны шкалы
- Атрибут optimum: от чего зависит цвет шкалы
- Неверные значения: что делает браузер
- Название шкалы: label, aria-label и текст внутри
- Стилизация тега meter: размер, цвет и вид
- Псевдоэлементы meter: ::-webkit-meter-bar и ::-webkit-meter-optimum-value
- Тег meter и JavaScript: value, min и max
- Доступность meter: роль meter
- Meter и форма: почему шкала не отправляется
- Атрибуты тега meter
- Вопросы про тег meter: несколько значений и отличие от range
- Частые ошибки с тегом meter
Тег meter в HTML: что это и когда нужен
Шкала показывает, где находится значение среди границ: насколько заряжена батарея, сколько места занято, какой балл получен. Это не ход работы, а показание: оно может и расти, и падать. Сам тег ничего не считает, значение меняет скрипт или автор страницы. Вычисленный display равен inline-block, поэтому шкала встаёт в строку рядом с текстом. Оба индикатора рядом показаны в уроке про индикаторы.
<label>Заряд
<meter min="0" max="100" value="70"></meter>
</label>Пример: meter и progress рядом
Показание, процесс и оценка рядом.
Атрибуты value, min и max: диапазон шкалы
Границы шкалы задают min и max, по умолчанию 0 и 1. Атрибут value показывает текущее значение между ними. Если max не указан, значение 0.3 означает 30%. Минимум менять можно, и это удобно для температуры от -20 до 40. Атрибут value обязателен: без него запись считается ошибкой при проверке, хотя браузер возьмёт ноль.
<meter min="-20" max="40" value="22"></meter>Пример: как записать диапазон
Четыре способа задать диапазон.
Атрибуты low и high: три зоны шкалы
Атрибуты low и high делят шкалу на три зоны: от min до low низкая, от low до high средняя, от high до max высокая. По умолчанию low равен min, а high равен max: зона одна, и шкала всегда зелёная. Сами зоны цвета не задают, цвет выбирает браузер, сравнивая зону значения с лучшей зоной.
<meter min="0" max="100" low="33" high="66" value="10"></meter>Пример: зоны при разных границах
Одни и те же три значения при разных границах.
Атрибут optimum: от чего зависит цвет шкалы
Атрибут optimum показывает, какое значение считается лучшим. Браузер находит зону, где находится optimum, и сравнивает с ней зону значения: та же зона даёт зелёный цвет, соседняя жёлтый, дальняя красный. Если optimum не указан, берётся середина диапазона. Для заряда батареи его указывают около максимума, для заполненности диска около нуля. Когда лучшая зона посередине, красного нет совсем. Конкретные оттенки зависят от браузера.
<meter min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>Пример: три положения лучшей зоны
Три расположения лучшей зоны для одних значений.
Неверные значения: что делает браузер
На неверные числа браузер не сообщает об ошибке, а подгоняет их. Значение вне границ зажимается до ближайшей границы, нечисловое (abc, пустая строка, 20%) становится нулём. Если min больше max, максимум поднимается до минимума, и все числа шкалы равны. Если low больше high, значение high поднимается до low. Лишние low, high и optimum зажимаются в диапазон так же. Нулевой max остаётся нулём, а у progress он заменяется единицей. Проверка HTML считает ошибкой значение вне границ, нечисловое значение, min больше max и low больше high.
<meter min="10" max="5" value="7"></meter>Пример: что получается из неверных записей
Девять неудачных записей и результат.
Название шкалы: label, aria-label и текст внутри
Чтобы шкала не осталась безымянной, ей дают название через тег label с атрибутом for, через обёртку label или атрибут aria-label. Текст между <meter> и </meter> на странице не виден и название не заменяет: он служит запасным содержимым для очень старых браузеров.
<label for="fuel">Топливо</label>
<meter id="fuel" value="0.6"></meter>Пример: где браузер берёт название
Где браузер берёт название шкалы.
Стилизация тега meter: размер, цвет и вид
Размер задают через width и height, но в родном виде высота полосы внутри тега вдвое меньше высоты самого тега. Цвет не меняют ни accent-color, ни color: у progress первое работает, у meter нет. Вертикальную шкалу даёт writing-mode. Стоит задать background или border, и браузер отказывается от родного вида и рисует упрощённую шкалу со своими цветами. Цвета зон меняют только псевдоэлементы, о них следующий раздел.
meter {
width: 100%;
height: 30px;
}Пример: размер, цвет и вид
Что меняется, а что нет.
Псевдоэлементы meter: ::-webkit-meter-bar и ::-webkit-meter-optimum-value
Шкала состоит из трека и заполнения. Трек красят через ::-webkit-meter-bar, а заполнение тремя псевдоэлементами по зонам: ::-webkit-meter-optimum-value для лучшей, ::-webkit-meter-suboptimum-value для средней и ::-webkit-meter-even-less-good-value для худшей. Они работают и без appearance: none. Чтобы трек занял всю высоту тега, ему задают height. Плавность transition: width работает на заполнении при смене значения внутри одной зоны. В Firefox шкалу стилизуют через ::-moz-meter-bar. Селекторы разных браузеров пишут отдельными правилами: запятая объединила бы их, и браузер отбросил бы правило целиком.
meter {
appearance: none;
width: 100%;
}
meter::-webkit-meter-bar {
height: 16px;
background: #ddd;
}
meter::-webkit-meter-optimum-value {
background: #1c9e93;
}Пример: слои шкалы
Цвет по зонам, скругление и плавность.
Тег meter и JavaScript: value, min и max
Новое значение записывают в свойство value, а границы в свойства min, max, low, high и optimum. Свойства возвращают уже подогнанные числа, а в атрибуте остаётся записанное. Нечисловая строка вызывает ошибку TypeError. У шкалы нет свойства position, как у progress, зато есть labels со связанными label.
const fuel = document.querySelector("meter");
fuel.value = 80;
console.log(fuel.labels.length);Пример: свойства и граничные случаи
Операции над одной шкалой.
Доступность meter: роль meter
Роль meter встроена в тег. Программа чтения с экрана получает название, значение и границы. Если задать aria-valuenow или aria-valuemax, она получит их, а не числа тега, а aria-valuetext даёт словесное описание. Но проверка HTML не допускает aria-valuenow и aria-valuetext у meter, а aria-valuemax считает нежелательным. Цвет зоны в свойствах роли не передаётся, поэтому смысл «мало» или «норма» добавляют словами рядом со шкалой.
<label>Заряд
<meter min="0" max="100" value="70"></meter>
</label>
<span>70%, достаточно</span>Пример: что получает программа чтения
Что слышит пользователь программы чтения.
Meter и форма: почему шкала не отправляется
Шкала не относится к полям формы: она не входит в form.elements, не попадает в FormData, и у неё нет свойства form. Группа, которую создаёт тег fieldset, с disabled на неё не действует. Число для отправки записывают в отдельное поле, например скрытое.
<form>
<input name="a" value="1">
<meter value="0.3"></meter>
</form>Пример: что видит форма
Что видит форма, а что нет.
Атрибуты тега meter
Собственных атрибутов шесть: они отвечают за границы и зоны. Остальные общие для всех тегов. Для проверки HTML обязателен только value.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
value | допускается | Текущее значение, по умолчанию 0; для проверки HTML обязателен | value="70" |
min | допускается | Минимум шкалы, по умолчанию 0 | min="0" |
max | допускается | Максимум шкалы, по умолчанию 1 | max="100" |
low | допускается | Конец низкой зоны, по умолчанию равен min | low="33" |
high | допускается | Начало высокой зоны, по умолчанию равно max | high="66" |
optimum | допускается | Лучшее значение, по умолчанию середина диапазона | optimum="80" |
id | глобальный | Идентификатор для label и скрипта | id="fuel" |
class | глобальный | Класс для оформления | class="gauge" |
title | глобальный | Всплывающая подсказка | title="70%" |
name | не существует | Шкала не отправляется с формой | name="m" |
form | не существует | Шкала не привязывается к форме | form="f" |
disabled | не существует | Отключить шкалу нельзя | disabled |
type | не существует | Вида у шкалы нет | type="bar" |
role | не допускается | Роль встроена, проверка HTML отклоняет даже role="meter" | role="meter" |
aria-valuenow | не допускается | Значение уже есть в value, проверка HTML отклоняет дубль | aria-valuenow="9" |
Вопросы про тег meter: несколько значений и отличие от range
Оба вопроса про случаи, когда одной шкалы мало или нужен ползунок: что делать с несколькими значениями и чем шкала отличается от range.
Как показать на шкале несколько значений сразу?
Один тег показывает одно значение. Для частей целого, например фото, видео и прочего на диске, берут несколько тегов meter с отдельными названиями. Если нужна одна полоса из цветных участков, её рисуют из блоков и описывают через role="img" и aria-label: получится картинка с текстовым описанием.
<label>Фото <meter max="100" value="40"></meter></label>
<label>Видео <meter max="100" value="25"></meter></label>Пример: три шкалы и сборная полоса
Три шкалы или одна сборная полоса.
Чем meter отличается от input type="range"?
Ползунок двигает пользователь: он получает фокус, у него роль slider, и его значение уходит в форму. Шкала meter только показывает значение, фокус не получает и в форму не попадает.
<input type="range" name="v" min="0" max="100" value="40">Пример: шкала и ползунок
Шкала и ползунок: что можно сделать с каждым.
Частые ошибки с тегом meter
Одни ошибки ломают сам тег, другие дают странный цвет шкалы, и вторые заметить труднее.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Не закрыть </meter> | Весь следующий текст оказывается внутри шкалы и пропадает с экрана | Всегда писать закрывающий тег |
Брать meter для хода загрузки | Шкала красится зонами, а роль не передаёт, что работа идёт | Использовать progress |
Не задать low и high | Зона одна, шкала всегда зелёная | Указать обе границы зон |
Указать optimum около максимума для заполненности диска | Полный диск красится зелёным | Для такой шкалы optimum около нуля |
Нарушить порядок min, low, high, max | Границы подгоняются друг к другу, шкала теряет смысл | Соблюдать порядок от меньшего к большему |
Записать value="20%" или число вне границ | Знак процента даёт ноль, лишнее число обрезается | Записывать число без знака внутри диапазона |
Красить через accent-color или color | Свойства на шкалу не действуют | Использовать псевдоэлементы зон |
Вложить в meter другой meter или блок | Запись отклоняется при проверке HTML, вложенный тег остаётся в разметке | Писать внутри только текст |
| Не дать шкале название | Программа чтения читает роль и число без смысла | Использовать label или aria-label |
