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

ฉันสามารถใช้ฟิลด์ในแบบฟอร์มใดได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตรวจสอบความเข้าใจ

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

แหล่งข้อมูล

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