<meter>

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

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с  label, явный контент.
Разрешенный контент Фразовый контент, но среди его потомков не должно быть элемента <meter>.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Разрешенные родители Любой элемент, который принимает фразовый контент.
Разрешенные ARIA роли Нет
DOM интерфейс HTMLMeterElement

Атрибуты

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

value
Текущее числовое значение. Он должен быть между минимальным и максимальным значением (min атрибут и max атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами min и max, значение будет равно ближайшему концу диапазона.
Примечание по использованию: Если атрибут value не находится в диапазоне от  0 до 1 (включительно), то атрибуты min и max должны определять диапазон, в котором будет находиться значение  value.
min
Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (max атрибут), если указан. Если неопределен, то минимальное значение равно 0.
max
Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (min атрибут), если указан. Если неопределен, то максимальное значение равно 1.
low
Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (min атрибут), а также, меньше, чем значение high и максимальное значение(high атрибут и max атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение low равно минимальному значению.
high
Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (max атрибут), а также, больше, чем значение low и минимальное значение (low атрибут и min атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение high равно максимальному значению.
optimum
Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами min и max). При использовании с атрибутами low и high, он указывает какая часть дипазона является предпочтительной. Например, если он находится между атрибутами min и low, нижний диапазон является предпочтительным.
form
Этот атрибут связывает элемент с элементом form, частью которого является элемент meter. Например, meter может отображать диапазон, соответствующий элементу input с type number. Этот атрибут используется только в случае, если элемент  meter используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента form.

Примеры

Простой пример

HTML content

<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p>

Output

В Google Chrome, результат будет выглядеть так:

meter1.png

Пример с High и Low диапазоном

Обратите внимание, что в этом примере атрибут min опущен; это разрешено, так как по умолчанию он будет равен 0.

HTML content

<p>He got a <meter low="69" high="80" max="100"
  value="84">B</meter> on the exam.</p>

Output

В Google Chrome, результат будет выглядеть так:

meter2.png

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

Спецификация Статус Комментарии
HTML Living Standard
Определение '<meter>' в этой спецификации.
Живой стандарт  
HTML5
Определение '<meter>' в этой спецификации.
Рекомендация Первое определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
meterChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
formChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
highChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
lowChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
maxChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
minChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
optimumChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да
valueChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 16IE Нет поддержки НетOpera Полная поддержка 11Safari Полная поддержка 6WebView Android Нет поддержки НетChrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 11Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также