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

סאם דוטון

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

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

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

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

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

<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 מלבד סגנונות הדפדפן המוגדרים כברירת מחדל.

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

בדיקת הטופס

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

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

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

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

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

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

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

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

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

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

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

  • שירות ה-CSS מתמקד בניידים. שאילתות מדיה משמשות להחלה של כללי 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 עבור קלט השם המלא, אבל מה לגבי מקורות קלט אחרים? * autocomplete="username" בקלט Email פירושו שמנהל הסיסמאות של הדפדפן ישמור את כתובת האימייל בתור 'השם' של המשתמש (שם המשתמש!) שאליו ישויך הסיסמה. * הסמל autocomplete="new-password" לסיסמה הוא רמז למנהל הסיסמאות שכדאי לו להציע לשמור את הערך הזה כסיסמה של האתר הנוכחי. לאחר מכן אפשר להשתמש במאפיין autocomplete="current-password" כדי להפעיל את המילוי האוטומטי בטופס כניסה (חשוב לזכור שמדובר בטופס sign-up).

שלב 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? אם לא, מה הייתם משנים?

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

להגיע רחוק יותר

ה-Codelab הזה לא עוסק בכמה תכונות חשובות:

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

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

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

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