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