วิธาใช้ Input Type Step Attribute ใน HTML

บทนำ

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Step Attribute</title>
  </head>
  <body>
    <form action="" method="get">
      กรอกตัวเลขขั้น 5 (5, 10, 15, 20...):<br>
      <input type="number" name="points" step="5"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

การทำงาน

• step="5" + min="0" → ค่าที่ถูกต้อง: 0, 5, 10, 15, 20...
• step="0.5" → ค่าที่ถูกต้อง: 0, 0.5, 1.0, 1.5...
• step="any" → รับค่าทศนิยมทุกค่า
• ถ้ากรอกค่าผิด จะแสดง Error: "Please enter a valid value" พร้อมแนะนำค่าที่ใกล้ที่สุด

Input Types ที่รองรับ step

• number, range
• date, month, week, time, datetime-local

ตัวอย่างกับเวลา (step 15 นาที)

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