<meter> Элемент HTML meter

Элемент <meter> HTML представляет собой скалярное значение в известном диапазоне или дробное значение.

Попробуйте

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

value

Текущее числовое значение. Если указаны минимальное и максимальное значения (атрибуты min и max), оно должно находиться между ними. Если значение не указано или указано некорректно, оно равно 0. Если значение указано, но не входит в диапазон, заданный атрибутами min и max, оно равно ближайшей границе диапазона.

Примечание: Если значение атрибута value не находится в диапазоне от 0 до 1 включительно, атрибуты min и max должны задавать диапазон, в который входит значение атрибута value.

min

Нижняя числовая граница измеряемого диапазона. Если указано максимальное значение (атрибут max), оно должно быть меньше него. Если значение не указано, минимальное значение равно 0.

max

Верхняя числовая граница измеряемого диапазона. Если указано минимальное значение (атрибут min), оно должно быть больше него. Если значение не указано, максимальное значение равно 1.

low

Верхняя числовая граница нижней части измеряемого диапазона. Она должна быть больше минимального значения (атрибут min), а также меньше высокого значения и максимального значения (соответственно атрибутов high и max), если они указаны. Если значение не указано или оно меньше минимального значения, значение low равно минимальному значению.

high

Нижняя числовая граница верхней части измеряемого диапазона. Она должна быть меньше максимального значения (атрибут max), а также больше низкого значения и минимального значения (соответственно атрибутов low и min), если они указаны. Если значение не указано или оно больше максимального значения, значение high равно максимальному значению.

optimum

Этот атрибут задаёт оптимальное числовое значение. Оно должно находиться в диапазоне, определённом атрибутами min и max. При использовании с атрибутами low и high он указывает, какая часть диапазона считается предпочтительной. Например, если оно находится между атрибутами min и low, предпочтительной считается нижняя часть диапазона. Браузер может окрашивать полосу индикатора по-разному в зависимости от того, меньше ли значение оптимального или равно ему.

Примеры

Базовый пример

HTML

<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

Результат

Пример диапазона с верхней и нижней границами

Обратите внимание, что в этом примере атрибут min опущен. Это допустимо: по умолчанию он равен 0.

HTML

<p>
  Student's exam score:
  <meter low="50" high="80" max="100" value="84">84%</meter>
</p>

Результат

Техническая сводка

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

Совместимость с браузерами

См. также

• Создание вертикальных элементов управления формами
• <progress>
• ::-webkit-meter-bar, ::-webkit-meter-inner-element, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value: нестандартные псевдоэлементы