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

Sam Dutton

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

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

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

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

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

  1. انقر على "إنشاء ريمكس" لتعديله لجعل المشروع قابلاً للتعديل.

  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" المتصفّحات في استخدام القيم المخزّنة لملء البيانات تلقائيًا.

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

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

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

في ما يلي الشكل الذي من المفترض أن يظهر به ملف 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. يوفّر التصميم المتعدد الأبعاد رموزًا عالية الجودة يمكنك تنزيلها مجانًا.

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

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

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

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

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

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

  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. جرِّب طرقًا مختلفة لمساعدة المستخدمين على إدخال عناوين البريد الإلكتروني وكلمات المرور. حقول نماذج كلمات المرور الأفضل تقدّم بعض الاقتراحات الذكية.

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

مزيد من التفاصيل

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

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

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

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

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