مساعدة المستخدمين على تجنب إعادة إدخال البيانات في النماذج

بعد التعرف على العنصر النموذجي وكيفية إنشاء نموذج تفاعلي، فلنرَ كيف يمكنك مساعدة المستخدمين على تجنب إعادة إدخال البيانات.

قد يستغرق ملء النماذج وقتًا طويلاً. على سبيل المثال، لا تُعدّ إعادة إدخال عنوانك بشكل متكرّر على كلّ موقع إلكتروني تريد شراء أحد المنتجات فيه تجربة تسوّق رائعة.

يمكنك الاستفادة من ميزة "الملء التلقائي" هنا. تُدخِل عنوانك مرة واحدة. من الآن فصاعدًا، سيعرض لك المتصفح خيار ملء العنوان نفسه في النماذج الأخرى تلقائيًا.

هل انتقلت إلى مدينة أخرى؟ لا تقلق بشأن الحصول على العنوان القديم كخيار للأبد. يمكنك تعديل بيانات العنوان التي حفظها متصفّحك من أجل إبقائها محدَّثة.

كيف تعمل ميزة الملء التلقائي في المتصفّح؟

قد يبدو حقل العنوان مختلفًا جدًا على مواقع إلكترونية مختلفة. كيف يعرف المتصفح أنه حقل عنوان؟

تستخدم المتصفحات الإرشادات لتحديد حقل العنوان. ما هي قيم السمات name وtype وid؟ هل تتوفّر سمة autocomplete في عنصر التحكّم في النموذج؟

بناءً على هذه المعلومات، توفر المتصفحات خيار ملء حقل تلقائيًا ببيانات تم إدخالها مسبقًا من النوع نفسه. ويمكن أيضًا أن تقترح المتصفحات ملء نموذج كامل تلقائيًا.

مساعدة المتصفّحات بشأن استخدام ميزة الملء التلقائي

دعنا نرَ ما يمكنك فعله لمساعدة المتصفحات في تقديم خيارات الملء التلقائي الصحيحة.

استخدِم قيم سمات معقولة

كما تعلمت، يمكن للمتصفّحات تحديد نوع البيانات من خلال النظر إلى سمات عنصر التحكم في النموذج.

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

هل لديك حقل يجب أن يُدخل المستخدمون فيه عناوين بريدهم الإلكتروني؟ استخدِم email كقيمة للسمة name وid وtype. ثلاثة تلميحات للمتصفّح تفيد بأنّ هذا حقل بريد إلكتروني

سمة الإكمال التلقائي

هناك أمثلة أخرى حيث قد يصعب على المتصفّحات التعرّف على نوع البيانات فقط من السمات name وid وtype. يمكنك المساعدة هنا باستخدام السمة autocomplete.

هل أدخلت اسمًا من قبل في المتصفح الذي تستخدمه؟ من المحتمل أن يعرض عليك المتصفح خيار ملؤه مرة أخرى لهذا الحقل في العرض التوضيحي.

يمكنك معرفة المزيد حول استخدام الإكمال التلقائي والملء التلقائي في وحدة لاحقة.

التحقق من فهمك

اختبر معلوماتك حول الملء التلقائي

استنادًا إلى ما هي السمات التي يتم تقديم ميزة الملء التلقائي لها؟

كل ما سبق
السمة name.
السمة autocomplete
السمة type

الموارد