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

Sam Dutton

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

1. استخدام HTML ذي دلالة

تعرَّف على كيفية استخدام عناصر النماذج للاستفادة إلى أقصى حد من ميزات المتصفّح المضمّنة.

1. إنشاء Pen جديد

2. انسخ الرمز التالي والصِقه في "محرّر HTML".

   <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>
   

3. انقر على المعاينة المباشرة للاطّلاع على نموذج HTML. تتضمّن هذه الصفحة حقولاً للاسم وعنوان البريد الإلكتروني وكلمة المرور. لا يستخدم هذا النموذج سوى ملف CSS التلقائي للمتصفّح.

يتم وضع كل إدخال في قسم، ويكون لكل قسم تصنيف. يُعدّ زر الاشتراك، وهو أمر مهم، <button>. في وقت لاحق من هذا الدرس العملي، ستتعرّف على الميزات الخاصة بكل هذه العناصر.

اطرح على نفسك الأسئلة التالية:

• هل تبدو الأنماط التلقائية جيدة؟ ما هي التغييرات المطلوب إجراؤها لتحسين مظهر النموذج؟
• هل تعمل الأنماط التلقائية بشكلٍ جيد؟ ما هي المشاكل التي قد تحدث عند استخدام النموذج الحالي؟ ماذا عن الأجهزة الجوّالة؟ ماذا عن برامج قراءة الشاشة أو التقنيات المساعدة الأخرى؟
• مَن هم المستخدمون الذين تستهدفهم، وما هي الأجهزة والمتصفّحات التي تستهدفها؟

اختبار النموذج

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

• استخدام "وضع الجهاز" في "أدوات مطوّري البرامج في Chrome" لمحاكاة الأجهزة الجوّالة
• أرسِل عنوان URL من جهاز الكمبيوتر إلى هاتفك.
• استخدِم خدمة مثل BrowserStack للاختبار على مجموعة من الأجهزة والمتصفحات.
• جرِّب النموذج باستخدام أداة قارئ شاشة، مثل إضافة ChromeVox على Chrome.

افتح العرض المباشر في CodePen أو انتقِل إلى العرض المباشر. جرِّب النموذج على أجهزة مختلفة باستخدام "وضع الجهاز" في "أدوات مطوّري البرامج في Chrome".

افتح الآن النموذج على هاتف أو أجهزة حقيقية أخرى. ما هي الاختلافات التي تلاحظها؟

2. إضافة CSS لتحسين أداء النموذج

لا يوجد أي خطأ في رمز HTML حتى الآن، ولكن عليك التأكّد من أنّ النموذج يعمل بشكل جيد لدى مجموعة من المستخدمين على الأجهزة الجوّالة وأجهزة الكمبيوتر.

في هذه الخطوة، ستضيف CSS لتسهيل استخدام النموذج. انسخ رمز CSS هذا والصقه في الملف css/main.css.

انقر في المعاينة للاطّلاع على نموذج الاشتراك الذي تمّت إضافة أنماط إليه.

هل تعمل ورقة الأنماط المتتالية هذه مع مجموعة متنوعة من المتصفحات وأحجام الشاشات؟

• جرِّب ضبط padding وmargin وfont-size لتناسب أجهزتك الاختبارية.
• تكون صفحات الأنماط المتتالية (CSS) متوافقة مع الأجهزة الجوّالة أولاً. استخدِم استعلامات الوسائط لتطبيق قواعد CSS على إطارات العرض التي يبلغ عرضها 400px على الأقل، ثم استخدِمها مرة أخرى لإطارات العرض التي يبلغ عرضها 500px على الأقل. هل نقاط التوقف هذه كافية؟ كيف يجب اختيار نقاط التوقف للنماذج؟

3- إضافة سمات لمساعدة المستخدمين في إدخال البيانات

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

عدِّل رمز 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 في حقل إدخال البريد الإلكتروني. تعمل التصنيفات والمدخلات الأخرى بالطريقة نفسها. تُطلعك قارئات الشاشة أيضًا على نص التصنيف عندما يتم التركيز على التصنيف (أو الإدخال المرتبط بالتصنيف).

جرِّب إرسال النموذج مع ترك حقل فارغ. لن يرسل المتصفّح النموذج، وسيطلب منك إكمال البيانات الناقصة وتحديد موضع التركيز. ويرجع ذلك إلى أنّنا أضفنا السمة 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

يضيف هذا التحديث ميزات جديدة لمساعدة المستخدمين في إدخال كلمات المرور:

• زر (في الواقع هو مجرد نص) لتبديل عرض كلمة المرور (ستتم إضافة وظيفة الزر باستخدام JavaScript).
• سمة aria-label لزر تبديل كلمة المرور
• تمثّل هذه السمة حقل إدخال كلمة المرور.aria-describedby تقرأ قارئات الشاشة نص التصنيف ونوع الإدخال (كلمة المرور) ثم الوصف.

لتفعيل زر تبديل حالة كلمة المرور وعرض معلومات للمستخدمين حول قيود كلمة المرور، انسخ JavaScript، ثم الصِقه في محرّر JavaScript.

• هل سيكون استخدام رمز أفضل من استخدام نص لتفعيل أو إيقاف عرض كلمة المرور؟ جرِّب إجراء اختبار قابلية الاستخدام المخفَّض مع مجموعة صغيرة من الأصدقاء أو الزملاء.

• لتجربة طريقة عمل برامج قراءة الشاشة مع النماذج، ثبِّت إضافة ChromeVox وتنقَّل في النموذج. هل يمكنك إكمال النموذج باستخدام ChromeVox فقط؟ إذا لم يكن كذلك، ما الذي تريد تغييره؟

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

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

• جارٍ التحقّق من كلمات المرور المحتمَل تعرّضها للاختراق. يجب ألا تسمح أبدًا باستخدام كلمات مرور محتمَل تعرّضها للاختراق. يمكنك (ويجب) استخدام خدمة للتحقّق من كلمات المرور لرصد كلمات المرور التي تم اختراقها.

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

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

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