Codelab שיטות מומלצות לשימוש בטופס הרשמה

Sam Dutton

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

שלב 1: שימוש ב-HTML בעל משמעות

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

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

כדאי לעיין בקוד ה-HTML של הטופס ב-index.html. יופיעו שדות להזנת שם, אימייל וסיסמה. כל אחת מהן נמצאת בקטע, ולכל אחת יש תווית. לחצן הרשמה הוא… <button>! בהמשך סדנת הקוד הזו תלמדו על היכולות המיוחדות של כל הרכיבים האלה.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

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

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

בדיקת הטופס

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

לוחצים על View App (הצגת האפליקציה) כדי לראות תצוגה מקדימה של טופס ההרשמה.

  • אפשר לנסות את הטופס במכשירים שונים באמצעות מצב מכשיר של כלי הפיתוח ל-Chrome.
  • עכשיו פותחים את הטופס בטלפון או במכשירים אמיתיים אחרים. אילו הבדלים אתם רואים?

שלב 2: מוסיפים CSS כדי לשפר את הטופס

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

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

בשלב הזה מוסיפים CSS כדי להקל על השימוש בטופס.

מעתיקים ומדביקים את כל קוד ה-CSS הבא בקובץ css/main.css:

לוחצים על הצגת האפליקציה כדי להציג את טופס ההרשמה המעוצב. לאחר מכן לוחצים על הצגת מקור כדי לחזור אל css/main.css.

  • האם שירות ה-CSS הזה פועל במגוון דפדפנים וגדלים של מסכים?

  • כדאי לנסות לשנות את padding, margin ו-font-size כך שיתאימו למכשירי הבדיקה.

  • קובץ ה-CSS הוא לפי שיטת Mobile-first. שאילתות מדיה משמשות להחלת כללי CSS על אזורי תצוגה שרוחבם לפחות 400px, ולאחר מכן שוב על סביבות תצוגה שרוחבן לפחות 500px. האם נקודות העצירה האלה מתאימות? איך בוחרים נקודות עצירה לטופס?

שלב 3: מוסיפים מאפיינים שיעזרו למשתמשים להזין נתונים

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

מעדכנים את הקובץ index.html כך שקוד הטופס ייראה כך:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

לערכים של type יש הרבה שימושים: * type="password" מטשטש את הטקסט בזמן ההזנה שלו ומאפשר למנהל הסיסמאות של הדפדפן להציע סיסמה חזקה. * type="email" מספק אימות בסיסי ומבטיח שמשתמשים בנייד יקבלו מקלדת מתאימה. כדאי לנסות!

לוחצים על הצגת האפליקציה ואז על התווית אימייל. מה קורה המיקוד עובר לקלט האימייל כי לתווית יש ערך for שתואם לערך id של קלט האימייל. שאר התוויות והקלט פועלים באותו אופן. קוראי מסך מכריזים על טקסט התווית גם כשהתווית (או הקלט המשויך לתווית) מקבלת את המיקוד. אפשר לנסות לעשות זאת באמצעות תוסף ChromeVox.

מנסים לשלוח את הטופס עם שדה ריק. הדפדפן לא ישלח את הטופס, ויוצג בקשה להשלים את הנתונים החסרים. הסיבה לכך היא שהוספתם את המאפיין require לכל הקלט. עכשיו נסו להזין סיסמה שמכילה פחות משמונה תווים. הדפדפן מזהיר שהסיסמה לא ארוכה מספיק ומעביר את המיקוד להזנת הסיסמה בגלל המאפיין minlength="8". כך גם לגבי pattern (משמש לקלט השם) ולמגבלות אימות אחרות. הדפדפן מבצע את כל הפעולות האלה באופן אוטומטי, בלי צורך בקוד נוסף.

הגיוני להשתמש בערך autocomplete‏ name בקלט Full name, אבל מה לגבי הקלטים האחרים? * הערך autocomplete="username" בשדה Email מציין שמנהל הסיסמאות של הדפדפן יאחסן את כתובת האימייל בתור 'שם' של המשתמש הזה (שם המשתמש!) שילווה את הסיסמה. * הערך autocomplete="new-password" בשדה סיסמה הוא רמז למנהל הסיסמאות, שמציע לשמור את הערך הזה בתור הסיסמה לאתר הנוכחי. לאחר מכן תוכלו להשתמש ב- autocomplete="current-password" כדי להפעיל את המילוי האוטומטי בטופס כניסה (חשוב לזכור, זה טופס הרשמה).

שלב 4: עוזרים למשתמשים להזין סיסמאות מאובטחות

האם שמת לב למשהו לא בסדר בהזנת הסיסמה בטופס?

יש שתי בעיות: * אין דרך לדעת אם יש אילוצים על ערך הסיסמה. * לא ניתן לראות את הסיסמה כדי לבדוק אם הזנתם אותה נכון.

אל תגרמו למשתמשים לנחש!

מעדכנים את הקטע של הסיסמה ב-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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

נוספו תכונות חדשות שיעזרו למשתמשים להזין סיסמאות:

  • לחצן (למעשה רק טקסט) להחלפת מצב של תצוגת הסיסמה. (פונקציונליות הלחצן תתווסף באמצעות JavaScript).
  • מאפיין aria-label ללחצן החלפת הסיסמה.
  • מאפיין aria-describedby להזנה של הסיסמה. קוראי מסך קוראים את טקסט התווית, את סוג הקלט (סיסמה) ואז את התיאור.

כדי להפעיל את לחצן החלפת המצב של הסיסמה ולהציג למשתמשים מידע על אילוצים של סיסמאות, מעתיקים את כל הקוד של JavaScript שבהמשך ומדביקים אותו בקובץ js/main.js שלכם.

(קוד ה-CSS כבר מוטמע משלב 2. כדאי לעיין בו כדי לראות איך לחצן החלפת המצב של הסיסמה מוגדר מבחינת העיצוב והמיקום).

  • האם סמל יעזור יותר מטקסט כדי להחליף את תצוגת הסיסמה? כדאי לנסות את בדיקת נוחות השימוש בהנחות עם קבוצה קטנה של חברים או קולגות.

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

כך ייראה הטופס שלכם בשלב הזה:

המשך

בקודלאב הזה לא נסביר על כמה תכונות חשובות:

  • בדיקה לאיתור סיסמאות שנחשפו. אסור אף פעם לאפשר סיסמאות שנחשפו. אתם יכולים (וצריך) להשתמש בשירות לבדיקת סיסמאות כדי לזהות סיסמאות שנחשפו. אתם יכולים להשתמש בשירות קיים או להפעיל שירות בעצמכם בשרתים שלכם. כדאי לנסות! כדאי להוסיף בדיקת סיסמה לטופס.

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

  • סגנון ומיתוג: חשוב לוודא שהם תואמים לשאר האתר. כשמשתמשים מזינים שמות וכתובות ומבצעים תשלום, הם צריכים להרגיש בנוח ולדעת שהם עדיין במקום הנכון.

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