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

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

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

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

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

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

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

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

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