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

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

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

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

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

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

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

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

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