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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<header><h1><meter>: The HTML Meter element</h1></header><div class="section-content"><p>The <code><meter></code> <a href="../index">HTML</a> element represents either a scalar value within a known range or a fractional value.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/meter.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, labelable content, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">meter</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></td> </tr> </tbody> </table></div></figure>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>The current numeric value. This must be between the minimum and maximum values (<code>min</code> attribute and <code>max</code> attribute) if they are specified. If unspecified or malformed, the value is <code>0</code>. If specified, but not within the range given by the <code>min</code> attribute and <code>max</code> attribute, the value is equal to the nearest end of the range.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unless the <code>value</code> attribute is between <code>0</code> and <code>1</code> (inclusive), the <code>min</code> and <code>max</code> attributes should define the range so that the <code>value</code> attribute's value is within it.</p> </div> </dd> <dt id="min"><a href="#min"><code>min</code></a></dt> <dd> <p>The lower numeric bound of the measured range. This must be less than the maximum value (<code>max</code> attribute), if specified. If unspecified, the minimum value is <code>0</code>.</p> </dd> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>The upper numeric bound of the measured range. This must be greater than the minimum value (<code>min</code> attribute), if specified. If unspecified, the maximum value is <code>1</code>.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<code>min</code> attribute), and it also must be less than the high value and maximum value (<code>high</code> attribute and <code>max</code> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <code>low</code> value is equal to the minimum value.</p> </dd> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<code>max</code> attribute), and it also must be greater than the low value and minimum value (<code>low</code> attribute and <code>min</code> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <code>high</code> value is equal to the maximum value.</p> </dd> <dt id="optimum"><a href="#optimum"><code>optimum</code></a></dt> <dd> <p>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <code>min</code> attribute and <code>max</code> attribute). When used with the <code>low</code> attribute and <code>high</code> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <code>min</code> attribute and the <code>low</code> attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>This optional attribute is used to explicitly set a <a href="form"><code><form></code></a> owner for the <code><meter></code> element. If omitted, the <code><meter></code> is associated with its ancestor <code><form></code> element or the form association set by the <code>form</code> attribute on another ancestor element, such as on a <a href="fieldset"><code><fieldset></code></a>, if any. If included, the value must be the <a href="../global_attributes/id"><code>id</code></a> of a <code><form></code> in the same tree.</p> </dd> </dl>
</div>
<h2 id="examples">Examples</h2>
<h3 id="simple_example">Simple example</h3>
<div class="section-content">
<h4 id="html">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="ic/tVZIoOKqzf9hhKRU+V8ra719/91AQQw4/Ku9LKO8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Heat the oven to <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>350 degrees<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=simple_example" loading="lazy"></iframe>
</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAABKBAMAAAClc1uGAAAAJ1BMVEXv7+/Ly8sPfBD////q6urj4+P5+fnV1dVJkkTZ2dmWtpJsome5xLjq2SPCAAABl0lEQVR42u3bv07DMBAG8ENKhRgtAeHf5FeghDlCBTFWoO4o8AARE2vfgKl7J2YmZibEU3GJQrCLwxgjf9+NyfSr7TvHvsopcAjxxBNPPPHEE088BL6YrUyy8XRb/YW/r03SkV8O4x9M8rEYwp8ZgLgJ44saAZ9XQXxpIGI3hJ+2rz7f7JghI0Y2e26JFwF8O/Av1iaL17h2h142Bn5s+9h4uXKG3sHf6dNjmzpe5src/4XXVH+yTB8/aRL+Jr6p8R82fbyUfa0Xb9YvEfCTft7/4OcxVnwMfLPq93x8ob/HGgO/rdTKw0/jzPoY+Oy72PX4c2OOLAZedJ/36OE13x2g4Msu44mzt31HwW91O1xxkv0aBb/Tpfser+vgFQWvlf7Qw9dxkn0sfO7hNf1bFHxT64hHxAtHngmPpQ57kwO9vYX+sIH+pIU+zIA+xoI+wMQ5us4CR9fQlxbQ11XYF5XQV9TQzQkIbSmrwbYU6IYk7FY06CZE7PZT7MZj7JZz/tOCeOKJJ5544oknnnjiiSeeeOL/f3wBq/zMPETkfsUAAAAASUVORK5CYII=" alt="A screenshot of the meter element in Google Chrome" width="504" height="74" loading="lazy"> </p>
</div>
<h3 id="high_and_low_range_example">High and Low range example</h3>
<div class="section-content">
<p>Note that in this example the <a href="#min"><code>min</code></a> attribute is omitted. This is allowed, as it will default to <code>0</code>.</p> <h4 id="html_2">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="jIuNcu8JP2Is9t87tZGpBrFJgNQ+rzNj1BVdLO/0JiA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
He got a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>69<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>84<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> on the exam.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="High and Low range example sample" id="frame_high_and_low_range_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=high_and_low_range_example" loading="lazy"></iframe>
</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfIAAABGBAMAAADFkws0AAAALVBMVEXv7+/Ly8vXOgL////q6urj4+P5+fnV1dXdYUDZ2dnboJHRvbjZRx3eeV7egmmSFlynAAABnElEQVR42u3bPU7DQBAF4EFyhChXAsyPRLFXIJjaQgFRRqD0yHAAi4o2N6BKn4qaClHmCFQch7VjZ23HBpd43pvS3Zddz4x3J3KOGkI55ZRTTjnllFOuRB5NFkZtvNwnnfLH1KiO8LpD/mTUx6xVfmEA4q5FHqUI8jDZlscGIva35OP8+ef3yg45pDuCyWtOvGrK8yV/swMP+TVuq4su1SUfPPwPudxUFr2UP7hHZ1a7XKaOeViXu8R+OtcvH2XpvSbPavmH1S+XeFPTxW/2OYJ8tNnuhXyq4i3vIc/e9IOKPHK/xBJDvuuoiZePlWz2HvKgrGtr+aUxJxZDLq6Te/Zyl+COUORxkeKkbF3fUeQ7RQMrZWpfosj3iuS+lru9/4UidxX92MtTJam9pzz0cpfpVyjyrKzV5JZy7XJpykF3O26Gw61quJ0MbveK+8WC+5WKezKBexqFewKJc+ocNE+dcW8acG+XgG8UcW+RcScHEKZFFu3TIrgTQsBTYbiTgMDTn8ATv8BT3vxPA+WUU0455ZRTTjnllP/L+AFRr1+X/KW5rAAAAABJRU5ErkJggg==" alt="red meter in Google Chrome" width="498" height="70" loading="lazy"> </p>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">HTML Standard <br><small># the-meter-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>meter</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>form</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>high</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>low</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>max</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>min</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>optimum</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>value</code></th>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">≤18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">16</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="progress"><code><progress></code></a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter</a>
</p>
</div>
|
