-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
150 lines (117 loc) · 5.9 KB
/
index.md
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
---
title: "<meter>: The HTML Meter element"
slug: Web/HTML/Element/meter
page-type: html-element
browser-compat: html.elements.meter
---
{{HTMLSidebar}}
The **`<meter>`** [HTML](/en-US/docs/Web/HTML) element represents either a scalar value within a known range or a fractional value.
{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}
## Attributes
This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
- `value`
- : The current numeric value. This must be between the minimum and maximum values (`min` attribute and `max` attribute) if they are specified. If unspecified or malformed, the value is `0`. If specified, but not within the range given by the `min` attribute and `max` attribute, the value is equal to the nearest end of the range.
> **Note:** Unless the `value` attribute is between `0` and `1` (inclusive), the `min` and `max` attributes should define the range so that the `value` attribute's value is within it.
- `min`
- : The lower numeric bound of the measured range. This must be less than the maximum value (`max` attribute), if specified. If unspecified, the minimum value is `0`.
- `max`
- : The upper numeric bound of the measured range. This must be greater than the minimum value (`min` attribute), if specified. If unspecified, the maximum value is `1`.
- `low`
- : The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (`min` attribute), and it also must be less than the high value and maximum value (`high` attribute and `max` attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the `low` value is equal to the minimum value.
- `high`
- : The lower numeric bound of the high end of the measured range. This must be less than the maximum value (`max` attribute), and it also must be greater than the low value and minimum value (`low` attribute and `min` attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the `high` value is equal to the maximum value.
- `optimum`
- : This attribute indicates the optimal numeric value. It must be within the range (as defined by the `min` attribute and `max` attribute). When used with the `low` attribute and `high` attribute, it gives an indication where along the range is considered preferable. For example, if it is between the `min` attribute and the `low` 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.
- `form`
- : This optional attribute is used to explicitly set a {{HTMLElement("form")}} owner for the `<meter>` element. If omitted, the `<meter>` is associated with its ancestor `<form>` element or the form association set by the `form` attribute on another ancestor element, such as on a {{HTMLElement("fieldset")}}, if any. If included, the value must be the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of a `<form>` in the same tree.
## Examples
### Simple example
#### HTML
```html
<p>
Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```
#### Result
{{EmbedLiveSample("Simple_example", 300, 60)}}
On Google Chrome, the resulting meter looks like this:
![A screenshot of the meter element in Google Chrome](screen_shot_2020-10-12_at_10.10.53_pm.png)
### High and Low range example
Note that in this example the [`min`](#min) attribute is omitted. This is allowed, as it will default to `0`.
#### HTML
```html
<p>
He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```
#### Result
{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}
On Google Chrome, the resulting meter looks like this:
![red meter in Google Chrome](screen_shot_2020-10-12_at_10.11.52_pm.png)
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>,
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>, labelable content, palpable content.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<a href="/en-US/docs/Web/HTML/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="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<code
><a href="/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>{{domxref("HTMLMeterElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Creating vertical form controls](/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)
- {{HTMLElement("progress")}}
- {{cssxref("::-webkit-meter-bar")}}, {{cssxref("::-webkit-meter-inner-element") }}, {{cssxref("::-webkit-meter-even-less-good-value")}}, {{cssxref("::-webkit-meter-optimum-value")}}, {{cssxref("::-webkit-meter-suboptimum-value")}}: non-standard pseudo-elements