Thẻ <PROGRESS> 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,237
    Đã được thích:
    936
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Định nghĩa :

    Thẻ <PROGRESS> là thẻ hỗ trợ hiển thị mức độ hoàn thành quá trình nhiệm vụ đưa ra đạt mức bao nhiêu bằng màu sắc trực quan cho người dùng nhìn thấy. Cách sử dụng thẻ PROGRESS này rất đơn giản về dễ dàng sử dụng khi được kết hợp với js, JavaScript hiển thị ở chế độ trực quan.

    Áp dụng:

    Thẻ này thường được áp dụng để mô tả quá trình download đạt bao nhiêu %, hoặc mô tả tiến tính gõ tiêu đề, mô tả, description của web đã đạt chuẩn hay chưa cho người dùng nhìn vào dễ hiểu hơn là con số. Hoặc thẻ này được dùng trong plugin seo yoast Wordpress vẫn thường sử dụng để đo lường tiêu đề bài viết, mô tả bài viết đã đạt chuẩn chưa.

    Cú pháp:
    Mã:
    <progress value="80" max="100"></progress>
    Kêt quả hiện thị bên ngoài

    the-tag-progress-trong-html.jpg

    Hỗ trợ:
    • Thẻ <progress> 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ính thẻGiá trịMô tả về thẻ
    maxnumber (dạng số)Chỉ định tối đa số lượng được yêu cầu, vượt quá sẽ bằng số max này
    valuenumber (dạng số)Chỉ định giá trị truyền vào đang thực hiện được bao nhiêu so với số max ở trên
    Ví dụ: kết hợp javascript, js truyền dữ liệu vào value của thẻ <progress>
    • 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 đã gần đạt chuẩn 70 ký tự đưa ra chưa?
    demo-the-progress-html5-tag.jpg
    Cách 1:
    Mã:
    <input name="TieuDe" id="txtTieuDe" onkeyup="CheckTieuDe(this);" type="text">
    <progress class="progresstitle" value="0" max="70"></progress>
    <!-- javascript -->
    <script type="text/javascript" language="javascript">
    function CheckTieuDe(field) {
        var textLen = field.value.length;
        $(".progresstitle").val(textLen);
    }
    </script>
    
    Cách 2:
    Mã:
    <input name="TieuDe" id="txtTieuDe" onkeyup="CheckTieuDe(this);" type="text">
    <progress id="progresstitle" value="0" max="70"></progress>
    <!-- javascript -->
    <script type="text/javascript" language="javascript">
    function CheckTieuDe(field) {
        var textLen = field.value.length;
        document.getElementById("progresstitle").value = textLen;
    }
    </script>
    
    Xem thêm:

    Ngoài ra để thống kê theo màu sắc đẹp tốt hơn thẻ Progress các bạn có thể tham khảo thẻ Meter trong thống kê ổ đĩa, thống kê tiến trình hoàn thành gõ tiêu để giống trong plugin seo yoast Wordpress theo bài sau: thẻ meter trong html

    Nếu bạn muốn thể hiện 1 tiền trình download, hoặc đổi màu thẻ này theo tiến trình thì xem bài viết sau:
    Mã:
    https://css-tricks.com/html5-progress-element/
     
    Cảm ơn đã xem bài:

    Thẻ <PROGRESS> 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