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

Sam Dutton

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

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

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

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

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

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

הערה: ברכיבי <input> אין תגים סוגרים. הסיבה לכך היא שיש בהם רכיבים מבוטלים (ריקים): אין בהם תוכן כשלעצמם. הסימן '/' בסוף רכיב ריק הוא אופציונלי: <input> או <input /> תקינים.

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

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

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

בדיקת הטופס

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הערה: בשיטות המומלצות לשימוש בטופסי כניסה יש טיפים נוספים לשיפור העיצוב, הפריסה והנגישות של טפסים.

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

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

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

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

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

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

המשך

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

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

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

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

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