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

การต้องป้อนที่อยู่ของคุณเป็นครั้งที่สิบอาจเป็นการเหนื่อยหน่าย เบราว์เซอร์ และคุณ ในฐานะนักพัฒนาแอป จะช่วยให้ผู้ใช้ป้อนข้อมูลได้เร็วขึ้นและหลีกเลี่ยงการป้อนข้อมูลซ้ำ โมดูลนี้จะสอนวิธีการทำงานของการป้อนข้อความอัตโนมัติ รวมถึงวิธีการทำงานของ 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" อีกอย่างหนึ่งคือทุ่งน้ำผึ้ง (ดูก่อนหน้า ) แม้ว่าฟิลด์จะไม่ใช่ เบราว์เซอร์อาจป้อนข้อความที่เหลือด้วยช่องที่เหลือโดยอัตโนมัติ กำลังเปลี่ยนการป้อนข้อความอัตโนมัติ ปิดไม่ให้ระบบระบุว่าผู้ใช้จริงเป็นบ็อต เนื่องจากฟิลด์ เสร็จสมบูรณ์โดยอัตโนมัติ

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

ตรวจสอบความเข้าใจ

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

แหล่งข้อมูล

• การเติมข้อความอัตโนมัติ
  • แบบฟอร์มการชำระเงินและที่อยู่ดีที่สุด แนวทางปฏิบัติ