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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

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