ฉันใช้ช่องแบบฟอร์มใดได้บ้าง
เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด โปรดใช้องค์ประกอบ type
ที่เหมาะสมกับข้อมูลที่ผู้ใช้ป้อนมากที่สุด
ช่วยให้ผู้ใช้ป้อนข้อความ
หากต้องการให้ผู้ใช้มีช่องแบบฟอร์มสำหรับแทรกข้อความ ให้ใช้องค์ประกอบ <input>
เป็นตัวเลือกที่ดีที่สุดสำหรับข้อความคำเดียวและข้อความสั้นๆ
สำหรับข้อความที่ยาวขึ้น ให้ใช้องค์ประกอบ <textarea>
วิธีนี้จะช่วยให้ใส่ข้อความได้หลายบรรทัดและทำให้ผู้ใช้เห็นข้อความที่ป้อนได้ง่ายขึ้น เนื่องจากองค์ประกอบสามารถเลื่อนและปรับขนาดได้
ตรวจสอบว่าผู้ใช้ป้อนข้อมูลในรูปแบบที่ถูกต้อง
ต้องการช่วยผู้ใช้กรอกหมายเลขโทรศัพท์ไหม
เปลี่ยนแอตทริบิวต์ type
เป็น type="tel"
สำหรับ <input>
ผู้ใช้อุปกรณ์เคลื่อนที่จะได้รับการปรับเปลี่ยนแป้นพิมพ์บนหน้าจอให้รวดเร็ว ทำให้สามารถป้อนหมายเลขโทรศัพท์ได้เร็วและง่ายขึ้น
สำหรับอีเมล ให้ใช้ type="email"
แป้นพิมพ์บนหน้าจอที่ปรับแล้วจะปรากฏขึ้นอีกครั้ง
ใช้แอตทริบิวต์ required
เพื่อกำหนดให้ต้องกรอกข้อมูลในช่องในแบบฟอร์ม
เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะตรวจสอบว่าอินพุตดังกล่าวมีค่าและถูกต้อง ในกรณีนี้คืออีเมลที่จัดรูปแบบดี
ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทอินพุตต่างๆ รวมถึงมีฟีเจอร์การตรวจสอบในตัวด้วย
ช่วยให้ผู้ใช้กรอกวันที่
คุณต้องการเริ่มต้นการเดินทางครั้งถัดไปเมื่อใด
ใช้ type="date"
เพื่อช่วยให้ผู้ใช้กรอกวันที่ได้
บางเบราว์เซอร์จะแสดงรูปแบบเป็นตัวยึดตําแหน่ง เช่น yyyy-mm-dd
ซึ่งแสดงวิธีป้อนวันที่
เบราว์เซอร์สมัยใหม่ทั้งหมดมีอินเทอร์เฟซที่กำหนดเองสำหรับการเลือกวันที่ในรูปแบบเครื่องมือเลือกวันที่
ช่วยผู้ใช้เลือกตัวเลือก
ใช้ type="checkbox"
เพื่อให้ผู้ใช้เลือกหรือยกเลิกการเลือกตัวเลือกที่เป็นไปได้ 1 ตัวเลือก
ต้องการเสนอตัวเลือกหลายรายการไหม
ทั้งนี้มีทางเลือกต่างๆ มากมาย ทั้งนี้ขึ้นอยู่กับ Use Case ของคุณ
ขั้นแรก เรามาดูวิธีการแก้ปัญหาที่อาจเป็นไปได้หากผู้ใช้ควรเลือกได้เพียงตัวเลือกเดียวเท่านั้น
คุณใช้องค์ประกอบ <input>
หลายรายการกับ type="radio"
และค่า name
เดียวกันได้ ผู้ใช้จะเห็นตัวเลือกทั้งหมดพร้อมกัน แต่เลือกได้เพียงตัวเลือกเดียว
อีกตัวเลือกหนึ่งคือการใช้องค์ประกอบ <select>
ผู้ใช้จะเลื่อนดูรายการตัวเลือกที่มีและเลือก 1 ตัวเลือกได้
สำหรับการใช้งานในบางกรณี เช่น การเลือกช่วงตัวเลข <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 type="files">
<input type="file" multiple>
<input type="multiple-files">
type="text"
และ type="password"
แตกต่างกันอย่างไร
type="password"
type="password"
อักขระทุกตัวที่ป้อนจะถูกปิดบังด้วยเครื่องหมายดอกจัน (*
) หรือจุด (•
)type="password"