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

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

  4. לוחצים על הצגת המקור כדי לחזור לקוד המקור.

2. עיצוב לאצבעות ולבוהן

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

  1. מעתיקים את הקוד הבא של CSS ומדביקים אותו בקובץ style.css:

  2. לוחצים על הצגת האפליקציה כדי לראות את טופס הכניסה החדש.

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

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

המשך למידע נוסף

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

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

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

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

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