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

Sam Dutton

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

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

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

  • לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.

כדאי לעיין בקוד ה-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>

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

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

בדיקת הטופס

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

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

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

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

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

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

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

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

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

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