แอตทริบิวต์ max ของเอลิเมนต์ <meter> ใน HTML

แอตทริบิวต์ max คืออะไร?

แอตทริบิวต์ max ของเอลิเมนต์ <meter> ใช้กำหนดค่าสูงสุด (Upper bound) ของเกจวัดค่า <meter> เอลิเมนต์นี้ใช้แสดงค่าที่อยู่ในช่วงที่กำหนด เช่น ระดับมลพิษของน้ำ โดยใช้แอตทริบิวต์ min และ max กำหนดช่วงค่า

รูปแบบการเขียน (Syntax)

<meter max="number">

number คือค่าตัวเลขทศนิยมที่กำหนดค่าสูงสุดของ meter

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

ตัวอย่างแสดงระดับความบริสุทธิ์ของน้ำ โดยใช้ <meter> พร้อมแอตทริบิวต์ min, max, low, high, และ value:

<!DOCTYPE html>
<html>
<body>
  <h2>Water Levels</h2>
  <p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
  <p>TDS Level <meter min="0" low="20" high="80" max="100" value="60"></meter></p>
</body>
</html>

คำอธิบายตัวอย่าง

Impurity Level: ค่าสูงสุด 100, ค่าปัจจุบัน 85 (อยู่ในโซน high เนื่องจาก > 95)
TDS Level: ค่าสูงสุด 100, ค่าปัจจุบัน 60 (อยู่ในโซนปกติ เนื่องระหว่าง low 20 และ high 80)

แอตทริบิวต์สำคัญของ <meter>

แอตทริบิวต์	คำอธิบาย
`min`	ค่าต่ำสุด (Default: 0)
`max`	ค่าสูงสุด (Default: 1)
`value`	ค่าปัจจุบัน (บังคับ)
`low`	เกณฑ์ค่าต่ำ
`high`	เกณฑ์ค่าสูง
`optimum`	ค่าที่เหมาะสมที่สุด

หมายเหตุ: <meter> ไม่ควรใช้สำหรับแถบความคืบหน้า (Progress bar) ให้ใช้ <progress> แทน