แอตทริบิวต์ step กำหนดช่วงตัวเลขที่ยอมรับ (เช่น 0, 2, 4, 6...) ใช้ร่วม min และ max เพื่อกำหนดช่วงค่า
ตัวอย่างพื้นฐาน: Step = 2
<!DOCTYPE html> <html> <head> <title>HTML input step attribute</title> </head> <body> <form> <input type="number" name="points" step="2"><br> <input type="submit" value="Submit"> </form> </body> </html>
ตัวอย่างขั้นสูง: Step เปลี่ยนตามช่วงค่า (100-204 step 10, 205-450 step 2)
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { $('#points').on('input change', function() { var value = $(this).val(); var step = (value < 205) ? 10 : 2; $(this).attr('step', step); $('#value').text(value); $('#step').text(step); }); }); </script> </head> <body> <div>Value: <span id="value"></span></div> <div>Current step: <span id="step"></span></div> <div><input id="points" type="range" value="100" min="100" max="450" /></div> </body> </html>
ใช้ JavaScript/jQuery เปลี่ยนแอตทริบิวต์ step แบบไดนามิกตามค่าปัจจุบัน ทำให้ช่วงค่าต่างๆ มี step ต่างกันได้
