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

Sam Dutton

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

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. לוחצים על View App (הצגת האפליקציה) כדי לראות תצוגה מקדימה של טופס הכניסה. ה-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 כדי לבדוק את הביצועים ונוחות השימוש של עיצוב הטופס ולעקוב אחריהם.