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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

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