Thẻ <METER> Element Tag trong HTML5 cách sử dụng

Định nghĩa:

Thẻ <METER> là thẻ hỗ trợ hiển thị tiến trình, 1 thước đo trong 1 phạm vi giá trị cho trước hoặc được truyền vào dưới dạng màu sắc thay đổi liên tục theo giá trị mà các thuộc tính thẻ được truyền vào dưới dạng trực quan dễ nhìn nhận biết. Thẻ <METER> khá dễ sử dụng khi kết hợp với JavaScript, js.

Demo



Áp dụng:

Thẻ này thường được áp dụng để đo lượng dung lượng ổ đĩa đang bao nhiêu MB, bao nhiêu % và đang còn bao nhiêu dung lượng ổ đĩa, hoặc trên lập trình web thẻ này còn dùng để đo lường khi ta gõ tiêu đề bài viết, thẻ mô tả xem đã đạt chuẩn SEO hay chưa, nếu chưa đạt chuẩn thì màu đỏ, đạt chuẩn chuyển sang màu xanh giống như thẻ PROGRESS, trong plugin seo yoast Wordpress vẫn thường sử dụng để đo lường.

Cú pháp hiển thị giống Demo bên trên:

Mã:

<meter value="20" min="0" max="100"></meter>
<meter value="0.7"></meter>
<meter min="0" max="71" low="49" high="69" value="70"></meter>

Hỗ trợ:

• Thẻ <METER> là 1 thẻ mới trong bộ thẻ HTML5

Trình duyệt	Chrome	IE	FireFox	Safari	Opera
Phiên bản	8.0	10.0	16.0	6.0	11.0

Thuộc tính thẻ:

Thuộc tính	Giá trị	Mô tả
form	form_id	Áp dụng cho một hoặc nhiều form chứa thẻ <meter> này
high	number	Áp dụng cho khoảng được xem, hiển thị là cao
low	number	Áp dụng cho khoảng được xem, hiển thị là thấp
max	number	Là giá trị cao nhất của phạm vi đo lường
min	number	Là giá trị nhỏ nhất của phạm vi đo lường
optimum	number	Là giá trị tối ưu tốt nhất trong khoảng quy định
value	number	Giá trị hiện tại của khoảng, phạm vi xem

Đổi các thuộc tính thẻ:

• Các thuộc tính thẻ như min, max low, high, optimum sẽ đổi màu khi giá trị tương ứng được cài đặt ban đầu.
• Để đổi màu các thẻ mặc định này theo ý muốn bạn dùng code css sau thêm vào header là được.

HTML:

meter {
border: none;
width: 100%;
height: 20px;
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
margin-bottom:10px;
}
/* WebKit */
meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
meter::-webkit-meter-optimum-value {
background: #86CC00;
}
meter::-webkit-meter-suboptimum-value {
background: #EC070F;
}
meter::-webkit-meter-even-less-good-value  {
background: #CC4600;
}
/* Firefox */
meter::-moz-meter-bar {
border-radius: 3px;
}
meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #EC070F;
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}

Các phần tử WebKit/Blink

HTML:

::-webkit-meter-inner-element
::-webkit-meter-bar
::-webkit-meter-even-less-good-value
::-webkit-meter-suboptimum-value

Ví dụ sử dụng thẻ: kết hợp javascript truyền dữ liệu vào thẻ <METER>

• Ví dụ muốn hiển thị tiền trình thực hiện gõ tiêu đề bài viết, và kiểm tra xem tiêu đề bài viết đạt chuẩn chưa? giống trong plugin seo yoast Wordpress thì làm như sau:

Cách 1:

Mã:

<input name="TieuDe" id="txtTieuDe" onkeyup="CheckTieuDe(this);" type="text">
<meter class="meterstitle" min="0" max="71" low="49" high="69" optimum="50" value="0"></meter>
<script type="text/javascript" language="javascript">
function CheckTieuDe(field) {
    var textLen = field.value.length;
    $(".meterstitle").val(textLen);
}
</script>

Cách 2:

Mã:

<input name="TieuDe" id="txtTieuDe" onkeyup="CheckTieuDe(this);" type="text">
<meter id="meterstitle" min="0" max="71" low="49" high="69" optimum="50" value="0"></meter>
<script type="text/javascript" language="javascript">
function CheckTieuDe(field) {
    var textLen = field.value.length;
    document.getElementById("meterstitle").value = textLen;
}
</script>

Xem thểm:

Ngoài ra để thống kê download dữ liệu hoặc thẻ thống kê tương tư thẻ meter các bạn có thể xem bài viết về thẻ progress sau: thẻ progress trong html