ช่วยผู้ใช้หลีกเลี่ยงการป้อนข้อมูลในแบบฟอร์มซ้ำ

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

ใช้ประโยชน์สูงสุดจากการป้อนข้อความอัตโนมัติ

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

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

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

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

ฟิลด์ที่อยู่อาจมีลักษณะแตกต่างกันอย่างมากในแต่ละไซต์ เบราว์เซอร์รู้ได้อย่างไรว่าเป็นฟิลด์ที่อยู่

เบราว์เซอร์ใช้การเรียนรู้ เพื่อระบุช่องที่อยู่ ค่าของแอตทริบิวต์ name, type และ id คืออะไร มีแอตทริบิวต์ autocomplete อยู่ในตัวควบคุมแบบฟอร์มไหม

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

ช่วยเบราว์เซอร์เกี่ยวกับการป้อนข้อความอัตโนมัติ

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

ใช้ค่าแอตทริบิวต์ที่เหมาะสม

ตามที่ได้เรียนรู้ไปแล้ว เบราว์เซอร์จะระบุประเภทข้อมูลได้โดยดูที่แอตทริบิวต์ของตัวควบคุมแบบฟอร์ม

<label for="email">Email</label>
<input type="email" name="email" id="email">

คุณมีช่องที่ผู้ใช้ควรป้อนอีเมลหรือไม่ ใช้ email เป็นค่าสำหรับแอตทริบิวต์ name, id และ type คำแนะนำ 3 ข้อสำหรับเบราว์เซอร์ว่านี่คือช่องอีเมล

แอตทริบิวต์การเติมข้อความอัตโนมัติ

มีตัวอย่างอื่นๆ ที่ทำให้เบราว์เซอร์ระบุประเภทข้อมูลจากแอตทริบิวต์ name, id และ type เพียงอย่างเดียวได้ยาก คุณช่วยได้ที่นี่โดยใช้แอตทริบิวต์ autocomplete

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

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

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

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

แหล่งข้อมูล

• แอตทริบิวต์การเติมข้อความอัตโนมัติ
• การป้อนข้อความอัตโนมัติ: สิ่งที่นักพัฒนาเว็บควรทราบแต่ไม่ต้องทราบ