اضطررت إلى إعادة إدخال عنوانك للمرة العاشرة. المتصفحات وأنت،
كمطوّر برامج، يمكنها مساعدة المستخدمين على إدخال البيانات بشكل أسرع وتجنب إعادة إدخال البيانات.
توضّح لك هذه الوحدة طريقة عمل ميزة الملء التلقائي وطريقة 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"