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