แอตทริบิวต์ type บน <input> เปลี่ยน UI ของมัน แป้นพิมพ์บนหน้าจอ (มือถือ) และการตรวจสอบในตัว การใช้ประเภทที่ถูกต้องช่วยปรับปรุงการใช้งานและให้การตรวจสอบฟรี
html
แอตทริบิวต์ type บน <input> เปลี่ยน UI ของมัน แป้นพิมพ์บนหน้าจอ (มือถือ) และการตรวจสอบในตัว การใช้ประเภทที่ถูกต้องช่วยปรับปรุงการใช้งานและให้การตรวจสอบฟรี
แป้นพิมพ์มือถือปรับตัว — type="email" แสดงปุ่ม @ type="tel" แสดงแป้นตัวเลข type="number" แสดงตัวเลข นี่เพียงอย่างเดียวเป็นการชนะในการใช้งานที่สำคัญบนโทรศัพท์
การตรวจสอบฟรี — type="email" ปฏิเสธ not-an-email เมื่อส่ง min/max ผูกตัวเลข type="url" ตรวจสอบ URL ที่ถูกต้อง — ไม่ต้องมี JavaScript
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- same name = mutually exclusive; only one can be selected -->
การเลือก input type ที่ถูกต้องช่วยให้คุณได้แป้นพิมพ์มือถือที่ดีกว่า ตัวเลือกในตัว และการตรวจสอบในตัวฟรี — ปรับปรุงการเข้าถึงและลดการใช้ JavaScript ที่คุณต้องเขียนเป็นอย่างอื่น
นี่คือการเลือกเล็กน้อยที่มีผลตอบแทน UX ที่ไม่สมดุล