ป้อนข้อความอัตโนมัติ

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

การป้อนข้อความอัตโนมัติทำงานอย่างไร

ในข้อมูลเบื้องต้นเกี่ยวกับการป้อนข้อความอัตโนมัติ คุณได้เรียนรู้พื้นฐานของการป้อนข้อความอัตโนมัติไปแล้ว แต่ทำไมเบราว์เซอร์จึงมีการป้อนข้อความอัตโนมัติ

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

เบราว์เซอร์จะรู้ได้อย่างไรว่าจะป้อนข้อมูลใดโดยอัตโนมัติ ลองดูช่องตัวอย่าง ของฟอร์มเพื่อหาคำตอบ

<label for="name">Name</label>
<input name="name" id="name">

หากคุณส่งช่องแบบฟอร์มนี้ เบราว์เซอร์จะจัดเก็บค่า (ข้อมูลที่คุณป้อน) พร้อมกับค่าของแอตทริบิวต์ name (ชื่อ) บางเบราว์เซอร์จะดูแอตทริบิวต์ id ด้วยเมื่อจัดเก็บและป้อนข้อมูลด้วย

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

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

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

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

แต่ละแบบฟอร์มที่อยู่จะมีช่องแตกต่างกัน และลำดับของช่องจะแตกต่างกันไปด้วย การใช้ค่าที่ถูกต้องสำหรับ autocomplete จะช่วยให้เบราว์เซอร์กรอกค่าที่ถูกต้องสำหรับแบบฟอร์มได้ มีค่าสำหรับ country, postal-code และอีกมากมาย

ตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ได้อย่างรวดเร็วและใช้รหัสผ่านที่ปลอดภัย

หลายคนจดจำรหัสผ่านได้ไม่ถนัด รหัสผ่านที่ใช้บ่อยที่สุดคือ "123456" ตามด้วยชุดค่าผสมอื่นๆ ที่จำได้ง่าย คุณจะใช้รหัสผ่านที่ปลอดภัย และไม่ซ้ำกันได้โดยไม่ต้องจำรหัสผ่านทั้งหมดได้อย่างไร

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

คุณใช้ autocomplete="email" สำหรับช่องอีเมลได้ เพื่อให้ผู้ใช้ได้รับตัวเลือกการป้อนข้อความอัตโนมัติสำหรับอีเมล

เนื่องจากนี่เป็นแบบฟอร์มลงชื่อสมัครใช้ ผู้ใช้จึงไม่ควรมีตัวเลือกในการป้อนรหัสผ่านที่ใช้ก่อนหน้านี้ และคุณสามารถใช้ autocomplete="new-password" เพื่อให้เบราว์เซอร์มีตัวเลือกในการสร้างรหัสผ่านใหม่

ในแบบฟอร์มลงชื่อเข้าใช้ คุณใช้ autocomplete="current-password" เพื่อบอกให้เบราว์เซอร์เสนอตัวเลือกในการป้อนรหัสผ่านที่บันทึกไว้ก่อนหน้านี้สำหรับเว็บไซต์นี้ได้

คุณตั้งค่าการตรวจสอบสิทธิ์แบบ 2 ปัจจัยได้ในเว็บไซต์หลายแห่ง นอกจากรหัสผ่านแล้ว ระบบจะส่งรหัสแบบใช้ครั้งเดียวไปพร้อมกับ SMS หรือแอปการตรวจสอบสิทธิ์แบบ 2 ปัจจัย

คงจะดีไม่น้อยถ้ารหัสที่คุณได้รับในข้อความ SMS แนะนำ โดยแป้นพิมพ์บนหน้าจอและคุณจะเลือกรหัสนั้นเพื่อกรอกค่า ได้โดยตรงเลย ใน Safari 14 ขึ้นไป คุณจะใช้ autocomplete="one-time-code" เพื่อดำเนินการนี้ได้ สำหรับ Chrome บน Android คุณใช้ WebOTP API เพื่อทำขั้นตอนนี้ด้วย JavaScript ได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธียืนยันหมายเลขโทรศัพท์ในเว็บด้วยแนวทางปฏิบัติแนะนำสำหรับแบบฟอร์ม SMS OTP

ช่วยผู้ใช้กรอกข้อมูลบัตรเครดิต

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

คุณใช้แอตทริบิวต์ autocomplete อีกครั้งได้เพื่อให้เบราว์เซอร์มีตัวเลือกการป้อนข้อความอัตโนมัติที่ถูกต้อง

มีการระบุค่าสำหรับหมายเลขบัตรเครดิต cc-number วันที่หมดอายุของบัตรเครดิต cc-exp และข้อมูลอื่นๆ ทั้งหมดที่จำเป็นสำหรับการชำระเงินด้วยบัตรเครดิต

ใช้อินพุตเดียวสำหรับหมายเลขต่างๆ เช่น หมายเลขบัตรเครดิตและหมายเลขโทรศัพท์ เพื่อให้แน่ใจว่าเบราว์เซอร์มีการป้อนข้อความอัตโนมัติ ใช้องค์ประกอบแบบฟอร์มมาตรฐาน เช่น <select> สำหรับวันที่ของบัตรสำหรับชำระเงินแทนการใช้องค์ประกอบที่กำหนดเอง เพื่อให้แน่ใจว่าจะเติมข้อความอัตโนมัติได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับการช่วยผู้ใช้หลีกเลี่ยงการป้อนข้อมูลการชำระเงินซ้ำ

ตรวจสอบว่าการป้อนข้อความอัตโนมัติใช้ได้กับทุกช่อง

นอกจากที่อยู่ ข้อมูลบัญชี และข้อมูลบัตรเครดิตแล้ว ยังมีช่องอีกมากมายที่เบราว์เซอร์สามารถช่วยผู้ใช้ด้วยการป้อนข้อความอัตโนมัติ

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

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

ช่วยให้เบราว์เซอร์เข้าใจว่าไม่ควรป้อนข้อความอัตโนมัติในช่อง

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

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

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

กรณีการใช้งาน autocomplete="off" อีกกรณีหนึ่งคือช่อง Honeypot (ดูโมดูลก่อนหน้า) แม้จะไม่เห็นช่องนี้ แต่เบราว์เซอร์อาจป้อนช่องที่เหลือโดยอัตโนมัติ การปิดการป้อนข้อความอัตโนมัติเป็นการตรวจสอบว่าผู้ใช้จริงไม่ได้รับการระบุว่าเป็นบ็อต เนื่องจากระบบจะกรอกข้อมูลในช่องให้โดยอัตโนมัติ

คุณควรปิดใช้การป้อนข้อความอัตโนมัติเมื่อแน่ใจว่าจะเป็นประโยชน์ต่อผู้ใช้เท่านั้น

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการป้อนข้อความอัตโนมัติ

คุณควรใช้ค่าการเติมข้อความอัตโนมัติใดในช่องรหัสผ่านในแบบฟอร์มลงชื่อสมัครใช้

autocomplete="password"
ลองอีกครั้งนะ
autocomplete="off"
ลองอีกครั้งนะ
autocomplete="new-password"
🎉
autocomplete="current-password"
ลองอีกครั้งนะ

แหล่งข้อมูล