เจาะลึกช่องในฟอร์ม

โปรดใช้องค์ประกอบและ องค์ประกอบ type ที่เหมาะสมที่สุดกับข้อมูลที่ผู้ใช้ป้อนเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด

ช่วยผู้ใช้ป้อนข้อความ

ใช้องค์ประกอบ <input> เพื่อระบุช่องแบบฟอร์ม <input> เป็นตัวเลือกที่ดีที่สุด สำหรับคำ วลี และรายการสั้นๆ สำหรับข้อความที่ยาวขึ้น ให้ใช้องค์ประกอบ <textarea> ซึ่งจะช่วยให้แสดงข้อความได้หลายบรรทัดและช่วยให้ผู้ใช้เห็นข้อความที่ป้อนได้ง่ายขึ้น เนื่องจากองค์ประกอบนี้เลื่อนและปรับขนาดได้

ตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง

คุณต้องการช่วยผู้ใช้กรอกหมายเลขโทรศัพท์ไหม เปลี่ยนแอตทริบิวต์ type เป็น type="tel" สำหรับ <input> ผู้ใช้ในอุปกรณ์เคลื่อนที่จะได้รับแป้นพิมพ์บนหน้าจอที่ปรับเปลี่ยนแล้ว เพื่อให้ป้อนหมายเลขโทรศัพท์ได้เร็วขึ้น

สำหรับอีเมล ให้ใช้ type="email" อีกครั้งที่แป้นพิมพ์บนหน้าจอที่ปรับแล้วจะปรากฏขึ้น ใช้แอตทริบิวต์ required เพื่อกำหนดให้ช่องแบบฟอร์มเป็นแบบบังคับ เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะตรวจสอบว่าอินพุตมีค่าและเป็นค่าที่ถูกต้องหรือไม่ ในกรณีนี้คือตรวจสอบว่าอินพุตเป็นอีเมลที่มีรูปแบบถูกต้องหรือไม่

ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทอินพุตต่างๆ นอกจากนี้ ยังมีฟีเจอร์การตรวจสอบในตัวด้วย

ช่วยผู้ใช้กรอกวันที่

คุณต้องการเริ่มการเดินทางครั้งถัดไปเมื่อใด ใช้ type="date" เพื่อช่วยผู้ใช้กรอกวันที่ เบราว์เซอร์บางรายการจะแสดงรูปแบบเป็นตัวยึดตำแหน่ง เช่น yyyy-mm-dd, ซึ่งแสดงวิธีป้อนวันที่

เบราว์เซอร์สมัยใหม่ทั้งหมดมีอินเทอร์เฟซที่กำหนดเองสำหรับการเลือกวันที่ในรูปแบบของเครื่องมือเลือกวันที่

ช่วยผู้ใช้เลือกตัวเลือก

หากต้องการให้ผู้ใช้เลือกหรือยกเลิกการเลือกตัวเลือกใดตัวเลือกหนึ่งได้ ให้ใช้ type="checkbox" คุณต้องการเสนอตัวเลือกหลายรายการไหม มีทางเลือกมากมายให้คุณเลือกใช้ตามกรณีการใช้งาน ก่อนอื่น ให้ดูวิธีแก้ปัญหาที่เป็นไปได้หากผู้ใช้ควรเลือกได้เพียงตัวเลือกเดียว

คุณสามารถใช้องค์ประกอบ <input> หลายรายการที่มี type="radio" และค่า name เดียวกันได้ ผู้ใช้จะเห็นตัวเลือกทั้งหมดพร้อมกัน แต่เลือกได้เพียงตัวเลือกเดียว

อีกตัวเลือกหนึ่งคือการใช้องค์ประกอบ <select> ผู้ใช้สามารถเลื่อนดูรายการตัวเลือกที่มีและเลือกตัวเลือกใดตัวเลือกหนึ่ง

สำหรับกรณีการใช้งานบางอย่าง เช่น การเลือกช่วงตัวเลข <input>ประเภท range อาจเป็นตัวเลือกที่ดี

คุณจำเป็นต้องให้ผู้ใช้เลือกได้หลายตัวเลือกไหม ใช้องค์ประกอบ <select> ที่มีแอตทริบิวต์ multiple หรือองค์ประกอบ <input> หลายรายการที่มีประเภท checkbox

คุณยังใช้ <input> ร่วมกับองค์ประกอบ <datalist> ได้ด้วย ซึ่งจะทำให้คุณมีทั้งช่องข้อความและรายการองค์ประกอบ <option>

ตรวจสอบว่าผู้ใช้กรอกข้อมูลประเภทต่างๆ ได้

นอกจากนี้ ยังมีประเภทอินพุตอื่นๆ สำหรับกรณีการใช้งานที่เฉพาะเจาะจง

มี <input> ประเภท color เพื่อให้ผู้ใช้มีเครื่องมือเลือกสีใน เบราว์เซอร์ที่รองรับ และยังมีประเภทอื่นๆ อีกด้วย หากต้องการให้ผู้ใช้ ป้อนรหัสผ่านได้ ให้ใช้ <input> กับ type="password" ระบบจะซ่อนอักขระทุกตัว ที่ป้อนด้วยเครื่องหมายดอกจัน ("*") หรือจุด ("•") เพื่อให้มั่นใจว่า จะอ่านรหัสผ่านไม่ได้

คุณต้องการรวมโทเค็นความปลอดภัยที่ไม่ซ้ำกันไว้ในข้อมูลแบบฟอร์มไหม ใช้ <input> กับ type="hidden" ผู้ใช้จะดูหรือแก้ไขค่าของ <input> ประเภท hidden ไม่ได้

หากต้องการให้ผู้ใช้อัปโหลดและส่งไฟล์ได้ ให้ใช้ <input> กับ type="file"

นอกจากนี้ คุณยังกำหนดองค์ประกอบที่กำหนดเองได้หากมีกรณีการใช้งานพิเศษ ซึ่งไม่มีองค์ประกอบหรือประเภทในตัวที่เหมาะสม

ช่วยผู้ใช้กรอกแบบฟอร์ม

มีองค์ประกอบและประเภทแบบฟอร์มมากมาย แต่คุณควรเลือกแบบใด

ในกรณีการใช้งานบางอย่าง การเลือกองค์ประกอบและประเภทที่เหมาะสมนั้นทำได้ง่าย เช่น <input type="date"> ส่วนบางรายการก็แล้วแต่กรณี เช่น คุณสามารถใช้องค์ประกอบ <input> หลายรายการร่วมกับ type="checkbox" หรือองค์ประกอบ <select> ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือกระหว่างกล่องรายการและรายการแบบเลื่อนลง

โดยทั่วไปแล้ว โปรดทดสอบแบบฟอร์มกับผู้ใช้จริงเพื่อค้นหาองค์ประกอบและประเภทแบบฟอร์มที่ดีที่สุด

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับช่องแบบฟอร์ม

แหล่งข้อมูล

• องค์ประกอบ <input>
• องค์ประกอบ <textarea>
• องค์ประกอบ <select>
• <input> ประเภท
• องค์ประกอบแบบฟอร์มที่กำหนดเอง