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

ฉันใช้ช่องแบบฟอร์มใดได้บ้าง

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

ช่วยผู้ใช้กรอกข้อความ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

มีอินพุตประเภทอื่นๆ เพิ่มเติมสําหรับ Use Case ที่เฉพาะเจาะจง

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

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