Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define a scalar measurement within a known range in HTML
To define a scalar measurement within a known range or a fractional value, we use <meter> tag in HTML. <meter> tag is also called as gauge. For disk usages, relevance of query results etc., we use <meter> tag in HTML.
The <meter> tag is not used to indicate progress bar, If we want to indicate progress bar, we use <progress> tag. For best accessibility it’s better to use <label> tag while working on <meter> tag.
Syntax
Following is the usage of <meter> tag in HTML −
<meter value="" min="" max=""></meter>
Example
Following example where we are trying to define a scalar measurement within a known range using the <meter> tag −
<!DOCTYPE html> <html> <head> <title>HTML meter Tag</title> </head> <body> <meter value = "6" min = "0" max = "10">6 out of 10</meter> <br /> <p>gauge value can be seen here</p> </body> </html>
Attributes used in <meter> tag
Attributes used in meter tag is shown below −
form − The value used for form attribute is form_id and it is used to specify that, which form the <meter> belongs to.
high − The value used for high attribute is number and it is used to specify the range that is considered as high value.
low − The value used for low attribute is number and it is used to specify the range that is considered as low value.
max − The value used for max is number, and it is used to specify the maximum value of the range.
min − The value used for min is number, and it is used to specify the minimum value of range, by default the min value is 0.
optimum − The value used for optimum attribute is number, and it is used to specify what value is optimal value for the gauge.
value − The value for value attribute is number and it is compulsory required which specifies the current value of gauge.
Example
In this examples we are creating various meters by passing different values to the attributes, min, max, low and, high −
<!DOCTYPE html> <html> <body> <h1 style="color: blue;"> TutorialsPoint </h1> <p>Meter Element</p> <meter value="5" min="0" max="15" low="1" high="10"></meter> <p>Meter Element With Decimal Value</p> <meter value="0.8" min="0" max="1"></meter> <p> Meter element , value is below low attribute </p> <meter value="1" min="0" max="15" low="3" high="9"></meter> <p> Meter element , value is above high attribute </p> <meter value="10" min="0" max="10" low="3" high="9"></meter> </body> </html>
The inequalities that hold the attributes are
min <= value <= max
if low is specified: min <= low <= max
if high is specified: min <= high <= max
if optimum is specified: min <= optimum <= max
if both low and high are specified: low <= high
Example
Following is another example −
<!DOCTYPE html> <html lang> <body> <b>Meter without value</b> <meter></meter> <br/><br/> <b>Meter with value</b> <meter value="0.5"></meter> <br/><br/> <b>Meter with value, min and max attribute</b> <meter min="0" max="100" value="15"></meter> <br/><br/> <b>Meter when "min <= value < low"</b> <meter min="0" max="100" value="15" low="30" high="85"></meter> <br/><br/> <b>Meter when "high < value <= max"</b> <meter min="0" max="100" value="80" low="30" high="85"></meter> <br/><br/> <b>Meter when "low <= value <= high"</b> <meter min="0" max="100" value="50" low="30" high="85"></meter> <br/><br/> <b>Meter with optimum attribute</b> <meter min="0" max="100" value="24" low="30" high="85" optimum="80"></meter> <br/><br/> <b>Meter with optimum attribute</b> <meter min="0" max="100" value="80" low="30" high="85" optimum="20"></meter> </body> </html>
140 Views
