HTML Tag Reference - HTML tag <meter>
The meter element shows a value from the range of possible values.
The min and max attributes set the bounds for the range.
These can be expressed using floating-point numbers. The display for the meter element can be broken into three segments: too low, too high, and just right.
The low attribute sets the value considered to be too low, and the high attribute sets the value considered to be too high. The optimum attribute specifies the not-too-high-not-too-low value.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
<meter> |
Yes | No | Yes | Yes | Yes |
What's new in HTML5
The <meter> tag is new in HTML5.
Attribute
| Attribute | Value | Description |
|---|---|---|
| form | form_id | Set one or more owner forms for the <meter> element |
| high | number | Set the high range value |
| low | number | Set the low range value |
| max | number | Set the maximum value of the range |
| min | number | Set the minimum value of the range |
| optimum | number | Set the optimal value for the gauge |
| value | number | Required. Specifies the current value of the gauge |
Global Attributes
The <meter> tag supports the Global Attributes in HTML.
Event Attributes
The <meter> tag supports the Event Attributes in HTML.
Default CSS Settings
None.
Example
<!DOCTYPE HTML>
<html>
<body>
<meter id="mymeter" value="90"
min="10" max="100" low="40" high="80" optimum="60">
</meter>
<p>
<button type="button" value="30">30</button>
<button type="button" value="60">60</button>
<button type="button" value="90">90</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var meter = document.getElementById('mymeter');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
meter.value = e.target.value;
}; <!--from w w w . j a v a 2 s. c om-->
}
</script>
</body>
</html>