דף זה תורגם על ידי Cloud Translation API.

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

Sam Dutton

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

‫1. שימוש ב-HTML בעל משמעות

כדי לבצע את המשימה, צריך להשתמש ברכיבים הבאים:

<form>
<section>
<label>
<button>

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

כדי לערוך את הפרויקט, לוחצים על 'רמיקס'.

מוסיפים את הקוד הבא לרכיב <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 בשלב הזה:

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

‫2. עצבו את האצבעות והאצבעות

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

מעתיקים את קוד ה-CSS הבא ומדביקים אותו בקובץ style.css:
לוחצים על הצגת האפליקציה כדי להציג את טופס הכניסה בעיצוב החדש.
לוחצים על הצגת מקור כדי לחזור לקובץ style.css.

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

padding ו-margin נוספו לקלט.
יש הבדל בין font-size לנייד ולמחשב.

הבורר :invalid משמש כדי לציין מתי לקלט יש ערך לא חוקי. זה עדיין לא עובד.

פריסת ה-CSS מתמקדת בניידים:

ברירת המחדל של שירות ה-CSS מיועדת לאזורי תצוגה שרוחבם קטן מ-450 פיקסלים.
הקטע של שאילתת המדיה מגדיר שינויים לאזורי תצוגה ברוחב של 450 פיקסלים לפחות.

כשאתם בונים טופס משלכם, חשוב מאוד בשלב הזה של התהליך לבדוק את הקוד במכשירים אמיתיים במחשב ובנייד:

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

3. הוספת מאפייני קלט כדי להפעיל תכונות דפדפן מובנות

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

מוסיפים מאפיינים לקוד ה-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>

מציגים שוב את האפליקציה ולוחצים על אימייל.

שימו לב איך המיקוד עובר לקלט האימייל. הסיבה לכך היא שהתווית משויכת לקלט באמצעות המאפיין for="email". קוראי מסך גם מכריזים על טקסט התווית כשהמיקוד הוא על התווית או על הקלט המשויך לתווית.
למקד את קלט האימייל במכשיר נייד.

שימו לב שהמקלדת מותאמת להקלדת כתובת אימייל. לדוגמה, ייתכן שהתווים @ ו-. יוצגו במקלדת הראשית, ומערכת ההפעלה תציג הודעות אימייל שמורות מעל המקלדת. כל זה קורה כי המאפיין type="email" מוחל על רכיב <input>.
מקלידים טקסט בהזנת הסיסמה.

הטקסט מוסתר כברירת מחדל כי המאפיין type="password" הוחל על הרכיב.

המאפיינים autocomplete, name, id ו-type עוזרים לדפדפנים להבין את התפקיד של הקלט לצורך אחסון נתונים שניתן להשתמש בהם מאוחר יותר למילוי אוטומטי.

מעבירים את קלט האימייל במחשב למחשב ומקלידים טקסט. כתובת ה-URL של האפליקציה מופיעה בלחיצה על מסך מלא . אם אחסנתם כתובות אימייל בדפדפן, סביר להניח שתוצג תיבת דו-שיח שבה תוכלו לבחור מתוך האימיילים השמורים האלה. הסיבה לכך היא שהמאפיין autocomplete="username" הוחל על קלט האימייל.

autocomplete="username" ו-autocomplete="current-password" עוזרים לדפדפנים להשתמש בערכים מאוחסנים כדי למלא את הקלט באופן אוטומטי.

הערה: להזנת קלט של אימייל, כדאי להשתמש ב-autocomplete="username" כי מנהלי סיסמאות מזהים את username בדפדפנים מודרניים, למרות שצריך להשתמש ב-type="email". כדאי להשתמש גם ב-id="email" וב-name="email".

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

אפשר להוסיף ולהסיר מאפיינים כדי לנסות זאת בעצמך.

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

כך אמור להיראות קובץ ה-index.html בשלב הזה:

‫4. הוספת ממשק משתמש להחלפת מצב של תצוגת הסיסמאות

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

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

מעדכנים את הקבצים index.html, style.css ו-script.js באופן הבא.

צריך להוסיף מתג לקטע הסיסמאות בקובץ 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>

מוסיפים את שירות ה-CSS הבא לתחתית הקובץ style.css:
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
כך הלחצן הצגת הסיסמה ייראה כמו טקסט פשוט והוא יוצג בפינה השמאלית העליונה של קטע הסיסמה.

מוסיפים את קוד ה-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.');
  }
}

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

חשוב על עיצוב חוויית המשתמש: האם המשתמשים יבחינו באפשרות הצגת הסיסמה ויבינו אותה? האם יש דרך טובה יותר לספק את הפונקציונליות הזו? זהו זמן טוב לנסות בדיקת נוחות השימוש בהנחה עם קבוצה קטנה של חברים או עמיתים.

כדי להבין איך הפונקציונליות הזו עובדת בקוראי מסך, צריך להתקין את התוסף הקלאסי של ChromeVox ולנווט בטופס. האם הערכים של aria-label פועלים כמו שצריך?

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

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

5. הוספת אימות של טופס

אפשר לעזור למשתמשים להזין את הנתונים שלהם בצורה נכונה ולאפשר להם לאמת את הנתונים שלהם לפני שליחת הטופס ולהראות להם מה הם צריכים לשנות.

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

בשלב הזה נעשה שימוש ב-Constraint Validation API (שנתמך באופן נרחב) כדי להוסיף אימות בהתאמה אישית באמצעות ממשק משתמש מובנה של הדפדפן, שבו מוגדר המיקוד ומציג הנחיות.

אומרים למשתמשים את המגבלות על סיסמאות ועל קלט אחר. אל תגרום להם לנחש!

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

מוסיפים את שירות ה-CSS הבא לתחתית הקובץ style.css:
```
div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}
```

מוסיפים את קוד ה-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';
  }
}

רוצה לנסות?

בכל הדפדפנים החדשים יש תכונות מובנות לאימות טפסים ולתמיכה באימות באמצעות JavaScript.
1. מזינים כתובת אימייל לא חוקית ולוחצים על כניסה. הדפדפן מציג אזהרה - אין צורך ב-JavaScript!
2. מזינים כתובת אימייל חוקית, ולאחר מכן לוחצים על כניסה ללא ערך סיסמה. הדפדפן מזהיר שלא פספסתם ערך נדרש, ומגדיר את המיקוד בקלט הסיסמה.
3. מזינים סיסמה לא חוקית ולוחצים על כניסה. עכשיו יוצגו לך הודעות שונות, בהתאם לבעיה.
אפשר לנסות דרכים שונות לעזור למשתמשים להזין כתובות אימייל וסיסמאות. שדות טובים יותר בטופס הסיסמה מציעים כמה הצעות חכמות.

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

המשך

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

מוסיפים את הלחצן שכחת את הסיסמה? – לחצן שמאפשר למשתמשים לאפס את הסיסמאות שלהם בקלות.
כדאי לקשר לתנאים ולהגבלות ולמסמכי מדיניות הפרטיות שלכם, כדי שהמשתמשים ידעו איך אתם מגנים על הנתונים שלהם.
כדאי להביא בחשבון את הסגנון והמיתוג, ולוודא שהתכונות הנוספות האלה מתאימות לשאר האתר.
מוסיפים Analytics ו-RUM כדי לבדוק את הביצועים ונוחות השימוש של עיצוב הטופס ולעקוב אחריהם.