CodesJava

Easy learning with example program codes

Meter HTML

HTML <meter> Tag

To specify a scalar measurement with range or in more simple words, to measure data within a given range. the HTML <meter> tag is used. Also known as a gauge, this tag is used to display disk usage, voting population etc. It was introduced in HTML5.

Example 1:

<!DOCTYPE html>
<html>
<body>
<p>Gauge Example 1:</p>
<meter value="10" min="0" max="20">10 out of 20</meter><br>
<p>Gauge Example 2:</p>
<meter value="1">100%</meter>
</body>
</html>

Output:

Explanation:

In the above example, we are using the HTML <meter> tag to display a gauge.

Example 2: Styling Meters using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
meter{  
  width: 400px;  
  height: 40px; 
} 
</style>
</head>
<body>
<p>Gauge Example 1:</p>
<meter value="10" min="0" max="20">10 out of 20</meter><br>
<p>Gauge Example 2:</p>
<meter value="1">100%</meter>
</body>
</html>

Output:

Explanation:

In the above example, we are using the CSS properties to style a gauge.

Tag specific Attributes:

AttributeValueUses
valuenumberUsed to define a value in numbers which can be an integer or a floating point number. It is a required attribute.
formform_idUsed to define a form or multiple forms to which the <meter> element belongs to.
highnumberUsed to define a range which is considered as high value.
lownumberUsed to define a range which is considered as low value.
maxnumberUsed to define the maximum value defined in the range.
minnumberUsed to define the minimum value defined in the range.
optimumnumberUsed to define the optimum value for the gauge.

Global attributes:

The HTML global attributes are supported by the HTML <meter> tag.

Event attributes:

The HTML event attributes are supported by the HTML <meter> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status