للملء التلقائي

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

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

في مقدمة عن ميزة الملء التلقائي، سبق أن تعلّمت أساسيات ميزة الملء التلقائي. لكن لماذا توفّر المتصفحات ميزة الملء التلقائي؟

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

كيف تتعرّف المتصفحات على البيانات التي يجب ملؤها تلقائيًا؟ ألق نظرة على حقل نموذج نموذج لمعرفة ذلك.

<label for="name">Name</label>
<input name="name" id="name">

إذا أرسلت حقل النموذج هذا، تخزّن المتصفّحات القيمة (البيانات التي أدخلتها) مع قيمة السمة name (الاسم). تفحص بعض المتصفحات أيضًا السمة id عند تخزين البيانات وملؤها.

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

تُفيد ميزة "الملء التلقائي" بشكل خاص في النماذج التي تستخدمها بانتظام، مثل الاشتراك وتسجيل الدخول والدفع والدفع والنماذج التي تُدخِل فيها اسمك أو عنوانك.

يمكنك مساعدة المتصفحات على تقديم أفضل خيارات الملء التلقائي من خلال استخدام قيم مناسبة للسمة autocomplete. هناك العديد من القيم المحتمَلة لـ autocomplete. إليك مثال على العناوين.

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

لا يحتوي كل نموذج عنوان على الحقول نفسها، ويختلف ترتيب الحقول أيضًا. ويضمن استخدام القيم الصحيحة للسمة autocomplete أن يملأ المتصفِّح القيم الصحيحة للنموذج. تتوفر قيَم country وpostal-code وغيرها الكثير.

التأكّد من أنّه يمكن للمستخدمين تسجيل الدخول بسرعة واستخدام كلمات مرور آمنة

كثير من الأشخاص لا يجيدون تذكُّر كلمات المرور. كلمة المرور الأكثر شيوعًا هي "123456"، تليها مجموعات أخرى يسهل تذكُّرها. كيف يمكنك استخدام كلمات مرور آمنة وفريدة بدون تذكرها جميعًا؟

تتضمّن المتصفّحات برامج لإدارة كلمات المرور مدمَجة تتيح لك إنشاء كلمات المرور وحفظها وملؤها. تعرَّف على كيفية مساعدة المتصفحات باستخدام ميزة الملء التلقائي للرسائل الإلكترونية وإدارة كلمات المرور.

ويمكنك استخدام autocomplete="email" في حقل بريد إلكتروني، بحيث يحصل المستخدمون على خيار الملء التلقائي لعنوان البريد الإلكتروني.

بما أن هذا نموذج اشتراك، من المفترض ألا يتوفر للمستخدمين خيار ملء كلمات المرور المستخدمة سابقًا. يمكنك استخدام "autocomplete="new-password"" لضمان توفير خيار إنشاء كلمة مرور جديدة في المتصفحات.

في نموذج تسجيل الدخول، يمكنك استخدام autocomplete="current-password" لتطلب من المتصفحات عرض خيار ملء كلمات المرور المحفوظة سابقًا لهذا الموقع الإلكتروني.

يمكنك إعداد ميزة المصادقة الثنائية على العديد من المواقع الإلكترونية. بالإضافة إلى كلمة المرور، يتم إرسال رمز يُستخدم لمرة واحدة فقط من خلال رسالة قصيرة SMS أو تطبيق مصادقة ثنائية.

ألن يكون من الرائع أن يتم اقتراح الكود الذي تلقيته في رسالة SMS من خلال لوحة المفاتيح على الشاشة، ويمكنك تحديده مباشرةً لملء القيمة؟ في الإصدار 14 من Safari أو الإصدارات الأحدث، يمكنك استخدام autocomplete="one-time-code" لتحقيق ذلك. في Chrome على نظام التشغيل Android، يمكنك استخدام واجهة برمجة تطبيقات WebOTP لتحقيق ذلك باستخدام JavaScript.

تعرَّف على المزيد من المعلومات عن كيفية إثبات ملكية أرقام الهواتف على الويب باستخدام أفضل الممارسات من خلال نموذج كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS.

ساعِد المستخدمين في ملء معلومات بطاقات الائتمان.

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

يمكنك استخدام السمة autocomplete من جديد لضمان توفير المتصفّحات لخيارات الملء التلقائي الصحيحة.

هناك قيم لرقم بطاقة الائتمان cc-number وتاريخ انتهاء صلاحية بطاقة الائتمان cc-exp وجميع المعلومات الأخرى المطلوبة للدفع باستخدام بطاقة الائتمان.

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

اطّلِع على مزيد من المعلومات حول مساعدة المستخدمين على تجنُّب إعادة إدخال بيانات الدفع.

التأكّد من أنّ ميزة الملء التلقائي تعمل في جميع حقولك

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

عند إضافة حقل هاتف إلى النموذج، تحقَّق مما إذا كان بإمكانك استخدام أي من القيم المتاحة للإكمال التلقائي. هل عثرت على قيمة مناسبة لحقل النموذج؟ أضِفه.

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

مساعدة المتصفّحات في معرفة أنّه يجب عدم ملء أحد الحقول تلقائيًا

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

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

من بين الأماكن التي لا تكون فيها ميزة الملء التلقائي مفيدة هي إدخال قيم فريدة لمرة واحدة، مثل حقل الرمز لمرة واحدة. وتختلف القيمة في كل مرة، ويجب ألا يحفظ المتصفّح القيم أو يعرض خيار ملء تلقائي. ويمكنك استخدام autocomplete="off" لهذه الحقول من أجل منع الملء التلقائي.

وهناك حالة استخدام أخرى للسمة autocomplete="off" وهي حقل مصيدة (يمكنك الاطّلاع على الوحدة السابقة). وعلى الرغم من أنّ الحقل غير مرئي، قد تملأه المتصفحات تلقائيًا مع باقي الحقول. ويضمن إيقاف ميزة "الملء التلقائي" عدم تحديد هوية المستخدم الحقيقي على أنّه برنامج تتبُّع، وذلك بسبب إكمال بيانات هذا الحقل تلقائيًا.

يجب عدم إيقاف الملء التلقائي إلا إذا كنت متأكدًا من أنّه سيساعد المستخدمين.

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

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

ما هي قيمة الإكمال التلقائي التي يجب استخدامها في حقل كلمة المرور في نموذج الاشتراك؟

autocomplete="password"
يُرجى اختيار إجابة أخرى.
autocomplete="off"
يُرجى اختيار إجابة أخرى.
autocomplete="new-password"
🎉
autocomplete="current-password"
يُرجى اختيار إجابة أخرى.

المراجِع