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

סאם דוטון

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

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

כך הקוד שלכם צריך להיראות בנקודה זו:

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