<meter>
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
HTML-элемент<meter>
представляет собой скалярное значение в пределах известного диапазона или дробного значения.
Интерактивный пример
<label for="fuel">Fuel level:</label><meter min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100</meter>
label { padding-right: 10px; font-size: 1rem;}
Категории контента | Потоковый контент,фразовый контент, контент, ассоциированный с label, явный контент. |
---|---|
Допустимое содержимое | Фразовый контент, но среди его потомков не должно быть элемента<meter> . |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Допустимые родители | Любой элемент, который принимаетфразовый контент. |
Допустимые 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
<p> Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
Результат
В Google Chrome, результат будет выглядеть приблизительно так:
Пример с диапазоном
Обратите внимание, что в этом примере атрибутmin опущен; это разрешено, так как по умолчанию он будет равен 0.
HTML
<p> He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
Результат
В Google Chrome, результат будет выглядеть приблизительно так:
Спецификации
Specification |
---|
HTML # the-meter-element |