What does the html5 meter tag mean? Introduction to the usage and attributes of html5 meter tag-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

寻∝梦

Aug 18, 2018 pm 05:19 PM

html5

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>

Copy after login

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 of this Website

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