วิธาใช้แอตทริบิวต์ Step ใน HTML

บทนำ

แอตทริบิวต์ step กำหนดช่วงค่าที่ถูกต้องสำหรับ Input ประเภทตัวเลข/วันที่/เวลา ใช้ร่วม min และ max

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Step Attribute</title>
  </head>
  <body>
    <form action="/cgi-bin/hello_get.cgi" method="get">
      กรอกตัวเลขขั้น 4 (4, 8, 12, 16...):<br>
      <input type="number" name="points" step="4"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

การทำงาน

• step="4" + min="0" → ค่าที่ถูกต้อง: 0, 4, 8, 12, 16...
• step="0.01" → ทศนิยม 2 ตำแหน่ง
• step="any" → รับทุกค่า
• กรอกผิด → Error: "Please enter a valid value" + แนะนำค่าที่ใกล้ที่สุด 2 ค่า

Input Types ที่รองรับ

• number, range
• date (วัน), month (เดือน), week (สัปดาห์), time (วินาที), datetime-local (วินาที)

ตัวอย่าง Time Step 15 นาที

<input type="time" name="appt" step="900">
<!-- 900 วินาที = 15 นาที → 00:00, 00:15, 00:30... -->