<meter> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:meter

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. meter

Introduction

The meter element shows a value displayed in the context of the range of possible values.

The meter Element summary

Item value
Element:meter
Local Attributes: value, min, max, low, high, optimum, form
Contents: Phrasing content
Tag Style: Start and end tags
New in HTML5? Yes
Changes in HTML5 N/A
Style ConventionNone

The min and max attributes set the bounds for the range of possible values.

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 under which a value is considered to be too low.

The high attribute sets the value over which a value is considered to be too high.

The optimum attribute specifies the "just right" value.

Tag-Specific Attributes

The following table shows the attributes that are specific to the <meter> tag.

Attribute Require Value Description
value Required number sets the current value of the meter or gauge. This must be between the minimum and maximum values.
form Optional form-id sets the <meter> element with a <form> element.
high Optional number sets the range that is considered to be a high value.
low Optionalnumber sets the range that is considered to be a low value.
max Optional number sets the maximum value of the range.
min Optional number sets the minimum value of the range.
optimum Optional number sets what value is the optimal value for the gauge.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <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;<!--   w  w w .j a  v a 2  s.  c o  m-->
   };
}

      </script>  
   </body>
</html>

Related Tutorials