שימוש בתכונות דפדפן בפלטפורמות שונות כדי ליצור טופס כניסה

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, משתמשים בסמלים ולא בטקסט כדי להציג או להסתיר את הסיסמה. אחרי שתסיימו את ה-codelab הזה, תוכלו להטמיע את הפתרון הזה באמצעות תמונות 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. נסו דרכים שונות שיעזרו למשתמשים להזין כתובות אימייל וסיסמאות. שדות טובים יותר לסיסמאות כוללים כמה הצעות חכמות.

    כך הקוד אמור להיראות בשלב הזה:

להגיע רחוק יותר

התכונות האלה לא מוצגות ב-codelab הזה, אבל עדיין צריך את ארבע התכונות החשובות האלה בטופס הכניסה:

  • מוסיפים את הלחצן שכחת את הסיסמה? כדי שהמשתמשים יוכלו לאפס בקלות את הסיסמאות שלהם.

  • כדאי להוסיף קישור למסמכי התנאים וההגבלות ומדיניות הפרטיות כדי שהמשתמשים ידעו איך אתם מגנים על הנתונים שלהם.

  • כדאי לשקול את הסגנון והמיתוג, ולוודא שהתכונות הנוספות האלה תואמות לשאר האתר.

  • מומלץ להוסיף Analytics ו-RUM כדי לבדוק ולעקוב אחר הביצועים והשימושיות של עיצוב הטופס.