TOC

This article is currently in the process of being translated into Thai (~94% done).

Form validation using HTML5:

Numbers as spinboxes

นอกจากจะมีข้อมูลที่เป็นข้อความที่ต้องกรอกแล้ว ก็ยังมีตัวเลข เราก็ต้องมีการ validation ตัวเลขด้วยตัวแปร number สมมติว่าเราให้สุ่มเลือกตัวเลข ก็เป็นไปได้ที่ผู้ใช้จะเลือก -5 (ติดลบ), 3.75 (ทศนิยม) ไม่ใช่เลข 0-10 ที่เราต้องการ เพราะฉะนั้น เราต้องตั้งค่าจำกัดให้กับตัวเลข

เราสามารถจำกัดขอบเขตของตัวเลขและการเพิ่มเป็นช่วงๆ เช่น เราตั้งค่าการเพิ่มทีละ 1 (step) เราจะเรียกการแสดงผลนี้ว่า spinbox

เราจะมาดูตัวอย่างง่ายๆของ spinbox ที่ตั้งค่าการเพิ่มทีละ 1 และ ไม่จำกัดค่าสูงสุด

<form>
<input type="number" required>
<input type="submit" value="Submit Now!">
</form>

ทีนี้เราจะมาลองจำกัด ขอบเขต, ค่าต่ำสุด, และค่าสูงสุด 10 – 20 ดังตัวอย่างต่อไปนี้

<form>
<input type="number" min="10" max="20" required>
<input type="submit" value="Submit Now!">
</form>

ตั้งค่าการเพิ่มเป็นขั้นๆ เราจะใช้ตัวแปร step จะทำให้การกรอกข้อมูลเร็วขึ้น ไม่ต้องเพิ่มทีละ 1 ดังตัวอย่างต่อไปนี้ จะเป็นการเพิ่มทีละ 2

<form>
<input type="number" min="10" max="20" step="2" value="16" required>
<input type="submit" value="Submit Now!">
</form>

Browser บางตัวจะเปลี่ยนสีเครื่องหมายลูกศรเป๋็นสีเทา ถ้าเราพยายามที่จะใส่ค่าเกินขอบเขตที่กำหนด

สรุป

  • การใช้ input แบบ number จะทำให้ผู้ใช้สามารถกรอกข้อมูลได้แค่ตัวเลข
  • Step จะมีค่าเป็น 1 และเปลี่ยนไม่ได้
  • เราสามารถจำกัดค่าต่ำสุดและค่าสูงสุดด้วยตัวแปร min และ max
  • ถ้าตัวเลขไม่ใช่จำนวนเต็ม เช่น 2.2 step ก็จะยังคงเป็น 1 เช่น 2.2, 3.2, …
  • เราสามารถเปลี่ยนค่า step ได้ โดยตัวแปร step
  • เราสามารถตั้งค่าตั้งต้นได้ โดยตัวแปร value
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!