พัฒนาเว็บไซต์ด้วย HTML5

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

แท็ก <meter> ใน HTML5 ใช้เพื่อแสดงข้อมูลที่เป็นค่าตัวเลขเชิงปริมาณ (quantitative value) โดยทั่วไปจะใช้ในการแสดงค่าความก้าวหน้า (progress) หรือระดับของสิ่งใดสิ่งหนึ่ง โดยค่าที่แสดงจะต้องเป็นค่าที่อยู่ในขอบเขตที่กำหนด เช่น คะแนน, เปอร์เซ็นต์, หรือระดับการใช้งานต่างๆ แท็กนี้จะทำให้ผู้ใช้เห็นข้อมูลในลักษณะของกราฟหรือแถบแสดงผลแบบสเกล

การใช้งานเบื้องต้นของ <meter>

โครงสร้างพื้นฐานในการใช้งาน <meter> มีดังนี้

HTML
<meter value="ค่าปัจจุบัน" min="ค่าต่ำสุด" max="ค่าสูงสุด">
    ข้อความที่จะแสดงหากเบราว์เซอร์ไม่รองรับ
</meter>
  • value คือค่าปัจจุบันที่จะแสดงในแถบ
  • min คือค่าต่ำสุด (เริ่มต้นที่ 0 หากไม่กำหนด)
  • max คือค่าสูงสุดที่แสดงผล (ต้องมากกว่า min)

ตัวอย่างการใช้งาน

แสดงระดับแบตเตอรี่

HTML
<label for="battery">ระดับแบตเตอรี่:</label>
<meter id="battery" value="0.6" min="0" max="1">60%</meter>

ในตัวอย่างนี้แสดงว่าค่าแบตเตอรี่เหลืออยู่ 60% (หรือ 0.6 ในระบบสัดส่วน 0-1)

แสดงคะแนนสอบ

HTML
<label for="exam">คะแนนสอบ:</label>
<meter id="exam" value="75" min="0" max="100">75/100</meter>

แสดงคะแนนสอบ 75 จากคะแนนเต็ม 100

แสดงความจุพื้นที่เก็บข้อมูล

HTML
<label for="storage">พื้นที่เก็บข้อมูลที่ใช้งาน:</label>
<meter id="storage" value="30" min="0" max="100">30 GB จาก 100 GB</meter>

แสดงให้เห็นว่าใช้พื้นที่เก็บข้อมูลไปแล้ว 30 GB จากความจุสูงสุด 100 GB

แสดงค่าความเสี่ยง (ใช้ low และ high)

HTML
<label for="risk">ค่าความเสี่ยง:</label>
<meter id="risk" value="3" min="0" max="10" low="2" high="8">ค่าความเสี่ยงปานกลาง</meter>

ตัวอย่างนี้แสดงค่าความเสี่ยงเป็นตัวเลข โดยมีช่วงที่ถือว่าความเสี่ยงต่ำ (low=2) และความเสี่ยงสูง (high=8) และค่าปัจจุบันคือ 3 ซึ่งอยู่ในช่วงเสี่ยงปานกลาง

แสดงความคืบหน้าของโครงการ (ใช้ optimum)

HTML
<label for="progress">ความคืบหน้าโครงการ:</label>
<meter id="progress" value="80" min="0" max="100" optimum="90">80% เสร็จสมบูรณ์</meter>

ในตัวอย่างนี้ optimum="90" แสดงว่าความคืบหน้าที่ดีที่สุดคือ 90% แต่ค่าในขณะนี้คือ 80% ซึ่งใกล้เคียง

คุณสมบัติเพิ่มเติม

  • low ระบุช่วงที่ถือว่าต่ำกว่ามาตรฐาน
  • high ระบุช่วงที่ถือว่าสูงเกินมาตรฐาน
  • optimum ระบุค่าที่เหมาะสมที่สุด

ข้อสังเกต

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

การประยุกต์ใช้งานแท็ก <meter> สามารถทำให้หน้าเว็บมีความเข้าใจง่าย และเป็นประโยชน์ต่อผู้ใช้ในการรับรู้ข้อมูลเชิงปริมาณอย่างมีประสิทธิภาพ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ