من المرهق الاضطرار إلى إعادة إدخال عنوانك للمرة العاشرة. يمكن للمتصفحات والمطوّرين مثلك مساعدة المستخدمين في إدخال البيانات بشكل أسرع وتجنُّب إعادة إدخالها.
تعلّمك هذه الوحدة كيفية عمل ميزة الملء التلقائي، وكيف يمكن لسمات 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 أو تطبيق مصادقة ثنائية.
ألن يكون من الرائع أن تقترح لوحة المفاتيح على الشاشة الرمز الذي تلقّيته في الرسالة النصية، وأن تتمكّن من اختياره مباشرةً لملء القيمة؟ في Safari 14 أو الإصدارات الأحدث، يمكنك استخدام
autocomplete="one-time-code"
لتحقيق ذلك. في Chrome على Android، يمكنك استخدام WebOTP API لتحقيق ذلك باستخدام JavaScript.
تنبيه: لا تُعدّ الرسائل القصيرة 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"