diff options
Diffstat (limited to 'files/ca/web/html/element/meter/index.html')
-rw-r--r-- | files/ca/web/html/element/meter/index.html | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/files/ca/web/html/element/meter/index.html b/files/ca/web/html/element/meter/index.html new file mode 100644 index 0000000000..2b55b9910a --- /dev/null +++ b/files/ca/web/html/element/meter/index.html @@ -0,0 +1,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> |