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,387
    Đã được thích:
    1,018
    Đ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


Chủ để tương tự : Thẻ <PROGRESS>
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thêm fonts .ttf vào website như thế nào? 30/11/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi màu sắc Placeholder CSS thẻ Input HTML 25/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Ý nghĩa thẻ header footer nav aside article section hgroup trong HTML5 22/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi ngôn ngữ, Change Language Recaptcha Google nhứ thế nào 31/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Tắt tự động chạy slider Stop Autoplay Bootstrap Carousel slider như thế nào 7/8/18

Like và Share ủng hộ ITSEOVN