ใช้ฟีเจอร์เบราว์เซอร์ข้ามแพลตฟอร์มเพื่อสร้างแบบฟอร์มลงชื่อสมัครใช้ที่ปลอดภัย เข้าถึงได้ และใช้งานง่าย
หากผู้ใช้จำเป็นต้องลงชื่อสมัครใช้เว็บไซต์ของคุณ การออกแบบแบบฟอร์มลงชื่อสมัครใช้ที่ดีจึงเป็นสิ่งสำคัญ โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ใช้การเชื่อมต่อที่ไม่ดี ใช้งานบนอุปกรณ์เคลื่อนที่ กำลังรีบ หรืออยู่ภายใต้ความเครียด แบบฟอร์มลงชื่อสมัครใช้ที่ออกแบบมาไม่ดีจะมีอัตราตีกลับสูง การตีกลับแต่ละครั้งอาจหมายถึงการสูญเสียลูกค้าและผู้ใช้ที่ไม่พอใจ ไม่ใช่แค่การพลาดโอกาสในการลงชื่อสมัครใช้เท่านั้น
วิธีการนำไปใช้งาน
ด้านล่างนี้คือหลักเกณฑ์ที่สำคัญที่สุดในการสร้างแบบฟอร์มลงชื่อสมัครใช้ที่ประสบความสำเร็จ
ใช้ HTML ที่ถูกต้องและมีความหมาย
ใช้ประโยชน์สูงสุดจากองค์ประกอบและแอตทริบิวต์ที่สร้างขึ้นเพื่อสร้างแบบฟอร์ม ดังนี้
<form>,<input>,<label>และ<button>type,autocompleteและinputmode
ซึ่งจะช่วยเปิดใช้ฟังก์ชันการทำงานของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัป
ใช้องค์ประกอบ <label> เพื่อติดป้ายกำกับช่องแบบฟอร์มสำหรับการป้อนข้อมูล
หากต้องการติดป้ายกำกับ <input>, <select> หรือ <textarea> ให้ใช้ <label> เชื่อมโยงป้ายกำกับกับอินพุตโดยกำหนดให้แอตทริบิวต์ for ของป้ายกำกับมีค่าเดียวกับ id ของอินพุต
ใช้ประโยชน์จากแอตทริบิวต์ HTML ให้มากที่สุด
ช่วยให้ผู้ใช้ป้อนข้อมูลได้ง่ายๆ โดยใช้แอตทริบิวต์ <input> element <type> ที่เหมาะสมเพื่อแสดงแป้นพิมพ์ที่ถูกต้องบนอุปกรณ์เคลื่อนที่ และเปิดใช้การตรวจสอบความถูกต้องในตัวขั้นพื้นฐานโดยเบราว์เซอร์
ใช้ type="email" สำหรับอีเมลและ type="tel" สำหรับหมายเลขโทรศัพท์เสมอ
องค์ประกอบ <input>, <select> และ <textarea> ทุกรายการควรมีแอตทริบิวต์ autocomplete ที่เหมาะสม เพื่อปรับปรุงการช่วยเหลือพิเศษและช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำ
ข้อมูลที่ป้อนในช่องชื่อผู้ใช้และอีเมลจะมีตัวระบุ ไม่ใช่ข้อความธรรมดา เพิ่ม spellcheck="false" เพื่อไม่ให้เบราว์เซอร์เขียน URL ใหม่เป็น URL ที่บัญชีไม่ตรงกัน autocorrect และ autocapitalize จะปิดใช้อยู่เสมอสำหรับ input type="email" แต่จำเป็นต้องใช้สำหรับชื่อผู้ใช้ที่ไม่ใช่อีเมล
ทำให้ปุ่มมีประโยชน์
ใช้ <button> สำหรับปุ่ม คุณยังใช้ <input type="submit"> ได้ด้วย แต่ไม่ควรใช้ div หรือองค์ประกอบอื่นๆ ที่สุ่มเลือกมาเพื่อทำหน้าที่เป็นปุ่ม องค์ประกอบปุ่มช่วยให้เข้าถึงได้ง่าย มีฟังก์ชันการส่งแบบฟอร์มในตัว และจัดรูปแบบได้ง่าย
กำหนดค่าให้กับปุ่มส่งแบบฟอร์มแต่ละปุ่มเพื่อระบุว่าปุ่มนั้นทำอะไร ใช้ป้ายกำกับที่ชัดเจนและจดจำได้ เช่น ใช้สร้างบัญชีหรือลงชื่อสมัครใช้แทนดำเนินการต่อหรือส่ง
ใช้อินพุตชื่อเดียวเมื่อเป็นไปได้
อนุญาตให้ผู้ใช้ป้อนชื่อโดยใช้อินพุตเดียว เว้นแต่คุณจะมีเหตุผลที่ดีในการจัดเก็บชื่อ นามสกุล คำนำหน้าชื่อ หรือส่วนอื่นๆ ของชื่อแยกกัน การใช้ช่องป้อนชื่อช่องเดียวจะช่วยให้แบบฟอร์มมีความซับซ้อนน้อยลง ช่วยให้ตัดและวางได้ และทำให้การป้อนข้อความอัตโนมัติง่ายขึ้น
อนุญาตให้ใช้ชื่อสากล สำหรับการตรวจสอบความถูกต้อง ให้หลีกเลี่ยงการใช้นิพจน์ทั่วไปที่ตรงกับอักขระละตินเท่านั้น ตัวเลือก "ละตินเท่านั้น" จะยกเว้นผู้ใช้ที่มีชื่อหรืออีเมลซึ่งมีอักขระที่ไม่ได้อยู่ในตัวอักษรละติน อนุญาตให้จับคู่ตัวอักษร Unicode แทน และตรวจสอบว่าแบ็กเอนด์รองรับ Unicode อย่างปลอดภัยทั้งในรูปแบบอินพุตและเอาต์พุต เบราว์เซอร์ที่ทันสมัยรองรับ Unicode ในนิพจน์ทั่วไปเป็นอย่างดี
แสดงความคืบหน้าของการลงชื่อสมัครใช้
สำหรับแต่ละขั้นตอนในการลงชื่อสมัครใช้ ให้ใช้ส่วนหัวของหน้าและค่าปุ่มที่สื่อความหมายซึ่งระบุอย่างชัดเจนว่าต้องทำอะไรในตอนนี้ และขั้นตอนถัดไปคืออะไร
ใช้แอตทริบิวต์ enterkeyhint ในอินพุตของแบบฟอร์มเพื่อตั้งค่าป้ายกำกับแป้น Enter ของแป้นพิมพ์บนอุปกรณ์เคลื่อนที่ เช่น ใช้ enterkeyhint="previous" และ enterkeyhint="next" ภายในแบบฟอร์มหลายหน้า, enterkeyhint="done" สำหรับอินพุตสุดท้ายในแบบฟอร์ม และ enterkeyhint="search" สำหรับอินพุตการค้นหา
ช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลการลงชื่อสมัครใช้อีกครั้ง
อย่าลืมเพิ่มค่า autocomplete ที่เหมาะสมในแบบฟอร์มลงชื่อสมัครใช้
ซึ่งจะช่วยให้เบราว์เซอร์ช่วยเหลือผู้ใช้ได้โดยการจัดเก็บรายละเอียดการลงชื่อสมัครใช้อย่างปลอดภัยและป้อนข้อมูลในแบบฟอร์มอย่างถูกต้อง หากไม่มีการเติมข้อความอัตโนมัติ ผู้ใช้อาจมีแนวโน้มที่จะจดบันทึกรายละเอียดการลงชื่อสมัครใช้ไว้ในกระดาษ หรือจัดเก็บข้อมูลการลงชื่อสมัครใช้ไว้ในอุปกรณ์อย่างไม่ปลอดภัย
ตรวจสอบอย่างละเอียด
ตรวจสอบความถูกต้องของข้อมูลที่ป้อนทั้งแบบเรียลไทม์และก่อนส่งแบบฟอร์ม ใช้ type="email" สำหรับการป้อนข้อมูลอีเมล โดยเบราว์เซอร์จะตรวจสอบรูปแบบโดยอัตโนมัติ สำหรับรหัสผ่าน ให้ใช้แอตทริบิวต์ pattern เพื่อบังคับใช้ข้อกำหนดด้านความรัดกุมและแสดงข้อความแสดงข้อผิดพลาดที่ชัดเจนเมื่อการตรวจสอบไม่สำเร็จ เพิ่มแอตทริบิวต์ required ลงในช่องที่ต้องกรอกเพื่อป้องกันไม่ให้มีการส่งข้อมูลที่ว่างเปล่า
วางการลงชื่อสมัครใช้ไว้ในองค์ประกอบ <form> ของตัวเอง
ใช้องค์ประกอบ <form> เสมอเมื่อคุณต้องการให้ผู้ใช้ป้อนข้อมูล
อย่ารวมอินพุตไว้ใน <div> และจัดการการส่งข้อมูลอินพุตด้วย JavaScript เท่านั้น โดยทั่วไปแล้ว การใช้องค์ประกอบ <form> จะดีกว่า ซึ่งจะช่วยให้โปรแกรมอ่านหน้าจอและอุปกรณ์ช่วยเหลืออื่นๆ เข้าถึงเว็บไซต์ได้ เปิดใช้ฟีเจอร์ต่างๆ ในตัวของเบราว์เซอร์ ทำให้สร้างการลงชื่อสมัครใช้ที่ทำงานได้ขั้นพื้นฐานสำหรับเบราว์เซอร์รุ่นเก่าได้ง่ายขึ้น และยังคงทำงานได้แม้ว่า JavaScript จะไม่ทำงานก็ตาม
อย่าป้อนข้อมูลซ้ำ
บางเว็บไซต์บังคับให้ผู้ใช้ป้อนอีเมลหรือรหัสผ่าน 2 ครั้ง ซึ่งอาจช่วยลดข้อผิดพลาดสำหรับผู้ใช้บางราย แต่ทำให้ผู้ใช้ทุกคนต้องทำงานเพิ่มขึ้น และเพิ่มอัตราการหยุดกลางคัน การถาม 2 ครั้งยังไม่สมเหตุสมผลในกรณีที่เบราว์เซอร์ป้อนอีเมลโดยอัตโนมัติหรือแนะนำรหัสผ่านที่รัดกุม คุณควรเปิดใช้ให้ผู้ใช้ยืนยันอีเมล (ซึ่งคุณจะต้องทำอยู่แล้ว) และทำให้ผู้ใช้รีเซ็ตรหัสผ่านได้ง่ายหากจำเป็น
เก็บรหัสผ่านไว้เป็นส่วนตัว แต่ให้ผู้ใช้ดูได้หากต้องการ
อินพุตรหัสผ่านควรมี type="password" เพื่อซ่อนข้อความรหัสผ่านและช่วยให้เบราว์เซอร์เข้าใจว่าอินพุตนั้นมีไว้สำหรับรหัสผ่าน (โปรดทราบว่าเบราว์เซอร์ใช้เทคนิคที่หลากหลายเพื่อทำความเข้าใจบทบาทของอินพุตและตัดสินใจว่าจะเสนอให้บันทึกรหัสผ่านหรือไม่)
คุณควรเพิ่มปุ่มสลับแสดงรหัสผ่านเพื่อให้ผู้ใช้ตรวจสอบข้อความที่ป้อนได้ และอย่าลืมเพิ่มลิงก์ลืมรหัสผ่าน
แสดงแป้นพิมพ์ที่เหมาะสมแก่ผู้ใช้อุปกรณ์เคลื่อนที่
ใช้ <input type="email"> เพื่อให้ผู้ใช้มือถือมีแป้นพิมพ์ที่เหมาะสม และเปิดใช้การตรวจสอบอีเมลพื้นฐานในตัวโดยเบราว์เซอร์ โดยไม่ต้องใช้ JavaScript
หากต้องการใช้หมายเลขโทรศัพท์แทนอีเมล <input type="tel"> จะเปิดใช้ปุ่มกดโทรศัพท์บนอุปกรณ์เคลื่อนที่ นอกจากนี้ คุณยังใช้แอตทริบิวต์ inputmode ได้ตามความจำเป็น โดย inputmode="numeric" เหมาะสำหรับหมายเลข PIN
ป้องกันไม่ให้แป้นพิมพ์บนอุปกรณ์เคลื่อนที่บดบังปุ่มลงชื่อสมัครใช้
หากไม่ระมัดระวัง แป้นพิมพ์บนอุปกรณ์เคลื่อนที่อาจบดบังแบบฟอร์มหรือที่แย่กว่านั้นคือบดบังปุ่มลงชื่อสมัครใช้บางส่วน ผู้ใช้อาจยอมแพ้ก่อนที่จะรู้ว่าเกิดอะไรขึ้น
หากเป็นไปได้ ให้หลีกเลี่ยงปัญหานี้โดยแสดงเฉพาะช่องป้อนอีเมล (หรือโทรศัพท์) และรหัสผ่าน รวมถึงปุ่มลงชื่อสมัครใช้ที่ด้านบนของหน้าลงชื่อสมัครใช้ วางเนื้อหาอื่นๆ ไว้ด้านล่าง
ช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำ
คุณสามารถช่วยให้เบราว์เซอร์จัดเก็บข้อมูลอย่างถูกต้องและป้อนข้อมูลอัตโนมัติ เพื่อให้ผู้ใช้ไม่ต้องจำค่าอีเมลและรหัสผ่าน ซึ่งสำคัญอย่างยิ่งบนอุปกรณ์เคลื่อนที่ และสำคัญมากสำหรับการป้อนข้อมูลอีเมลซึ่งมีอัตราการหยุดกลางคันสูง ซึ่งประกอบด้วย 2 ส่วนดังนี้
- แอตทริบิวต์
autocomplete,name,idและtypeช่วยให้เบราว์เซอร์เข้าใจบทบาทของอินพุตเพื่อจัดเก็บข้อมูลที่สามารถใช้สำหรับการป้อนข้อความอัตโนมัติในภายหลัง หากต้องการอนุญาตให้จัดเก็บข้อมูลสำหรับการป้อนข้อความอัตโนมัติ เบราว์เซอร์ที่ทันสมัยยังกำหนดให้อินพุตมีค่าnameหรือidที่เสถียร (ไม่ได้สร้างแบบสุ่มในการโหลดหน้าเว็บหรือการติดตั้งใช้งานเว็บไซต์แต่ละครั้ง) และอยู่ในองค์ประกอบ<form>ที่มีปุ่มsubmit - แอตทริบิวต์
autocompleteช่วยให้เบราว์เซอร์ป้อนข้อมูลที่ป้อนโดยอัตโนมัติได้อย่างถูกต้องโดยใช้ข้อมูลที่จัดเก็บไว้
สำหรับการป้อนอีเมล ให้ใช้ autocomplete="username" เนื่องจากเครื่องมือจัดการรหัสผ่านในเบราว์เซอร์ที่ทันสมัยจะจดจำ username แม้ว่าคุณควรใช้ type="email" และอาจต้องการใช้ id="email" และ name="email" สำหรับการป้อนรหัสผ่าน ให้ใช้ค่า autocomplete ที่เหมาะสมเพื่อช่วยให้เบราว์เซอร์แยกความแตกต่างระหว่างรหัสผ่านใหม่และรหัสผ่านปัจจุบันได้
ใช้ autocomplete="new-password" สำหรับรหัสผ่านใหม่
บังคับ: สำหรับแบบฟอร์มลงชื่อสมัครใช้ ให้ใช้ autocomplete="new-password"
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
เปิดใช้เบราว์เซอร์เพื่อแนะนำรหัสผ่านที่รัดกุม
เบราว์เซอร์ที่ทันสมัยใช้การวิเคราะห์พฤติกรรมเพื่อตัดสินใจว่าจะแสดง UI ของเครื่องมือจัดการรหัสผ่านและแนะนำรหัสผ่านที่รัดกุมเมื่อใด
เครื่องมือสร้างรหัสผ่านในตัวของเบราว์เซอร์ช่วยให้ผู้ใช้และนักพัฒนาซอฟต์แวร์ไม่ต้องคิดว่า "รหัสผ่านที่รัดกุม" คืออะไร เนื่องจากเบราว์เซอร์สามารถจัดเก็บรหัสผ่านได้อย่างปลอดภัยและป้อนข้อความอัตโนมัติได้ตามความจำเป็น ผู้ใช้จึงไม่จำเป็นต้องจำหรือป้อนรหัสผ่าน การสนับสนุนให้ผู้ใช้ใช้ประโยชน์จากเครื่องมือสร้างรหัสผ่านในตัวของเบราว์เซอร์ยังหมายความว่าผู้ใช้มีแนวโน้มที่จะใช้รหัสผ่านที่ไม่ซ้ำกันและรัดกุมในเว็บไซต์ของคุณ และมีแนวโน้มที่จะใช้รหัสผ่านซ้ำน้อยลงซึ่งอาจถูกบุกรุกที่อื่นได้
ช่วยป้องกันไม่ให้ผู้ใช้พลาดการป้อนข้อมูลโดยไม่ตั้งใจ
เพิ่มแอตทริบิวต์ required ลงในทั้งช่องอีเมลและรหัสผ่าน เบราว์เซอร์ที่ทันสมัยจะแสดงข้อความแจ้งและโฟกัสข้อมูลที่ขาดหายไปโดยอัตโนมัติ
อนุญาตให้วางรหัสผ่าน
บางเว็บไซต์ไม่อนุญาตให้วางข้อความในช่องป้อนรหัสผ่าน
การไม่อนุญาตให้วางรหัสผ่านจะสร้างความรำคาญให้แก่ผู้ใช้ ส่งเสริมให้ใช้รหัสผ่านที่จำง่าย (ซึ่งอาจถูกบุกรุกได้ง่ายกว่า) และอาจลดความปลอดภัยลงตามข้อมูลจากองค์กรต่างๆ เช่น ศูนย์ความมั่นคงปลอดภัยไซเบอร์แห่งชาติของสหราชอาณาจักร ผู้ใช้จะทราบว่าไม่อนุญาตให้วางก็ต่อเมื่อพยายามวางรหัสผ่าน ดังนั้นการไม่อนุญาตให้วางรหัสผ่านจึงไม่ได้ช่วยหลีกเลี่ยงช่องโหว่ของคลิปบอร์ด
เสนอการเข้าสู่ระบบของบุคคลที่สาม
ผู้ใช้หลายคนต้องการลงชื่อเข้าใช้เว็บไซต์โดยใช้แบบฟอร์มลงชื่อสมัครใช้ด้วยอีเมลและรหัสผ่าน อย่างไรก็ตาม คุณควรอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้โดยใช้ผู้ให้บริการข้อมูลประจำตัวบุคคลที่สาม หรือที่เรียกว่าการเข้าสู่ระบบแบบรวมศูนย์ด้วย
แนวทางนี้มีข้อดีหลายประการ สำหรับผู้ใช้ที่สร้างบัญชีโดยใช้การเข้าสู่ระบบแบบรวมศูนย์ คุณไม่จำเป็นต้องขอ สื่อสาร หรือจัดเก็บรหัสผ่าน
นอกจากนี้ คุณยังอาจเข้าถึงข้อมูลโปรไฟล์ที่ยืนยันแล้วเพิ่มเติมจากการเข้าสู่ระบบแบบรวมศูนย์ได้ด้วย เช่น อีเมล ซึ่งหมายความว่าผู้ใช้ไม่จำเป็นต้องป้อนข้อมูลดังกล่าว และคุณไม่จำเป็นต้องทำการยืนยันด้วยตนเอง นอกจากนี้ การเข้าสู่ระบบแบบรวมศูนย์ยังช่วยให้ผู้ใช้เข้าถึงบัญชีได้ง่ายขึ้นเมื่อได้รับอุปกรณ์ใหม่
โปรดระมัดระวังในการใช้ชื่อผู้ใช้
อย่าบังคับให้ผู้ใช้ป้อนชื่อผู้ใช้ เว้นแต่ (หรือจนกว่า) คุณจะต้องการ ช่วยให้ผู้ใช้ลงชื่อสมัครใช้และลงชื่อเข้าใช้ได้โดยใช้อีเมล (หรือหมายเลขโทรศัพท์) และรหัสผ่านเท่านั้น หรือจะใช้การเข้าสู่ระบบแบบรวมศูนย์ก็ได้หากต้องการ อย่าบังคับให้ผู้ใช้เลือกและจดจำชื่อผู้ใช้
หากเว็บไซต์ของคุณกำหนดให้ต้องใช้ชื่อผู้ใช้ อย่ากำหนดกฎที่ไม่สมเหตุสมผล และอย่าห้ามไม่ให้ผู้ใช้อัปเดตชื่อผู้ใช้ ในแบ็กเอนด์ คุณควรสร้างรหัสที่ไม่ซ้ำกันสำหรับบัญชีผู้ใช้ทุกบัญชี ไม่ใช่ตัวระบุที่อิงตามข้อมูลส่วนตัว เช่น ชื่อผู้ใช้
และโปรดใช้ autocomplete="username" สำหรับชื่อผู้ใช้
กลยุทธ์สำรอง
การป้อนข้อความอัตโนมัติเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับการป้อนข้อความอัตโนมัติ ผู้ใช้เพียงแค่ต้องป้อนข้อมูลเข้าสู่ระบบสำหรับการลงชื่อสมัครใช้ด้วยตนเอง ข้อจำกัด HTML เชิงความหมาย (เช่น type, inputmode และ required) จะยังคงทำงานอย่างเหมาะสมเพื่อตรวจสอบข้อมูลที่ผู้ใช้ป้อนและแสดงแป้นพิมพ์เสมือนที่ถูกต้อง