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

بعد التعرّف على عنصر النموذج وكيفية جعل النموذج تفاعليًا، لنطّلِع على كيفية مساعدة المستخدمين في تجنُّب إعادة إدخال البيانات.

الاستفادة إلى أقصى حد من ميزة "الملء التلقائي"

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

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

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

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

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

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

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

مساعدة المتصفّحات في الملء التلقائي

لنلقِ نظرة على الإجراءات التي يمكنك اتّخاذها لمساعدة المتصفّحات في توفير خيارات الملء التلقائي الصحيحة.

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

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

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

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

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

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

هل سبق لك إدخال اسم في المتصفّح الذي تستخدمه؟ من المرجّح أن يقدّم لك المتصفّح خيار ملء هذا الحقل مرة أخرى في العرض التجريبي.

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

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

اختبِر معلوماتك حول ميزة "الملء التلقائي"

الموارد

• سمة الإكمال التلقائي
• الملء التلقائي: المعلومات التي يجب أن يعرفها مطوّرو الويب، ولكن لا يعرفونها