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

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

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

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

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

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

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

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

เบราว์เซอร์ใช้การหาค่าประมาณเพื่อระบุช่องที่อยู่ ค่าของแอตทริบิวต์ 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

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

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

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

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

แหล่งข้อมูล

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