HTML тег <meter>

Элемент <meter> (от англ. "meter" ‒ «счётчик, измеритель») определяет скалярное измерение в пределах известного диапазона или дробное значение. Подобный индикатор также известен, как оценочная шкала. Для использования данного тега должно быть известно максимальное значение.

Данный тег используется, к примеру, как необходимость отображения релевантности поискового запроса, результатов опроса, заряда батареи, использования дискового пространства и тому подобное. Текст, указанный внутри тега, отображается только для тех браузеров, которые его не поддерживают.

Синтаксис

<meter value="..." max="...">...</meter>

Закрывающий тег

Обязателен.

Атрибуты

valueHTML5

Определяет текущее значение.

---

minHTML5

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

---

maxHTML5

Задаёт максимально возможное значение. Значение по умолчанию один. Если максимальное значение задано меньшим чем минимальное, то они меняются местами.

---

lowHTML5

Определяет низкие значения (но не минимальные). Это значение должно быть меньше чем high. Если указывается значение low меньше чем значение min, то low = min.

---

highHTML5

Определяет высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max.

---

optimumHTML5

Определяет оптимальное значение и должен находиться в пределах от min до max. Оно может быть большим, чем значение high.
Цвет зависит от расположения optimum:
красный: min ≤ optimum < low
желтый: low ≤ optimum ≤ high
зеленый: high < optimum ≤ max

---

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Firefox 16+ отображаeт элемент <meter> со следующими значениями стилей:

meter {
-moz-appearance: meterbar;
background: rgba(0, 0, 0, 0) linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%) repeat scroll 0 0;
display: inline-block;
vertical-align: -0.2em;
}
*::-moz-meter-bar {
-moz-appearance: meterchunk;
display: inline-block !important;
float: none !important;
height: 100%;
overflow: visible !important;
position: static !important;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%) repeat scroll 0 0;
}

Chrome 8+, Opera 11+, Safari 6+ отображают элемент <meter> со следующими значениями стилей:

meter {
-webkit-appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
meter::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
height: 100%;
width: 100%;
}
meter::-webkit-meter-bar {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
height: 100%;
width: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
height: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-suboptimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
height: 100%;
box-sizing: border-box;
}

Различия между HTML 4.01 и HTML5

Тег <meter> был добавлен в HTML5.

Пример использования:

Определяем оценочные данные в заданном диапазоне (шкалу):

<p>Заряд батареи</p>
    <meter value = "10" min = "0" max = "100" low = "20" high = "80" optimum = "90">10 из 100</meter> <br>
    <meter value = "20" min = "0" max = "100" low = "20" high = "80" optimum = "90">20 из 100</meter> <br>
    <meter value = "30" min = "0" max = "100" low = "20" high = "80" optimum = "90">30 из 100</meter> <br>
    <meter value = "40" min = "0" max = "100" low = "20" high = "80" optimum = "90">40 из 100</meter> <br>
    <meter value = "50" min = "0" max = "100" low = "20" high = "80" optimum = "90">50 из 100</meter> <br>
    <meter value = "60" min = "0" max = "100" low = "20" high = "80" optimum = "90">60 из 100</meter> <br>
    <meter value = "70" min = "0" max = "100" low = "20" high = "80" optimum = "90">70 из 100</meter> <br>
    <meter value = "80" min = "0" max = "100" low = "20" high = "80" optimum = "90">80 из 100</meter> <br>
    <meter value = "90" min = "0" max = "100" low = "20" high = "80" optimum = "90">90 из 100</meter> <br>
    <meter value = "100" min = "0" max = "100" low = "20" high = "80" optimum = "90">100 из 100</meter>

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

HTML уроки: HTML Элементы