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

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 Classic وانتقِل في النموذج. هل تعمل قيم aria-label على النحو المطلوب؟

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

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

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 حتى تتمكن من اختبار ومراقبة أداء تصميم النموذج وسهولة استخدامه.