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

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 25/2/18.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Đị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

    demo-tag-meter-element-html5.jpg

    Á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ệtChromeIEFireFoxSafariOpera
    Phiên bản8.010.016.06.011.0
    Thuộc tính thẻ:

    Thuộc tínhGiá trịMô tả
    formform_idÁp dụng cho một hoặc nhiều form chứa thẻ <meter> này
    highnumberÁp dụng cho khoảng được xem, hiển thị là cao
    lownumberÁp dụng cho khoảng được xem, hiển thị là thấp
    maxnumberLà giá trị cao nhất của phạm vi đo lường
    minnumberLà giá trị nhỏ nhất của phạm vi đo lường
    optimumnumberLà giá trị tối ưu tốt nhất trong khoảng quy định
    valuenumberGiá 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:
    demo-su-dung-the-meter-kiem-tra-tieu-de-dat-chuan-seo-hay-chua.jpg
    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
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 25/2/18


Chủ để tương tự : Thẻ <METER>
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Counting Number Animation, Count Up trên themes Flatsome như thế nào? 11/6/23
Ngôn ngữ lập trình CSS, HTML, HTML5 Add thêm chatbox fanpage Facebook vào website mới nhất 2022 8/9/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào? 21/7/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào? 9/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Tạo hiệu ứng nhấp nháy bằng CSS như thế nào? 14/9/21