الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات في نموذج الاشتراك

Sam Dutton

يوضّح لك هذا الدليل التعليمي كيفية إنشاء نموذج تسجيل آمن وسهل الاستخدام ومتاح للجميع.

الخطوة 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".
  • الآن، افتح النموذج على هاتف أو أجهزة حقيقية أخرى. ما هي الاختلافات التي تلاحظها؟

الخطوة 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 فقط؟ إذا لم يكن الأمر كذلك، ما الذي تريد تغييره؟

في ما يلي الشكل الذي يجب أن يظهر به النموذج في هذه المرحلة:

مزيد من المعلومات

لا يتناول هذا الدرس التطبيقي حول الترميز العديد من الميزات المهمة:

  • التحقّق من كلمات المرور التي يُحتمل أن تكون قد تعرّضت للاختراق يجب عدم السماح أبدًا بكلمات المرور التي تم اختراقها. يمكنك (ويجب) استخدام خدمة تتحقّق من كلمات المرور لرصد كلمات المرور التي تم اختراقها. يمكنك استخدام خدمة حالية أو تشغيل خدمة بنفسك على خوادمك. ننصحكم بتجربتها. أضِف ميزة التحقّق من كلمة المرور إلى النموذج.

  • رابط يؤدي إلى مستندات بنود الخدمة وسياسة الخصوصية: يجب توضيح كيفية حماية بيانات المستخدمين للمستخدمين.

  • النمط والعلامة التجارية: تأكَّد من أنّهما متوافقان مع باقي أقسام موقعك الإلكتروني. عند إدخال الأسماء والعناوين وإجراء الدفع، يجب أن يشعر المستخدمون بالراحة والثقة بأنّهم لا يزالون في المكان المناسب.

  • الإحصاءات ومراقبة المستخدِمين الفعليين: يمكنك تفعيل اختبار أداء تصميم النموذج وقابليته للاستخدام ومراقبته من قِبل المستخدِمين الفعليين.