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

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


Chủ để tương tự : Thẻ <PROGRESS>
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