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
|
---
title: <meter>
slug: Web/HTML/Element/Meter
tags:
- Element
- Formulaires
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <strong><code><meter></code></strong> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Attributs">Attributs</h2>
<p>Comme pour les autres éléments HTML, cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
<dl>
<dt>{{htmlattrdef("form")}}</dt>
<dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.</dd>
<dt>{{htmlattrdef("high")}}</dt>
<dd>Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>low</strong></code> est aussi défini, il doit être plus grand que celui-ci.</dd>
<dt>{{htmlattrdef("low")}}</dt>
<dd>Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>high</strong></code> est aussi défini, il doit être plus petit que celui-ci.</dd>
<dt>{{htmlattrdef("max")}}</dt>
<dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd>
<dt>{{htmlattrdef("min")}}</dt>
<dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd>
</dl>
<dl>
<dt>{{htmlattrdef("optimum")}}</dt>
<dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd>
</dl>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
<div class="note">
<p><strong>Note d'utilisation</strong> : il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p>
<pre class="brush: html">Utilisation de l'espace de stockage:
<meter value=6 max=8>
6 blocs utilisés (sur un total de 8)
</meter></pre>
Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</div>
</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Chauffez le four à
<meter min="100" max="250" value="180">180 degrés</meter>.
</p>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple", 300, 60)}}</p>
<h3 id="Utilisation_de_high_et_low">Utilisation de <code>high</code> et <code>low</code></h3>
<p>On remarquera ici que l'attribut <code>min</code> est absent (ce qui est autorisé), la valeur minimale sera alors 0.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>
Il a eu
<meter low="69" high="80" max="100" value="84">B</meter>
à son examen.
</p>
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu étiquetable</td>
</tr>
<tr>
<th scope="row"><dfn>Contenu autorisé</dfn></th>
<td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ne possédant pas d'élément <code><meter></code> parmi ses descendants.</td>
</tr>
<tr>
<th scope="row"><dfn>Omission de balises</dfn></th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row"><dfn>Parents autorisés</dfn></th>
<td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Aucun.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLMeterElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.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>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("html.elements.meter")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
|
