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