สร้างแบบฟอร์มที่อยู่ตามแนวทางปฏิบัติแนะนำ

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

วิธีการนำไปใช้งาน

ด้านล่างนี้คือหลักเกณฑ์ที่สำคัญที่สุดสำหรับการสร้างแบบฟอร์มที่อยู่ที่มีประสิทธิภาพ

ใช้ HTML ที่ถูกต้องและมีความหมาย

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

• <form>, <input>, <label> และ <button>
• type, autocomplete และ inputmode

ซึ่งจะช่วยเปิดใช้ฟังก์ชันการทำงานของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัป

ใช้องค์ประกอบ <label> เพื่อติดป้ายกำกับช่องแบบฟอร์มสำหรับการป้อนข้อมูล

หากต้องการติดป้ายกำกับ <input>, <select> หรือ <textarea> ให้ใช้ <label> เชื่อมโยงป้ายกำกับกับอินพุตโดยกำหนดให้แอตทริบิวต์ for ของป้ายกำกับมีค่าเดียวกับ id ของอินพุต

ใช้ประโยชน์จากแอตทริบิวต์ HTML ให้มากที่สุด

ช่วยให้ผู้ใช้ป้อนข้อมูลได้ง่ายๆ โดยใช้แอตทริบิวต์ <input> element <type> ที่เหมาะสมเพื่อแสดงแป้นพิมพ์ที่ถูกต้องบนอุปกรณ์เคลื่อนที่ และเปิดใช้การตรวจสอบความถูกต้องในตัวขั้นพื้นฐานโดยเบราว์เซอร์

ใช้ type="email" สำหรับอีเมลและ type="tel" สำหรับหมายเลขโทรศัพท์เสมอ

<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">

องค์ประกอบ <input>, <select> และ <textarea> ทุกรายการควรมีแอตทริบิวต์ autocomplete ที่เหมาะสม เพื่อปรับปรุงการช่วยเหลือพิเศษและช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำ

ทำให้ปุ่มมีประโยชน์

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

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

ใช้อินพุตชื่อเดียวเมื่อเป็นไปได้

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

อนุญาตให้ใช้ชื่อสากล สำหรับการตรวจสอบความถูกต้อง ให้หลีกเลี่ยงการใช้นิพจน์ทั่วไปที่ตรงกับอักขระละตินเท่านั้น ตัวเลือก "ละตินเท่านั้น" จะยกเว้นผู้ใช้ที่มีชื่อหรืออีเมลซึ่งมีอักขระที่ไม่ได้อยู่ในตัวอักษรละติน อนุญาตให้จับคู่ตัวอักษร Unicode แทน และตรวจสอบว่าแบ็กเอนด์รองรับ Unicode อย่างปลอดภัยทั้งในรูปแบบอินพุตและเอาต์พุต เบราว์เซอร์ที่ทันสมัยรองรับ Unicode ในนิพจน์ทั่วไปเป็นอย่างดี

อนุญาตให้ใช้รูปแบบที่อยู่ที่หลากหลาย

เมื่อสร้างแบบฟอร์มที่อยู่ โปรดคำนึงถึงรูปแบบที่อยู่ที่หลากหลาย แม้จะอยู่ในประเทศเดียวกันก็ตาม อย่าตั้งสมมติฐานเกี่ยวกับที่อยู่ "ปกติ"

ใช้องค์ประกอบ <textarea> รายการเดียวสำหรับที่อยู่ หากเป็นไปได้

<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>

ตัวเลือกนี้เป็นตัวเลือกที่ยืดหยุ่นที่สุดสำหรับรูปแบบที่อยู่ในประเทศและต่างประเทศที่หลากหลาย

หากโมเดลข้อมูลของคุณต้องใช้บรรทัดที่อยู่แยกกัน ให้ใช้ <input> 1 รายการต่อบรรทัดพร้อมโทเค็น address-line1, address-line2 (และ address-line3 หากจำเป็น) autocomplete เพื่อให้การป้อนข้อความอัตโนมัติยังคงทำงานได้ อย่าแยกที่อยู่ตามช่องป้อนข้อมูลที่ไม่มีโทเค็นเหล่านี้ และกำหนดให้ต้องกรอกเฉพาะบรรทัดแรกเท่านั้น

<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">

ช่วยป้องกันไม่ให้ผู้ใช้พลาดฟิลด์ข้อมูลโดยไม่ตั้งใจ

เพิ่มแอตทริบิวต์ required ลงในช่องที่ต้องกรอก

<input type="text" id="city" name="city" autocomplete="address-level2" required>

กลยุทธ์สำรอง

การป้อนข้อความอัตโนมัติเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับการป้อนข้อความอัตโนมัติ ผู้ใช้จะต้องป้อนรายละเอียดที่อยู่ด้วยตนเอง ข้อจำกัด HTML เชิงความหมาย (เช่น type, inputmode และ required) จะยังคงทำงานอย่างเหมาะสมเป็นการตรวจสอบแบบฟอร์มมาตรฐาน