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

Đị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



Hỗ trợ:

• Thẻ <progress> là 1 thẻ mới trong bộ thẻ HTML5.

Trình duyệt	Chrome	IE	FireFox	Safari	Opera
Phiên bản	8.0	10.0	16.0	6.0	11.0

Thuộc tính thẻ

Thuộc tính thẻ	Giá trị	Mô tả về thẻ
max	number (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
value	number (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?

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/