ใช้ฟีเจอร์เบราว์เซอร์ข้ามแพลตฟอร์มเพื่อสร้างแบบฟอร์มลงชื่อเข้าใช้ที่ปลอดภัย เข้าถึงได้ และใช้งานง่าย
หากผู้ใช้จำเป็นต้องลงชื่อเข้าใช้เว็บไซต์ของคุณ การออกแบบแบบฟอร์มลงชื่อเข้าใช้ที่ดีจึงเป็นสิ่งสำคัญ โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ใช้การเชื่อมต่อที่ไม่ดี ใช้งานบนอุปกรณ์เคลื่อนที่ กำลังรีบ หรืออยู่ภายใต้ความเครียด แบบฟอร์มลงชื่อเข้าใช้ที่ออกแบบมาไม่ดีจะมีอัตราตีกลับสูง การตีกลับแต่ละครั้งอาจหมายถึงการสูญเสียลูกค้าและผู้ใช้ที่ไม่พอใจ ไม่ใช่แค่การพลาดโอกาสในการลงชื่อเข้าใช้
วิธีการนำไปใช้งาน
ด้านล่างนี้คือหลักเกณฑ์ที่สำคัญที่สุดในการสร้างแบบฟอร์มลงชื่อเข้าใช้ที่ประสบความสำเร็จ
ใช้ 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" สำหรับการป้อนข้อมูลอีเมล โดยเบราว์เซอร์จะตรวจสอบรูปแบบโดยอัตโนมัติ เพิ่มแอตทริบิวต์ 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="current-password" สำหรับรหัสผ่านที่มีอยู่
บังคับ: ใช้ autocomplete="current-password" สำหรับการป้อนรหัสผ่านในแบบฟอร์มลงชื่อเข้าใช้ ซึ่งจะบอกเบราว์เซอร์ว่าคุณต้องการให้ใช้รหัสผ่านปัจจุบันที่จัดเก็บไว้สำหรับเว็บไซต์
สำหรับแบบฟอร์มลงชื่อเข้าใช้ ให้ทำดังนี้
<input type="password" autocomplete="current-password" id="current-password" …>
เปิดใช้เบราว์เซอร์เพื่อแนะนำรหัสผ่านที่รัดกุม
เบราว์เซอร์ที่ทันสมัยใช้การวิเคราะห์พฤติกรรมเพื่อตัดสินใจว่าจะแสดง UI ของเครื่องมือจัดการรหัสผ่านและแนะนำรหัสผ่านที่รัดกุมเมื่อใด
เครื่องมือสร้างรหัสผ่านในตัวของเบราว์เซอร์ช่วยให้ผู้ใช้และนักพัฒนาซอฟต์แวร์ไม่ต้องคิดว่า "รหัสผ่านที่รัดกุม" คืออะไร เนื่องจากเบราว์เซอร์สามารถจัดเก็บรหัสผ่านได้อย่างปลอดภัยและป้อนข้อความอัตโนมัติได้ตามความจำเป็น ผู้ใช้จึงไม่จำเป็นต้องจำหรือป้อนรหัสผ่าน การสนับสนุนให้ผู้ใช้ใช้ประโยชน์จากเครื่องมือสร้างรหัสผ่านในตัวของเบราว์เซอร์ยังหมายความว่าผู้ใช้มีแนวโน้มที่จะใช้รหัสผ่านที่ไม่ซ้ำกันและรัดกุมในเว็บไซต์ของคุณ และมีแนวโน้มที่จะใช้รหัสผ่านซ้ำน้อยลงซึ่งอาจถูกบุกรุกที่อื่นได้
ช่วยป้องกันไม่ให้ผู้ใช้พลาดการป้อนข้อมูลโดยไม่ตั้งใจ
บังคับ: เพิ่มแอตทริบิวต์ required ลงในทั้งช่องอีเมลและรหัสผ่าน เบราว์เซอร์ที่ทันสมัยจะแสดงข้อความแจ้งและโฟกัสข้อมูลที่ขาดหายไปโดยอัตโนมัติ
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
อนุญาตให้วางรหัสผ่าน
บางเว็บไซต์ไม่อนุญาตให้วางข้อความในช่องป้อนรหัสผ่าน
การไม่อนุญาตให้วางรหัสผ่านจะสร้างความรำคาญให้แก่ผู้ใช้ ส่งเสริมให้ใช้รหัสผ่านที่จำง่าย (ซึ่งอาจถูกบุกรุกได้ง่ายกว่า) และอาจลดความปลอดภัยลงตามข้อมูลจากองค์กรต่างๆ เช่น ศูนย์ความมั่นคงปลอดภัยไซเบอร์แห่งชาติของสหราชอาณาจักร ผู้ใช้จะทราบว่าไม่อนุญาตให้วางก็ต่อเมื่อพยายามวางรหัสผ่าน ดังนั้นการไม่อนุญาตให้วางรหัสผ่านจึงไม่ได้ช่วยหลีกเลี่ยงช่องโหว่ของคลิปบอร์ด
กลยุทธ์สำรอง
การป้อนข้อความอัตโนมัติเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับการป้อนข้อความอัตโนมัติ ผู้ใช้เพียงแค่ต้องป้อนข้อมูลเข้าสู่ระบบด้วยตนเอง ข้อจำกัด HTML เชิงความหมาย (เช่น type, inputmode และ required) จะยังคงทำงานอย่างเหมาะสมเพื่อตรวจสอบข้อมูลที่ผู้ใช้ป้อนและแสดงแป้นพิมพ์เสมือนที่ถูกต้อง