بعد التعرف على العنصر النموذجي وكيفية إنشاء نموذج تفاعلي، فلنرَ كيف يمكنك مساعدة المستخدمين على تجنب إعادة إدخال البيانات.
الاستفادة إلى أقصى حدّ من ميزة "الملء التلقائي"
قد يستغرق ملء النماذج وقتًا طويلاً. على سبيل المثال، لا تُعدّ إعادة إدخال عنوانك بشكل متكرّر على كلّ موقع إلكتروني تريد شراء أحد المنتجات فيه تجربة تسوّق رائعة.
يمكنك الاستفادة من ميزة "الملء التلقائي" هنا. تُدخِل عنوانك مرة واحدة. من الآن فصاعدًا، سيعرض لك المتصفح خيار ملء العنوان نفسه في النماذج الأخرى تلقائيًا.
هل انتقلت إلى مدينة أخرى؟ لا تقلق بشأن الحصول على العنوان القديم كخيار للأبد. يمكنك تعديل بيانات العنوان التي حفظها متصفّحك من أجل إبقائها محدَّثة.
كيف تعمل ميزة الملء التلقائي في المتصفّح؟
قد يبدو حقل العنوان مختلفًا جدًا على مواقع إلكترونية مختلفة. كيف يعرف المتصفح أنه حقل عنوان؟
تستخدم المتصفحات
الإرشادات لتحديد حقل العنوان.
ما هي قيم السمات name
وtype
وid
؟
هل تتوفّر سمة autocomplete
في عنصر التحكّم في النموذج؟
بناءً على هذه المعلومات، توفر المتصفحات خيار ملء حقل تلقائيًا ببيانات تم إدخالها مسبقًا من النوع نفسه. ويمكن أيضًا أن تقترح المتصفحات ملء نموذج كامل تلقائيًا.
مساعدة المتصفّحات بشأن استخدام ميزة الملء التلقائي
دعنا نرَ ما يمكنك فعله لمساعدة المتصفحات في تقديم خيارات الملء التلقائي الصحيحة.
استخدِم قيم سمات معقولة
كما تعلمت، يمكن للمتصفّحات تحديد نوع البيانات من خلال النظر إلى سمات عنصر التحكم في النموذج.
<label for="email">Email</label>
<input type="email" name="email" id="email">
هل لديك حقل يجب أن يُدخل المستخدمون فيه عناوين بريدهم الإلكتروني؟
استخدِم email
كقيمة للسمة name
وid
وtype
.
ثلاثة تلميحات للمتصفّح تفيد بأنّ هذا حقل بريد إلكتروني
سمة الإكمال التلقائي
هناك أمثلة أخرى حيث قد يصعب على المتصفّحات التعرّف على نوع البيانات فقط من السمات name
وid
وtype
.
يمكنك المساعدة هنا باستخدام السمة autocomplete
.
هل أدخلت اسمًا من قبل في المتصفح الذي تستخدمه؟ من المحتمل أن يعرض عليك المتصفح خيار ملؤه مرة أخرى لهذا الحقل في العرض التوضيحي.
يمكنك معرفة المزيد حول استخدام الإكمال التلقائي والملء التلقائي في وحدة لاحقة.
التحقق من فهمك
اختبر معلوماتك حول الملء التلقائي
استنادًا إلى ما هي السمات التي يتم تقديم ميزة الملء التلقائي لها؟
type
name
.autocomplete