يوضّح لك هذا الدليل التعليمي كيفية إنشاء نموذج تسجيل آمن وسهل الاستخدام ومتاح للجميع.
الخطوة 1: استخدام تنسيق HTML ذي معنى
في هذه الخطوة، ستتعرّف على كيفية استخدام عناصر النماذج للاستفادة إلى أقصى حد من ميزات المتصفّح المضمّنة.
- انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
اطّلِع على ملف HTML الخاص بنموذجك في index.html. ستظهر لك خانات لإدخال الاسم والبريد الإلكتروني
وكلمة المرور. وكلّ منها في قسم، ولكلّ منها تصنيف. زر اشتراك هو… <button>.
في وقت لاحق من هذا الدليل التعليمي، ستتعرّف على الإمكانات الخاصة لكل هذه العناصر.
<form action="#" method="post">
<h1>Sign up</h1>
<section>
<label>Full name</label>
<input>
</section>
<section>
<label>Email</label>
<input>
</section>
<section>
<label>Password</label>
<input>
</section>
<button id="sign-up">Sign up</button>
</form>
انقر على عرض التطبيق لمعاينة نموذج الاشتراك. يوضّح لك ذلك مظهر النموذج بدون CSS باستثناء أنماط المتصفّح التلقائية.
- هل تبدو الأنماط التلقائية جيدة؟ ما الذي يمكن تغييره لتحسين مظهر النموذج؟
- هل تعمل الأنماط التلقائية على ما يرام؟ ما المشاكل التي يمكن أن تواجهها عند استخدام النموذج كما هو؟ وماذا عن ذلك على الأجهزة الجوّالة؟ ماذا عن برامج قراءة الشاشة أو التقنيات المساعِدة الأخرى؟
- مَن هم المستخدمون الذين تستهدفهم، وما هي الأجهزة والمتصفحات التي تستهدفها؟
اختبار النموذج
يمكنك الحصول على الكثير من الأجهزة وإعداد مختبر للأجهزة، ولكن هناك طرق أرخص وأسهل لتجربة النموذج على مجموعة من المتصفّحات والأنظمة الأساسية والأجهزة:
- استخدام "وضع الجهاز" في أدوات مطوّري البرامج في Chrome لمحاكاة الأجهزة الجوّالة
- إرسال عنوان URL من جهاز الكمبيوتر إلى هاتفك
- استخدِم خدمة مثل BrowserStack للاختبار على مجموعة من الأجهزة والمتصفحات.
- جرِّب النموذج باستخدام أداة قارئ الشاشة مثل إضافة Chrome ChromeVox.
انقر على عرض التطبيق لمعاينة نموذج الاشتراك.
- جرِّب النموذج على أجهزة مختلفة باستخدام "وضع الجهاز" في "أدوات مطوّري البرامج في Chrome".
- الآن، افتح النموذج على هاتف أو أجهزة حقيقية أخرى. ما هي الاختلافات؟
الخطوة 2: إضافة CSS لتحسين أداء النموذج
انقر على عرض المصدر للعودة إلى رمز المصدر.
ليست هناك مشكلة في رمز HTML حتى الآن، ولكن يجب أن تتأكّد من أنّ النموذج يعمل جيدًا مع مجموعة من المستخدمين على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.
في هذه الخطوة، ستضيف CSS لتسهيل استخدام النموذج.
انسخ كل ملف CSS التالي والصقه في ملف css/main.css:
انقر على عرض التطبيق للاطّلاع على نموذج الاشتراك المخصّص. بعد ذلك، انقر على عرض المصدر للعودة إلى
css/main.css.
هل تعمل خدمة مقارنة الأسعار (CSS) هذه مع مجموعة متنوعة من المتصفّحات وأحجام الشاشات؟
جرِّب ضبط
paddingوmarginوfont-sizeبما يناسب أجهزتك الاختبارية.أن تكون صفحات الأنماط المتتالية (CSS) مخصّصة للأجهزة الجوّالة أولاً طلبات الوسائط: تُستخدَم لتطبيق قواعد CSS على مساحات العرض التي لا يقلّ عرضها عن
400px، ثم مرة أخرى على مساحات العرض التي لا يقلّ عرضها عن500px. هل هذه نقاط الاستراحة ملائمة؟ كيف يجب اختيار نقاط التوقف للنماذج؟
الخطوة 3: إضافة سمات لمساعدة المستخدمين في إدخال البيانات
في هذه الخطوة، تضيف سمات إلى عناصر الإدخال لتفعيل المتصفّح على تخزين قيم حقول النموذج وملؤها تلقائيًا، والتحذير من الحقول التي تحتوي على بيانات غير متوفّرة أو غير صالحة.
عدِّل ملف index.html لكي يظهر رمز النموذج على النحو التالي:
<form action="#" method="post">
<h1>Sign up</h1>
<section>
<label for="name">Full name</label>
<input id="name" name="name" autocomplete="name"
pattern="[\p{L}\.\- ]+" required>
</section>
<section>
<label for="email">Email</label>
<input id="email" name="email" autocomplete="username"
type="email" required>
</section>
<section>
<label for="password">Password</label>
<input id="password" name="password" autocomplete="new-password"
type="password" minlength="8" required>
</section>
<button id="sign-up">Sign up</button>
</form>
تؤدي قيم type العديد من المهام:
* تحجب type="password" النص أثناء إدخاله وتسمح
لمدير كلمات المرور في المتصفّح باقتراح كلمة مرور قوية.
* type="email" توفّر عملية التحقّق الأساسية وتؤكّد حصول مستخدمي الأجهزة الجوّالة على لوحة مفاتيح مناسبة. ننصحك بتجربتها.
انقر على عرض التطبيق، ثم على تصنيف البريد الإلكتروني. الإجراء يتم نقل التركيز إلى
إدخال البريد الإلكتروني لأنّ التصنيف يحتوي على قيمة for تتطابق مع id إدخال البريد الإلكتروني. تعمل التسميات والمدخلات الأخرى
بنفس الطريقة. تُعلن برامج قراءة الشاشة أيضًا عن نص التصنيف عند التركيز على التصنيف (أو الإدخال المرتبط بالتصنيف). يمكنك تجربة ذلك باستخدام إضافة ChromeVox.
جرِّب إرسال النموذج مع ترك حقل فارغ. لن يرسل المتصفّح النموذج، وسيطالب بإكمال البيانات الناقصة وضبط التركيز. وذلك لأنك أضفت السمة require إلى جميع
الإدخالات. حاوِل الآن إرسال طلب باستخدام كلمة مرور تتألّف من أقل من ثمانية أحرف. يحذر المتصفّح من أنّ
كلمة المرور ليست طويلة بما يكفي ويضبط التركيز على إدخال كلمة المرور بسبب سمة minlength="8"
. وينطبق الأمر نفسه على pattern (المستخدَمة لإدخال الاسم) وغيرها من
قيود التحقّق.
يجري المتصفح كل هذا تلقائيًا، بدون الحاجة إلى أي رمز إضافي.
من المنطقي استخدام القيمة autocomplete name لمدخل الاسم الكامل، ولكن ماذا عن
المدخلات الأخرى؟
* يشير الرمز autocomplete="username" في حقل الإدخال البريد الإلكتروني إلى أنّ خدمة إدارة كلمات المرور في المتصفّح ستخزِّن
عنوان البريد الإلكتروني بصفته "الاسم" لهذا المستخدم (اسم المستخدم) ليتم إرفاقه بكلمة المرور.
* يُعد autocomplete="new-password" لكلمة المرور تلميحًا لمدير كلمات المرور على أنه يجب أن يعرض تخزين هذه القيمة ككلمة مرور للموقع الإلكتروني الحالي. يمكنك بعد ذلك استخدام
autocomplete="current-password" لتفعيل ميزة الملء التلقائي في نموذج تسجيل الدخول (تذكَّر أنّ هذا هو
نموذج الاشتراك).
الخطوة 4: مساعدة المستخدمين على إدخال كلمات مرور آمنة
هل لاحظت أي مشكلة في إدخال كلمة المرور في النموذج كما هو؟
هناك مشكلتان: * ما مِن طريقة لمعرفة ما إذا كانت هناك قيود مفروضة على قيمة كلمة المرور. * لا يمكنك الاطّلاع على كلمة المرور للتحقّق من إدخالها بشكل صحيح.
لا تجعل المستخدمين يخمنون.
عدِّل قسم كلمة المرور في index.html باستخدام الرمز التالي:
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button" aria-label="Show password as plain text.
Warning: this will display your password on the screen.">Show password</button>
<input id="password" name="password" type="password" autocomplete="new-password"
minlength="8" aria-describedby="password-constraints" required>
<div id="password-constraints">Eight or more characters.</div>
</section>
يضيف ذلك ميزات جديدة لمساعدة المستخدمين في إدخال كلمات المرور:
- زر (في الواقع مجرد نص) لتبديل عرض كلمة المرور (ستتم إضافة وظيفة الزر باستخدام JavaScript).
- سمة
aria-labelلزر تبديل كلمة المرور - سمة
aria-describedbyلإدخال كلمة المرور تقرأ برامج قراءة الشاشة نص التصنيف، ونوع الإدخال (كلمة المرور)، ثم الوصف.
لتفعيل زر تبديل كلمة المرور وعرض معلومات للمستخدمين حول قيود كلمة المرور، انسخ كل رمز JavaScript أدناه والصقه في ملف js/main.js.
(تمّ وضع CSS من الخطوة 2. ألقِ نظرة لمعرفة كيفية تصميم زرّ تبديل كلمة المرور ووضعه.)
هل الرمز أفضل من النص لتبديل عرض كلمة المرور؟ جرِّب اختبار استخدام التطبيق بسعر مخفَّض مع مجموعة صغيرة من الأصدقاء أو الزملاء.
للتعرّف على طريقة عمل تطبيقات قراءة الشاشة مع النماذج، ثبِّت إضافة ChromeVox وانتقِل في النموذج. هل يمكنك إكمال النموذج باستخدام ChromeVox فقط؟ إذا لم يكن الأمر كذلك، ما الذي تريد تغييره؟
في ما يلي الشكل الذي يجب أن يظهر به النموذج في هذه المرحلة:
مزيد من المعلومات
لا يتناول هذا الدرس التطبيقي حول الترميز العديد من الميزات المهمة:
التحقّق من كلمات المرور التي يُحتمل أن تكون قد تعرّضت للاختراق يجب عدم السماح أبدًا بكلمات المرور التي تم اختراقها. يمكنك (ويجب) استخدام خدمة تتحقّق من كلمات المرور لرصد كلمات المرور التي تم اختراقها. يمكنك استخدام خدمة حالية أو تشغيل خدمة بنفسك على خوادمك. ننصحكم بتجربتها. أضِف ميزة التحقّق من كلمة المرور إلى النموذج.
رابط يؤدي إلى مستندات بنود الخدمة وسياسة الخصوصية: يجب توضيح كيفية حفاظك على أمان بيانات المستخدمين.
النمط والعلامة التجارية: تأكَّد من أنّهما متوافقان مع باقي أقسام موقعك الإلكتروني. عند إدخال الأسماء والعناوين وإجراء الدفع، يجب أن يشعر المستخدمون بالراحة والثقة بأنهم ما زالوا في المكان الصحيح.
الإحصاءات ومراقبة المستخدِمين الفعليين: يمكنك تفعيل اختبار أداء تصميم النموذج وقابليته للاستخدام ومراقبته من قِبل المستخدِمين الفعليين.