HTML5 การใช้งาน progress Tag

แท็ก <progress> ใน HTML5 ถูกใช้เพื่อแสดงความก้าวหน้าของงานหรืองานที่ต้องทำให้เสร็จ เช่น การดาวน์โหลดไฟล์หรือการประมวลผลใดๆ โดยจะแสดงเป็นแถบความคืบหน้าที่ผู้ใช้งานสามารถมองเห็นได้ แต่ไม่สามารถแก้ไขได้

คุณสมบัติหลักของ <progress>

• ใช้เพื่อแสดงสถานะความคืบหน้าของงาน
• ค่าต่ำสุด (min) เริ่มต้นที่ 0 (ไม่ต้องระบุถ้าเป็นค่าเริ่มต้น)
• สามารถกำหนดค่าความคืบหน้าได้ด้วยการระบุค่า value และ max (ค่าที่ยังเหลือหรือเต็ม)

โครงสร้างพื้นฐานของ <progress>

<progress value="70" max="100"></progress>

ในตัวอย่างนี้ จะได้แถบความคืบหน้าที่แสดงให้เห็นว่าเสร็จสิ้นไปแล้ว 70% จากทั้งหมด 100%

คุณสมบัติที่สำคัญ

1. value: ค่าปัจจุบันของความคืบหน้า (ต้องระบุเป็นตัวเลข เช่น 70)
2. max: ค่าสูงสุดที่ต้องการให้ความคืบหน้าถึง (เช่น 100, ถ้าไม่ระบุ ค่าเริ่มต้นจะเป็น 1)
3. min: ค่าต่ำสุด (ค่าตั้งต้นคือ 0 ไม่สามารถเปลี่ยนแปลงได้)

การใช้งาน <progress> แบบต่างๆ

1. แถบความคืบหน้าแบบระบุค่า

<progress value="40" max="100">40%</progress>

ในตัวอย่างนี้ แสดงแถบความคืบหน้า 40% ของทั้งหมด 100%

2. แถบความคืบหน้าแบบกำลังดำเนินการ (Indeterminate)

ในกรณีที่ไม่สามารถระบุค่าความคืบหน้าได้อย่างชัดเจน เช่น การรอโหลดข้อมูลจากเซิร์ฟเวอร์ ซึ่งยังไม่ทราบเวลาเสร็จสิ้นแน่นอน สามารถใช้ <progress> โดยไม่ต้องใส่ค่า value ได้

<progress></progress>

แถบนี้จะเคลื่อนไหวเองอัตโนมัติ เพื่อบอกให้ผู้ใช้ทราบว่ากำลังดำเนินการอยู่

3. แสดงความคืบหน้าโดยใช้ JavaScript

สามารถอัปเดตค่าความคืบหน้าผ่าน JavaScript เพื่อสร้างแถบความคืบหน้าที่โต้ตอบได้

<progress id="progressBar" value="0" max="100"></progress>
<button onclick="updateProgress()">Update Progress</button>

<script>
  function updateProgress() {
    const progressBar = document.getElementById('progressBar');
    progressBar.value += 10;
  }
</script>

เมื่อผู้ใช้คลิกปุ่ม จะเพิ่มค่าความคืบหน้าให้แถบเพิ่มขึ้นทีละ 10 หน่วย

การประยุกต์ใช้งาน <progress>

1. แสดงสถานะการดาวน์โหลดไฟล์: ใช้ในการแสดงความคืบหน้าของการดาวน์โหลดไฟล์จากอินเทอร์เน็ต
2. แสดงสถานะการอัปโหลดไฟล์: ใช้สำหรับแสดงสถานะการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์
3. แสดงความคืบหน้าในการประมวลผล: ใช้ในการแสดงสถานะการประมวลผลข้อมูลบางอย่างที่ต้องใช้เวลา
4. แสดงสถานะการทำงานในแบบฟอร์ม: ใช้ในการแสดงจำนวนขั้นตอนหรือความคืบหน้าในแบบฟอร์มหลายขั้นตอน

แท็ก <progress> เป็นเครื่องมือที่สะดวกในการแสดงผลแบบ interactive ช่วยให้ผู้ใช้เข้าใจสถานะของงานที่ดำเนินอยู่ และช่วยปรับปรุงประสบการณ์ผู้ใช้ให้ดีขึ้น