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
|
---
title: <meter>
slug: Web/HTML/Element/meter
tags:
- Element
- HTML
- HTML forms
- HTML5
- Reference
- Web
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>
<h2 id="Sumari">Sumari</h2>
<p>L'<strong>Element HTML <code><meter></code></strong> representa un valor escalar dins d'un rang conegut o un valor fraccionari.</p>
<div class="note">Llevat que l'atribut <code>value</code> està entre <code>0</code> i <code>1</code> (inclosos), els atributs <code>min</code> i <code>max</code> haurien de definir el rang de manera que el valor de l'atribut <code>value</code> estigui dins d'ell.</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, contingut etiquetable, content, contingut palpable.</td>
</tr>
<tr>
<th scope="row">Contingut permès</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, però no ha d'haver cap element <code><meter></code> entre els seus descendents.</td>
</tr>
<tr>
<th scope="row">Omissió de l'etiqueta</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Elements pares permesos</th>
<td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">
<p>Interfície DOM</p>
<p> </p>
</th>
<td>{{domxref("HTMLMeterElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributs">Atributs</h2>
<p>Aquest element inclou els <a href="/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>El valor numèric actual. Això ha d'estar entre els valors màxim i mínim (atribut <code>min</code> i atribut <code>max</code>) si s'especifiquen. Si no s'especificat o és incorrecte, el valor és 0. Si s'especifica, però no dins del rang donat per l'atribut <code>min</code> i l'atribut <code>max</code>, el valor és igual a l'extrem més proper del rang.</dd>
<dt>{{htmlattrdef("min")}}</dt>
<dd>El límit numèric inferior del rang mesurat. Aquest ha de ser menor que el valor màxim (atribut <code>max</code>), si s'especifica. Si no s'especifica, el valor mínim és 0.</dd>
<dt>{{htmlattrdef("max")}}</dt>
<dd>El límit numèric superior del rang mesurat. Aquest ha de ser major que el valor mínim (atribut <code>min</code>), si s'especifica. Si no s'especifica, el valor mínim és 1.</dd>
<dt>{{htmlattrdef("low")}}</dt>
<dd>El límit numèric superior de l'extrem inferior del rang de mesurat. Aquest ha de ser més gran que el valor mínim (atribut <code>min</code>), i també ha de ser menor que el valor alt i valor màxim (l'atribut <code>high</code> i l'atribut <code>max</code>, respectivament), si s'especifica algun. Si no s'especifica, o si és menor que el valor mínim, el valor <code>low</code> és igual al valor mínim.</dd>
<dt>{{htmlattrdef("high")}}</dt>
<dd>El límit numèric inferior de l'extrem superior del rang de mesurat. Aquest ha de ser més petit que el valor màxim (atribut <code>max</code>), i també ha de ser més gran que el valor baix i valor mínim (l'atribut <code>low</code> i l'atribut <code>min</code>, respectivament), si s'especifica algun. Si no s'especifica, o si és més gran que el valor màxim, el valor <code>high</code> és igual al valor màxim.</dd>
<dt>{{htmlattrdef("optimum")}}</dt>
<dd>Aquest atribut indica el valor numèric òptim. Ha d'estar dins del rang (definit per l'atribut <code>min</code> i l'atribut <code>max</code>). Quan s'usa amb l'atribut <code>low</code> i l'atribut <code>high</code>, es dóna una indicació d'on al llarg del rang es considera preferible. Per exemple, si està entre l'atribut <code>min</code> i l'atribut <code>low</code>, llavors el rang inferior es considera preferit.</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd>Aquest atribut associa l'element amb un element <code>form</code> que té la propietat de l'element <code>meter</code>. Per exemple, un <code>meter</code> podria estar mostrant un rang corresponent a un element <code>input</code> de <code>type</code> <em>numèric</em>. Aquest atribut s'utilitza únicament si l'element <code>meter</code> està sent utilitzat com un element de formulari associat; fins i tot llavors, pot ser omès si l'element apareix com un descendent d'un element <code>form</code>.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_senzill"><span class="short_text" id="result_box" lang="ca"><span>Exemple</span> <span>senzill</span></span></h3>
<h4 id="Contingut_HTML">Contingut HTML</h4>
<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
</pre>
<h4 id="Sortida">Sortida</h4>
<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>
<p> <span id="result_box" lang="ca"><span>A Google</span> <span>Chrome</span><span>, el mesurador</span> <span>resultant</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>
<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
<h3 id="Exemple_de_rang_High_i_Low">Exemple de rang High i Low</h3>
<p><span id="result_box" lang="ca"><span>Tingueu</span> <span>en compte que en</span> <span>aquest exemple</span> <span>no s'inclou l'atribut</span> <strong><span>min</span></strong><span>;</span> <span>això està</span> <span>permès,</span> <span>ja que el valor</span> <span>de</span> <span>0</span></span></p>
<h4 id="Contingut_HTML_2">Contingut HTML</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="Sortida_2">Sortida</h4>
<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>
<p><span id="result_box" lang="ca"><span>A Google</span> <span>Chrome</span><span>, el mesurador</span> <span>resultant</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>
<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definició inicial</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>6.0</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>{{CompatNo}}</td>
<td>20<sup>[1]</sup></td>
<td>11.0</td>
<td>5.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Edge Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatNo}}</td>
<td>20<sup>[1]</sup></td>
<td>11.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Veure la <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement">Pàgina Estat de la Plataforma de Microsoft Edge</a>.</p>
<h2 id="Veure">Veure</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
|
