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
|
---
title: <meter>
slug: Web/HTML/Element/meter
tags:
- Формы
- прогресс
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>
<p><strong>HTML-элемент <code><meter></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><meter></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"><p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
</pre>
<h4 id="Output">Output</h4>
<p>{{EmbedLiveSample("Простой_пример", 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"><p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
</pre>
<h4 id="Output_2">Output</h4>
<p>{{EmbedLiveSample("Пример_с_High_и_Low_диапазоном", 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>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
|