ช่วยผู้ใช้ลงชื่อสมัครใช้
แบบฟอร์มลงชื่อสมัครใช้มักเป็นการโต้ตอบแรกกับแบบฟอร์มในเว็บไซต์ การออกแบบแบบฟอร์มลงชื่อสมัครใช้ที่ดีเป็นสิ่งสำคัญ และแบบฟอร์มที่ปลอดภัยก็เป็นสิ่งจำเป็น
ดูแบบฟอร์มลงชื่อสมัครใช้เพื่อดูวิธีช่วยเหลือผู้ใช้ในการลงชื่อสมัครใช้ในเว็บไซต์
ใช้แบบฟอร์มลงชื่อสมัครใช้ที่เรียบง่ายและแสดงเฉพาะตัวควบคุมแบบฟอร์มที่จำเป็นเพื่อสร้าง บัญชี อย่าใช้ตัวควบคุมแบบฟอร์มซ้ำเพื่อช่วยให้ผู้ใช้ได้รับรายละเอียดบัญชีที่ถูกต้อง ส่งอีเมลยืนยันแทน
รายละเอียดบัญชี
คุณช่วยให้ผู้ใช้กรอกรายละเอียดบัญชีได้โดยใช้autocompleteแอตทริบิวต์ที่เหมาะสม ใช้ autocomplete="email" สำหรับช่องอีเมล และ
autocomplete="new-password" สำหรับช่องรหัสผ่านใหม่
ดูข้อมูลเพิ่มเติมเกี่ยวกับการควบคุมอินพุตการป้อนข้อความอัตโนมัติ
นอกจากนี้ คุณยังช่วยให้ผู้ใช้ป้อนรหัสผ่านที่ปลอดภัยได้โดยการเสนอองค์ประกอบ reveal-password
<button> ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบการแสดงรหัสผ่าน
รักษาความปลอดภัยของแบบฟอร์มลงชื่อสมัครใช้
ห้ามจัดเก็บหรือส่งรหัสผ่านเป็นข้อความธรรมดา อย่าลืมใส่เกลือและแฮช รหัสผ่าน และอย่าพยายามคิดอัลกอริทึมการแฮชของคุณเอง
เสนอการตรวจสอบแบบ 2 ขั้นตอน โดยเฉพาะหากคุณจัดเก็บข้อมูลส่วนบุคคลหรือข้อมูลที่ละเอียดอ่อน แนวทางปฏิบัติแนะนำสำหรับ OTP ทาง SMS และ การเปิดใช้การตรวจสอบสิทธิ์ที่รัดกุมด้วย WebAuthn จะอธิบายวิธีใช้การตรวจสอบสิทธิ์แบบหลายปัจจัย
ตรวจสอบว่าผู้ใช้ไม่ได้ใช้รหัสผ่านที่ถูกละเมิด เช่น ใช้ API จาก Have I Been Pwned เพื่อตรวจหารหัสผ่านที่ถูกบุกรุก และแนะนำให้ผู้ใช้กรอกรหัสผ่านใหม่ที่แตกต่าง หรือเตือนผู้ใช้หากรหัสผ่านถูกบุกรุก
ช่วยผู้ใช้ลงชื่อเข้าใช้
ดูวิธีสร้างแบบฟอร์มลงชื่อเข้าใช้เพื่อให้ผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ได้
ทำให้ตำแหน่งของปุ่มลงชื่อสมัครใช้และลงชื่อเข้าใช้เห็นได้ชัดเจน ตรวจสอบว่าแบบฟอร์มใช้งานได้ในอุปกรณ์ระบบสัมผัส
- ขนาดเป้าหมายการแตะของปุ่มมีขนาดอย่างน้อย 48 พิกเซล
font-sizeขององค์ประกอบแบบฟอร์มมีขนาดใหญ่เพียงพอ (20pxเหมาะสมกับอุปกรณ์เคลื่อนที่)- มีพื้นที่เพียงพอ (
margin) ระหว่างตัวควบคุมแบบฟอร์ม และอินพุตมีขนาดใหญ่เพียงพอ (ใช้ขนาดอย่างน้อยpadding: 15pxบนอุปกรณ์เคลื่อนที่)
ช่วยผู้ใช้กรอกอีเมลและรหัสผ่าน
ช่วยเบราว์เซอร์และเครื่องมือจัดการรหัสผ่านในการป้อนรายละเอียดบัญชีโดยอัตโนมัติ
ใช้ autocomplete="email" สำหรับช่องอีเมล
และ autocomplete="current-password" สำหรับช่องรหัสผ่านปัจจุบัน
หากต้องการช่วยให้ผู้ใช้กรอกรายละเอียดบัญชีด้วยตนเอง ให้ใช้ type="email"
สำหรับช่องอีเมลเพื่อแสดงแป้นพิมพ์บนหน้าจอที่เหมาะสมในอุปกรณ์เคลื่อนที่
ใช้แอตทริบิวต์ required สำหรับช่องอีเมลและรหัสผ่านเพื่อให้คุณเตือน
ค่าที่ไม่ถูกต้องได้เมื่อผู้ใช้ส่งแบบฟอร์ม ลองใช้การตรวจสอบแบบเรียลไทม์
เพื่อช่วยให้ผู้ใช้แก้ไขข้อมูลที่ไม่ถูกต้องได้ทันทีที่ป้อนข้อมูล แทนที่จะ
รอการส่งแบบฟอร์ม
ตรวจสอบว่าผู้ใช้เห็นรหัสผ่านที่ป้อน
ข้อความที่คุณกรอกสำหรับ <input type="password"> จะถูกซ่อนโดยค่าเริ่มต้น
เพื่อเคารพความเป็นส่วนตัวของผู้ใช้
ช่วยผู้ใช้ป้อนรหัสผ่าน
โดยแสดง <button> เพื่อสลับการแสดงข้อความที่ป้อน
ดูข้อมูลเพิ่มเติมเกี่ยวกับ
การติดตั้งใช้งานการแสดงรหัสผ่าน <button>
ตรวจสอบว่าแบบฟอร์มการลงชื่อเข้าใช้และการลงชื่อสมัครใช้ใช้งานได้
ทดสอบแบบฟอร์มลงชื่อเข้าใช้และลงชื่อสมัครใช้อย่างสม่ำเสมอโดยใช้ผู้ใช้จริงเพื่อให้แน่ใจว่าการตรวจสอบสิทธิ์ทำงานได้ตามที่คาดไว้ ใช้ข้อมูลวิเคราะห์และการวัดผลผู้ใช้จริง (RUM) เพื่อรวบรวมข้อมูลภาคสนาม และเครื่องมือต่างๆ เช่น Lighthouse และ PageSpeed Insights เพื่อทำการทดสอบด้วยตนเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบความสามารถในการใช้งานและ การรวบรวมข้อมูลวิเคราะห์
ตรวจสอบว่าแบบฟอร์มทำงานในเบราว์เซอร์และแพลตฟอร์มต่างๆ ได้ ทดสอบแบบฟอร์มในขนาดหน้าจอต่างๆ โดยใช้เพียงแป้นพิมพ์ หรือใช้โปรแกรมอ่านหน้าจอ เช่น VoiceOver ใน Mac หรือ NVDA ใน Windows
ช่วยผู้ใช้เปลี่ยนการตั้งค่าบัญชี
ตรวจสอบว่าผู้ใช้สามารถเปลี่ยนการตั้งค่าบัญชีทั้งหมด รวมถึงอีเมล รหัสผ่าน และชื่อผู้ใช้
มีความโปร่งใสเกี่ยวกับข้อมูลที่คุณจัดเก็บ และช่วยให้ผู้ใช้ดาวน์โหลดข้อมูลส่วนตัวทั้งหมดได้ทุกเมื่อ ตรวจสอบว่าผู้ใช้สามารถลบบัญชีของตนได้หากต้องการ ฟีเจอร์การจัดการบัญชี เช่น ฟีเจอร์เหล่านี้ อาจเป็นข้อกำหนดทางกฎหมายในบางภูมิภาค
ตรวจสอบว่าผู้ใช้อัปเดตรหัสผ่านได้
ช่วยให้ผู้ใช้อัปเดตรหัสผ่านได้ง่ายขึ้น
ขอรหัสผ่านปัจจุบันจากผู้ใช้ก่อนที่จะเปลี่ยน และส่งอีเมลเกี่ยวกับการเปลี่ยนรหัสผ่านพร้อมตัวเลือกในการเปลี่ยนกลับและล็อกบัญชี
เพิ่มตัวเลือกในการขอรหัสผ่านใหม่ และพิจารณาให้.well-known URL สำหรับการขอรหัสผ่านใหม่