ฉันใช้ช่องแบบฟอร์มใดได้บ้าง
โปรดตรวจสอบว่าคุณใช้องค์ประกอบและองค์ประกอบ 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 type="files">
<input type="file" multiple>
<input type="multiple-files">
type="text"
กับ type="password"
แตกต่างกันอย่างไร
type="password"
type="password"
อักขระทุกตัวที่ป้อนจะบดบังด้วยเครื่องหมายดอกจัน (*
) หรือจุด (•
)type="password"