Home > Article > Web Front-end > What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag

What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag

寻∝梦Original: 2018-08-18 17:19:074978browse

html5 What does the meter tag mean? The usage and attributes of the html5 meter tag are all here. This article mainly introduces the definition and specific usage of the html5 meter tag, as well as an introduction to the attributes of the html5 meter tag

html5 meter tag Definition and Usage:

label defines a weight or measure. Use only for measurements with known maximum and minimum values.

tag defines a scalar measurement within a known range or fractional value. Also known as gauge.

Examples: disk usage, correlation of query results, etc.

Note: The label should not be used to indicate progress (in a progress bar). If labeling a progress bar, use the tag.

html5 Example of meter tag:

Use the meter element to measure data within a given range (gauge):

Three tenths

60%

Attributes of html5 meter tag:

What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag

Usage of html5 meter tag:

<!doctype html>
<html>
<dead>
<meta charset="UTF-8">
<style type="text/css">
#la{
width:200px;
}
</style>
<script>
function test(){
var kk = document.getElementById("la");
var cc = document.getElementById("cc");
   kk.value=cc.value;
}
</script>
</dead>
<body>
<form oninput="test()"><!--使用表单的oninput事件使得meter的参数值随滑块值变化-->
<meter min="0" max="100" low="10" high="80" value="8" optimum="50" id="la"></meter>
<!--min max是valueq取值范围，low和high以及optimum是对value的判断，value处在不同的区间时，meter得颜色会不同-->
0<input id="cc" type="range" min="0" max="100" value="0">100
</form>
</body>
</html>

Differences between HTML 4.01 and HTML 5: The

tag is a new tag in HTML 5.

Note: The range of the measure must be defined, either in the element's text or in the min/max attributes.

【Related recommendations】

html5 How to use the source tag? Introduction to html5 source tag attributes

#What is the role of the html title tag? A detailed introduction to the html title tag

The above is the detailed content of What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code examples for implementing commonly used interactive elements in html5Next article：Code examples for implementing commonly used interactive elements in html5

See more

What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag

Related articles