HTML :: Тег <meter>

В HTML тег <meter> (от англ. meter – измеритель, счетчик) используется для графического вывода значения в некотором известном диапазоне. Примерами таких значений могут служить: количество результатов поиска, объем свободного пространства на жестком диске, доля чернокожего населения в штате Невада и т.д. Обычно браузеры отображают результат в виде графической полоски серого цвета, которая в зависимости от значений атрибутов элемента <meter> заполняется на определенную величину зеленым или желтым цветом. При этом текст между открывающим и закрывающим тегами элемента <meter> отображается только в браузерах, которые не поддерживают этот элемент.

Не следует использовать элемент <meter> для обозначения индикатора прогресса, для этого предназначен элемент <progress>.

Синтаксис

	<meter value="Число">текст</meter>		
	
	Закрывающий тег: обязателен.

Атрибуты

form – связывает элемент <meter> с формой, в качестве значения принимая соответствующее значение атрибута id формы. Это может потребоваться в случае, когда элемент расположен за пределами формы.
high – определяет предел, при достижении которого значение будет считаться высоким. Данный предел (число) должен быть меньше значения атрибута max, но больше значений атрибутов min и low. Если данный атрибут не будет использован или будет больше максимального значения, то высокое значение будет равно максимальному, т.е. значению атрибута max.
low – определяет предел, при достижении которого значение будет считаться низким. Данный предел (число) должен быть больше значения атрибута min, но меньше значений атрибутов high и max. Если данный атрибут не будет использован или будет меньше минимального значения, то низкое значение будет равно минимальному, т.е. значению атрибута min.
max – задает максимальное значение допустимого диапазона. Если атрибут не будет указан, то максимальное значение будет равно 1.
min – задает минимальное значение допустимого диапазона. Если атрибут не будет указан, то минимальное значение будет равно 0.
optimum – определяет оптимальное числовое значение, которое должно входить в диапазон, заданный атрибутами min и max. Если будут использованы также атрибуты low и high, то атрибут optimum будет указывать, какая часть диапазона будет предпочтительной. Например, если он будет находиться между атрибутами min и low, то нижний диапазон будет считаться предпочтительным.
value – данный обязательный атрибут задает текущее значение счетчика, которое должно быть в диапазоне значений, задаваемых атрибутами min и max (если они не указаны, то используется диапазон от 0 до 1). Если значение атрибута находится вне заданного диапазона, то будет использовано значение равное ближайшему концу диапазона. Если значение атрибута не указано вообще или имеет неверное значение, то в качестве значения будет использован 0.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/meter

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>

	<form action="water.php" method="get" name="reg_form">
		
		<label>Ваше самочуствие по 5-бальной системе:</label><br><br>
		   
		<meter value="1" min="1" max="5">1 из 5</meter> 
		<input type="radio" name="water_tem" value="0"><br><br> 

		<meter value="2" min="1" max="5">2 из 5</meter> 
		<input type="radio" name="water_tem" value="0"><br><br>  

		<meter value="3" min="1" max="5">3 из 5</meter> 
		<input type="radio" name="water_tem" value="0"><br><br> 

		<meter value="4" min="1" max="5">4 из 5</meter> 
		<input type="radio" name="water_tem" value="0"><br><br> 

		<meter value="5" min="1" max="5">5 из 5</meter> 
		<input type="radio" name="water_tem" value="0"><br><br> 

		<input type="submit" value="Отправить" disabled>
		
	</form>
 	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
	
	<span>Значение будет считаться низким и равным 0</span>
	<meter value="0" max="100" low="30" high="80">0</meter> 
	<br><br>
		
	<span>Значение будет считаться низким и равным 10</span>
	<meter value="5" min="10" max="100" low="30" high="80">10</meter> 	
	<br><br>
	
	<span>Значение будет считаться низким и равным 15</span>
	<meter value="15" min="10" max="100" low="30" high="80">15</meter> 	
	<br><br>
	
	<span>Значение будет равным 35</span>
	<meter value="35" min="10" max="100" low="30" high="80">35</meter> 	
	<br><br>
	
	<span>Значение будет оптимальным и равным 50</span>
	<meter value="50" min="10" max="100" low="30" high="80" optimum="50">50</meter> 	
	<br><br>
	
	<span>Значение будет равным 65</span>
	<meter value="65" min="10" max="100" low="30" high="80">65</meter> 	
	<br><br>	
	
	<span>Значение будет считаться высоким и равным 85</span>
	<meter value="85" min="10" max="100" low="30" high="80">85</meter> 	
	<br><br>	
	
	<span>Значение будет считаться высоким и равным 100</span>
	<meter value="135" min="10" max="100" low="30" high="80">100</meter> 	
	<br><br>	
	
</body>
</html>

Пример №2