การต้องป้อนที่อยู่ของคุณเป็นครั้งที่สิบอาจเป็นการเหนื่อยหน่าย เบราว์เซอร์ และคุณ
ในฐานะนักพัฒนาแอป จะช่วยให้ผู้ใช้ป้อนข้อมูลได้เร็วขึ้นและหลีกเลี่ยงการป้อนข้อมูลซ้ำ
โมดูลนี้จะสอนวิธีการทำงานของการป้อนข้อความอัตโนมัติ รวมถึงวิธีการทำงานของ autocomplete และอื่นๆ
แอตทริบิวต์ขององค์ประกอบสามารถช่วยให้เบราว์เซอร์มีตัวเลือกการป้อนข้อความอัตโนมัติที่เหมาะสม
การป้อนข้อความอัตโนมัติทำงานอย่างไร
ในข้อมูลเบื้องต้นเกี่ยวกับการป้อนข้อความอัตโนมัติ คุณได้เรียนรู้ข้อมูลเบื้องต้นเกี่ยวกับ ป้อนข้อความอัตโนมัติ แต่ทำไมเบราว์เซอร์จึงมีการป้อนข้อความอัตโนมัติ
การกรอกแบบฟอร์มไม่ใช่กิจกรรมที่น่าสนใจ แต่ก็ยังเป็นสิ่งที่คุณทำ บ่อยครั้ง เมื่อเวลาผ่านไป คุณกรอกแบบฟอร์มจำนวนมากและมักจะกรอกข้อมูลเดิมตลอด วิธีหนึ่งที่ช่วยให้ผู้ใช้กรอกแบบฟอร์มได้เร็วขึ้นคือการเสนอตัวเลือก กรอกข้อมูลในช่องของแบบฟอร์มด้วยข้อมูลที่ป้อนก่อนหน้านี้โดยอัตโนมัติ นั่นก็คือการป้อนข้อความอัตโนมัติ
เบราว์เซอร์รู้ได้อย่างไรว่าจะป้อนข้อมูลใดโดยอัตโนมัติ ดูตัวอย่างแบบฟอร์ม เพื่อหาคำตอบ
<label for="name">Name</label>
<input name="name" id="name">
หากส่งช่องนี้ เบราว์เซอร์จะจัดเก็บค่า (ข้อมูลที่คุณป้อน)
พร้อมกับค่าของแอตทริบิวต์ name (ชื่อ) บางเบราว์เซอร์ยังพิจารณา
แอตทริบิวต์ id เมื่อจัดเก็บและกรอกข้อมูล
สมมติว่า สัปดาห์ต่อมา คุณกรอกแบบฟอร์มอีกเว็บไซต์หนึ่งในเว็บไซต์อื่น และเว็บไซต์นี้ยัง
มีฟิลด์ของฟอร์มที่มี name="name" ตอนนี้เบราว์เซอร์ของคุณรองรับ
การป้อนข้อความอัตโนมัติ
เนื่องจากค่าสำหรับชื่อถูกจัดเก็บอยู่แล้ว
การป้อนข้อความอัตโนมัติมีประโยชน์อย่างยิ่งในแบบฟอร์มที่คุณใช้เป็นประจำ เช่น การลงชื่อสมัครใช้ การลงชื่อเข้าใช้ การชำระเงิน การชำระเงิน และแบบฟอร์มที่คุณจะต้องป้อนชื่อหรือ อีเมล
คุณสามารถช่วยให้เบราว์เซอร์นำเสนอตัวเลือกการป้อนข้อความอัตโนมัติที่ดีที่สุดโดยใช้
สำหรับแอตทริบิวต์ autocomplete ค่าที่เป็นไปได้สำหรับ autocomplete มีอยู่หลายค่า นี่คือตัวอย่างของที่อยู่
เบราว์เซอร์ของคุณมีที่อยู่ที่บันทึกไว้ให้คุณอยู่แล้วหรือไม่ เยี่ยม! หลังจากที่คุณ โต้ตอบกับช่องแรกในแบบฟอร์มที่อยู่ เบราว์เซอร์จะแสดงรายการ ที่อยู่ที่บันทึกไว้แล้ว รายการ คุณสามารถเลือกได้ 1 ช่อง และเบราว์เซอร์จะกรอกข้อมูลในช่องทั้งหมด ซึ่งเกี่ยวข้องกับที่อยู่ การป้อนข้อความอัตโนมัติช่วยให้การกรอกแบบฟอร์มรวดเร็วและง่ายดาย
แบบฟอร์มที่อยู่บางรายการอาจไม่มีช่องเหมือนกัน และลำดับของช่องจะแตกต่างกันไปด้วย
การใช้ค่าที่ถูกต้องสำหรับ 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
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธียืนยันหมายเลขโทรศัพท์บนเว็บด้วยแบบฟอร์ม OTP ของ SMS แนวทางปฏิบัติแนะนำ
ช่วยผู้ใช้กรอกข้อมูลบัตรเครดิต
บนเว็บไซต์อีคอมเมิร์ซจำนวนมาก คุณสามารถใช้บัตรเครดิตเพื่อซื้อผลิตภัณฑ์ได้ เว็บไซต์อาจใช้แพลตฟอร์มการชำระเงินของบุคคลที่สามที่มีรูปแบบของตัวเอง แต่หาก คุณจะต้องสร้างรูปแบบการชำระเงินของคุณเอง ให้แน่ใจว่าผู้ใช้กรอกแบบฟอร์ม ข้อมูลการชำระเงิน
คุณสามารถใช้แอตทริบิวต์ 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" อีกอย่างหนึ่งคือทุ่งน้ำผึ้ง (ดูก่อนหน้า
) แม้ว่าฟิลด์จะไม่ใช่
เบราว์เซอร์อาจป้อนข้อความที่เหลือด้วยช่องที่เหลือโดยอัตโนมัติ กำลังเปลี่ยนการป้อนข้อความอัตโนมัติ
ปิดไม่ให้ระบบระบุว่าผู้ใช้จริงเป็นบ็อต เนื่องจากฟิลด์
เสร็จสมบูรณ์โดยอัตโนมัติ
คุณควรปิดใช้การป้อนข้อความอัตโนมัติเมื่อมั่นใจว่าจะช่วยผู้ใช้ได้เท่านั้น
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการป้อนข้อความอัตโนมัติ
คุณควรใช้ค่าการเติมข้อความอัตโนมัติใดสำหรับช่องรหัสผ่านในแบบฟอร์มลงชื่อสมัครใช้
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"