files/ru/web/html/element/meter/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

---
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>