استخدام ميزات المتصفّح التي تعمل على عدّة أنظمة أساسية لإنشاء نموذج تسجيل دخول

سام دوتون

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

1- استخدام ترميز HTML مفيد

استخدم هذه العناصر المصممة للوظيفة:

  • <form>
  • <section>
  • <label>
  • <button>

كما ترى، تعمل هذه العناصر على تمكين وظائف المتصفح المضمنة، وتحسين إمكانية الوصول، وإضافة معنى إلى الترميز.

  1. انقر على Remix لتعديله ليصبح المشروع قابلاً للتعديل.

  2. أضِف الرمز التالي إلى العنصر <body>:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    إليك المظهر الذي يجب أن يبدو عليه ملف index.html في هذه المرحلة:

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

  4. انقر على عرض المصدر للعودة إلى رمز المصدر.

2- تصميم ليناسب الأصابع والإبهام

اضبط المساحة المتروكة والهوامش وأحجام الخطوط لضمان عمل الإدخالات بشكل جيد على الأجهزة الجوّالة.

  1. انسخ لغة CSS التالية والصقها في ملف style.css:

  2. انقر على عرض التطبيق لعرض نموذج تسجيل الدخول ذي التصميم الحديث.

  3. انقر على عرض المصدر للرجوع إلى ملف style.css.

هذا قدر كبير من التعليمات البرمجية! الأشياء الأساسية التي يجب أن تكون على دراية بها هي التغييرات التي تطرأ على الأحجام:

  • تمت إضافة padding وmargin إلى المدخلات.
  • يختلف font-size بين الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

يتم استخدام أداة الاختيار :invalid للإشارة إلى الحالات التي يحتوي فيها أحد الإدخالات على قيمة غير صالحة. لا يعمل هذا حتى الآن.

تنسيق CSS هو للأجهزة الجوّالة أولاً:

  • يتم استخدام CSS افتراضيًا لإطارات العرض التي يقل عرضها عن 450 بكسل.
  • يضبط قسم الاستعلام عن الوسائط إلغاءات لإطارات العرض التي لا يقل عرضها عن 450 بكسل.

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

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

3. إضافة سمات الإدخال لتفعيل ميزات المتصفّح المضمَّنة

يمكنك تفعيل المتصفّح لتخزين قيم الإدخال والملء التلقائي لها، وتوفير إمكانية الوصول إلى الميزات المدمجة لإدارة كلمات المرور.

  1. أضِف سمات إلى ترميز HTML للنموذج كي يبدو على النحو التالي:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. اطّلِع على تطبيقك مرة أخرى، ثم انقر على البريد الإلكتروني.

    لاحظ كيف ينتقل التركيز إلى إدخال البريد الإلكتروني. ويرجع ذلك إلى أنّ التصنيف مرتبط بالإدخال من خلال السمة for="email". تعلن برامج قراءة الشاشة أيضًا عن نص التصنيف عندما يتم التركيز على التصنيف أو الإدخال المرتبط به.

  3. التركيز على إدخال البريد الإلكتروني على جهاز جوّال

    لاحظ كيف يتم تحسين لوحة المفاتيح لكتابة عنوان البريد الإلكتروني. على سبيل المثال، قد يتم عرض الحرفين @ و. على لوحة المفاتيح الأساسية، وقد يعرض نظام التشغيل الرسائل الإلكترونية المخزّنة فوق لوحة المفاتيح. يحدث كل هذا بسبب تطبيق السمة type="email" على عنصر <input>.

    لوحة مفاتيح البريد الإلكتروني التلقائية على نظام التشغيل iOS.

  4. اكتب نصًا في إدخال كلمة المرور.

    يكون النص مخفيًا تلقائيًا بسبب تطبيق السمة type="password" على العنصر.

  • تساعد السمات autocomplete وname وid وtype المتصفّحات في التعرّف على دور الإدخالات من أجل تخزين البيانات التي يمكن استخدامها لاحقًا للملء التلقائي.
  1. ركِّز على إدخال البريد الإلكتروني على جهاز كمبيوتر مكتبي واكتب بعض النصوص. يمكنك الاطّلاع على عنوان URL لتطبيقك عند النقر على رمز ملء الشاشة رمز ملء الشاشة. إذا خزّنت أي عنوان بريد إلكتروني في المتصفح، فمن المحتمل أن يظهر مربع حوار يتيح لك الاختيار من بين هذه الرسائل الإلكترونية المخزنة. ويحدث ذلك بسبب تطبيق السمة autocomplete="username" على إدخال البريد الإلكتروني.
  • يساعد الترميزان autocomplete="username" وautocomplete="current-password" في استخدام القيم المخزنة لملء الإدخالات تلقائيًا.

تستخدم المتصفحات المختلفة تقنيات مختلفة لتحديد دور إدخالات النموذج وتوفير ميزة الملء التلقائي لمجموعة من المواقع الإلكترونية المختلفة.

يمكنك إضافة سمات وإزالتها لتجربة ذلك بنفسك.

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

إليك المظهر الذي يجب أن يبدو عليه ملف index.html في هذه المرحلة:

4- إضافة واجهة مستخدم لتبديل عرض كلمة المرور

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

التعليمة البرمجية لإضافة هذه الوظيفة واضحة. يستخدم هذا المثال نصًا وليس رمزًا.

عدِّل ملفات index.html وstyle.css وscript.js على النحو التالي.

  1. أضِف مفتاح تبديل إلى قسم كلمات المرور في ملف 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="current-password" required>
</section>

  2. أضِف CSS التالية إلى أسفل ملف style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    وهذا يجعل الزر إظهار كلمة المرور يبدو كنص عادي ويعرضه في أعلى الجانب الأيسر من قسم كلمة المرور.

  3. أضِف JavaScript التالي إلى ملف script.js لتفعيل عرض كلمة المرور أو إيقافه وضبط aria-label المناسب:

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. جرِّب منطق "عرض كلمة المرور" الآن.

    1. اعرض تطبيقك.

    2. أدخِل نصًا في حقل كلمة المرور.

    3. انقر على عرض كلمة المرور.

  5. كرر الخطوة الرابعة على عدة متصفحات على أنظمة تشغيل مختلفة.

فكّر في تصميم تجربة المستخدم: هل سيلاحظ المستخدمون عرض كلمة المرور ويفهمونها؟ هل هناك طريقة أفضل لتوفير هذه الوظيفة؟ هذا وقت مناسب لتجربة اختبار قابلية الاستخدام المخفّض مع مجموعة صغيرة من الأصدقاء أو الزملاء.

لفهم آلية عمل هذه الوظيفة لبرامج قراءة الشاشة، عليك تثبيت الإضافة ChromeVox الكلاسيكية والتنقّل في النموذج. هل تعمل قيم aria-label على النحو المطلوب؟

تستخدم بعض المواقع الإلكترونية، مثل Gmail، الرموز لعرض كلمة المرور، وليس الرموز النصية. وعند الانتهاء من هذا الدرس التطبيقي حول الترميز، نفِّذه باستخدام صور SVG. يوفّر Material Design رموزًا عالية الجودة يمكنك تنزيلها مجانًا.

إليك الكيفية التي يجب أن تبدو بها التعليمة البرمجية في هذه المرحلة:

5- إضافة التحقق من صحة النموذج

يمكنك مساعدة المستخدمين في إدخال بياناتهم بشكل صحيح عندما تسمح لهم بالتحقق من صحة بياناتهم قبل إرسال النموذج وتوضيح ما يحتاجون إلى تغييره.

تحتوي عناصر وسمات نماذج HTML على ميزات مضمّنة للتحقق الأساسي، ولكن يجب أيضًا استخدام JavaScript لإجراء عمليات تحقّق أكثر فعالية أثناء إدخال المستخدمين البيانات وعندما يحاولون إرسالها.

تستخدم هذه الخطوة واجهة برمجة تطبيقات التحقّق من صحة القيود (وهي متوافقة على نطاق واسع) لإضافة عملية تحقّق مخصّصة باستخدام واجهة مستخدم مضمَّنة في المتصفّح تضبط التركيز وتعرض الطلبات.

أخبر المستخدمين بالقيود المفروضة على كلمات المرور وأي إدخالات أخرى. لا تجعلهم يخمنون!

  1. تعديل قسم كلمة المرور في ملف 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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

يؤدي هذا الإجراء إلى إضافة ميزتين جديدتين، وهما:

  • معلومات حول قيود كلمة المرور
  • سمة aria-describedby لإدخال كلمة المرور (تقرأ برامج قراءة الشاشة نص التصنيف ونوع الإدخال (كلمة المرور) ثم الوصف)

  1. أضِف CSS التالية إلى أسفل ملف style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. أضِف JavaScript التالي إلى ملف script.js:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. تجربة

    تحتوي جميع المتصفحات الحديثة على ميزات مدمجة للتحقق من صحة النماذج ودعم التحقق باستخدام JavaScript.

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

    2. أدخِل عنوان بريد إلكتروني صالحًا ثم انقر على تسجيل الدخول بدون قيمة كلمة المرور. يحذّر المتصفّح من أنّك فقدت قيمة مطلوبة ويضبط التركيز على إدخال كلمة المرور.

    3. أدخِل كلمة مرور غير صالحة وانقر على تسجيل الدخول. تظهر لك الآن رسائل مختلفة بناءً على المشكلة.

  4. جرِّب طرقًا مختلفة لمساعدة المستخدمين في إدخال عناوين البريد الإلكتروني وكلمات المرور. يمكنك تحسين حقول نماذج كلمات المرور لتقديم بعض الاقتراحات الذكية.

    إليك الكيفية التي يجب أن تبدو بها التعليمة البرمجية في هذه المرحلة:

تحقيق الإنجازات

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

  • أضف عبارة هل نسيت كلمة المرور؟، وهو زر يسهّل على المستخدمين إعادة ضبط كلمات مرورهم.

  • أدرِج بنود الخدمة ومستندات سياسة الخصوصية حتى يعرف المستخدمون الطريقة التي تحمي بها بياناتهم.

  • ضع في اعتبارك النمط والعلامة التجارية، وتأكد من تطابق هذه الميزات الإضافية مع بقية موقعك على الويب.

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