---
title: <meter>
slug: Web/HTML/Element/meter
tags:
  - Формы
  - прогресс
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>

<p><strong>HTML-элемент <code>&lt;meter&gt;</code> </strong> представляет собой скалярное значение в пределах известного диапазона или дробного значения.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с  label, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенный контент</th>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code>&lt;meter&gt;</code>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные родители</th>
   <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные ARIA роли</th>
   <td>Нет</td>
  </tr>
  <tr>
   <th scope="row">DOM интерфейс</th>
   <td>{{domxref("HTMLMeterElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>Текущее числовое значение. Он должен быть между минимальным и максимальным значением (<code>min</code> атрибут и <code>max</code> атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами <code>min</code> и <code>max</code>, значение будет равно ближайшему концу диапазона.
 <div class="note"><strong>Примечание по использованию: </strong>Если атрибут <code>value</code> не находится в диапазоне от  <code>0</code> до <code>1</code> (включительно), то атрибуты <code>min</code> и <code>max</code> должны определять диапазон, в котором будет находиться значение  <code>value</code>.</div>
 </dd>
 <dt>{{htmlattrdef("min")}}</dt>
 <dd>Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), если указан. Если не определен, то минимальное значение равно 0.</dd>
 <dt>{{htmlattrdef("max")}}</dt>
 <dd>Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), если указан. Если не определен, то максимальное значение равно 1.</dd>
 <dt>{{htmlattrdef("low")}}</dt>
 <dd>Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), а также, меньше, чем значение high и максимальное значение(<code>high</code> атрибут и <code>max</code> атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение <code>low</code> равно минимальному значению.</dd>
 <dt>{{htmlattrdef("high")}}</dt>
 <dd>Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), а также, больше, чем значение low и минимальное значение (<code>low</code> атрибут и <strong>min</strong> атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение <code>high</code> равно максимальному значению.</dd>
 <dt>{{htmlattrdef("optimum")}}</dt>
 <dd>Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами <code>min</code> и <code>max</code>). При использовании с атрибутами <code>low</code> и <code>high</code>, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами <code>min</code> и <code>low</code>, нижний диапазон является предпочтительным.</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>Этот атрибут связывает элемент с элементом <code>form</code>, частью которого является элемент <code>meter</code>. Например, <code>meter</code> может отображать диапазон, соответствующий элементу <code>input</code> с <code>type</code> <em>number</em>. Этот атрибут используется только в случае, если элемент  <code>meter</code> используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента <code>form</code>.</dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<h3 id="Простой_пример">Простой пример</h3>

<h4 id="HTML_content">HTML content</h4>

<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500"
  value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
</pre>

<h4 id="Output">Output</h4>

<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>

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

<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>

<h3 id="Пример_с_High_и_Low_диапазоном">Пример с High и Low диапазоном</h3>

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

<h4 id="HTML_content_2">HTML content</h4>

<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100"
  value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
</pre>

<h4 id="Output_2">Output</h4>

<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>

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

<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Первое определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>



<p>{{Compat("html.elements.meter")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{HTMLElement("progress")}}</li>
</ul>