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

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,363
    Đã được thích:
    1,001
    Đ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

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 25/2/18


Like và Share ủng hộ ITSEOVN