top of page
การสร้างฟิลด์ข้อมูลตัวเลขเเบบ Range
บางครั้งเราไม่จำเป็นต้องกรอกตัวเลขเข้าไปตรงๆ ในเเบบ number เเต่อาจใช้เป็นข้อมูลเเบบ Range ที่เเสดงด้วยเเกนเลื่อนปรับค่า (slider) เพื่อเลือกค่าในช่วงที่กำหนดได้
รูปเเบบ <input type = "range" min "ค่าต่ำสุด" max = "ค่าสูงสุด" value = "ค่าเริ่มต้น" step= "ค่าเพิ่มขึ้น">
โดยที่
type = "range" เป็นการกำหนดให้รับข้อมูลเเบบตัวเลข โดยจะเเสดงออกมาในลักษณะของเเกนเลื่อนปรับค่า (slider) เพื่อให้ผู้ใช้เลื่อนเพื่อเลือกค่าในช่วงที่ช่วงที่กำหนดได้ ซึ่งลักษณะจะเเตกต่างกันไปในเเต่ละเบราว์เซอร์ เช่น
min ใช้ในการกำหนดค่าต่ำสุดของช่วงข้อมูลที่ให้ผู้ใช้เลือก
max ใช้ในการกำหนดค่าสูงสุดของช่วงข้อมูลที่ให้ผู้ใช้เลือก
value ใช้ในการกำหนดค่าเริ่มต้น เช่น
<input type= "range" min="1" max="10" value="2">
step ใช้ในการกำหนดค่าที่จะเพิ่ม/ลดต่อครั้งต่อการคลิกปุ่มปรับค่า 1 ครั้ง หากไม่กำหนดจะเพิ่ม/ลดทีละ 1 เช่น
<input type= "range" min="0" max="1000" value="20" step="20">
ตัวอย่างการกำหนดข้อมูลเเบบ range
<body>
<form>
ระดับความพึงพอใจ(0-10) : <input type= "range" name="satsfy"min="0" max="10" value="5" >
</form>
</body>
ผลที่ได้บนเบราว์เซอร์
bottom of page