หลังจากเรียนรู้เกี่ยวกับ เอลิเมนต์ของฟอร์มและวิธีการสร้างฟอร์ม แบบอินเทอร์แอกทีฟ เรามาดูกันว่าจะช่วยเหลือผู้ใช้ไม่ให้ต้องป้อนข้อมูลซ้ำได้อย่างไร
ใช้ประโยชน์สูงสุดจากการป้อนข้อความอัตโนมัติ
การกรอกแบบฟอร์มอาจใช้เวลานาน ตัวอย่างเช่น การป้อนที่อยู่ของคุณซ้ำๆ ในทุกเว็บไซต์ที่คุณต้องการซื้อสินค้านั้นไม่ใช่ประสบการณ์การช็อปปิ้งที่ดี
ฟีเจอร์ป้อนข้อความอัตโนมัติช่วยคุณได้ คุณต้องป้อนที่อยู่เพียงครั้งเดียว จากนี้ไป เบราว์เซอร์ของคุณจะมีตัวเลือกให้คุณกรอกที่อยู่เดิมสำหรับแบบฟอร์มอื่นๆ โดยอัตโนมัติ
คุณย้ายไปอยู่เมืองอื่นแล้วใช่ไหม ไม่ต้องกังวลว่าจะใช้ที่อยู่เดิมเป็นตัวเลือกตลอดไป คุณสามารถแก้ไขข้อมูลที่อยู่ที่เบราว์เซอร์ได้บันทึกไว้เพื่อให้เป็นปัจจุบันอยู่เสมอ
การป้อนข้อความอัตโนมัติทำงานอย่างไรในเบราว์เซอร์
ฟิลด์ที่อยู่อาจแตกต่างกันมากในเว็บไซต์ต่างๆ เบราว์เซอร์รู้ได้อย่างไรว่าเป็นฟิลด์ที่อยู่
เบราว์เซอร์ใช้
การเรียนรู้เพื่อระบุฟิลด์ที่อยู่
ค่าของแอตทริบิวต์ name, type และ id คืออะไร
มีแอตทริบิวต์ autocomplete ในตัวควบคุมแบบฟอร์มไหม
จากข้อมูลนี้ เบราว์เซอร์สามารถเสนอตัวเลือกที่จะป้อนช่องด้วยข้อมูลที่ป้อนไว้ก่อนหน้านี้ในประเภทเดียวกันโดยอัตโนมัติ นอกจากนี้ เบราว์เซอร์ยังเสนอที่จะกรอกทั้งแบบฟอร์มโดยอัตโนมัติได้ด้วย
ช่วยเบราว์เซอร์เกี่ยวกับการป้อนข้อความอัตโนมัติ
มาดูสิ่งที่คุณทำได้เพื่อช่วยเบราว์เซอร์นำเสนอตัวเลือกการป้อนข้อความอัตโนมัติที่ถูกต้องกัน
ใช้ค่าแอตทริบิวต์ที่เหมาะสม
หลังจากได้เรียนรู้แล้ว เบราว์เซอร์จะระบุประเภทข้อมูลได้โดยการดูแอตทริบิวต์ของตัวควบคุมแบบฟอร์ม
<label for="email">Email</label>
<input type="email" name="email" id="email">
คุณมีช่องที่ผู้ใช้ควรป้อนอีเมลไหม
ใช้ email เป็นค่าสำหรับแอตทริบิวต์ name, id และ type
คำแนะนำสามข้อสำหรับเบราว์เซอร์ที่บอกว่านี่คือช่องอีเมล
แอตทริบิวต์การเติมข้อความอัตโนมัติ
มีตัวอย่างอื่นๆ ที่ทำให้เบราว์เซอร์ยังระบุประเภทข้อมูลจากแอตทริบิวต์ name, id และ type เพียงอย่างเดียวได้ยาก
โดยคุณจะช่วยเหลือได้ที่นี่ด้วยการใช้แอตทริบิวต์ autocomplete
คุณเคยป้อนชื่อในเบราว์เซอร์ที่ใช้อยู่มาก่อนไหม เบราว์เซอร์อาจมีตัวเลือกให้คุณป้อนข้อมูลอีกครั้งในช่องนี้ในการสาธิต
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ เติมข้อความอัตโนมัติและป้อนข้อความอัตโนมัติในโมดูลถัดไป
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการป้อนข้อความอัตโนมัติ
การป้อนข้อความอัตโนมัติให้บริการตามแอตทริบิวต์ใด
nametypeautocomplete