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

Sam Dutton

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

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

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

  1. יוצרים Pen חדש.

  2. מעתיקים את הקוד הבא ומדביקים אותו בעורך ה-HTML.

    <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>

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

כל קלט נמצא בקטע משלו ויש לו תווית. חשוב לציין שהכפתור להרשמה הוא <button>. בהמשך ה-codelab הזה תלמדו על היכולות המיוחדות של כל הרכיבים האלה.

כדאי לשאול את עצמכם את השאלות הבאות:

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

בדיקת הטופס

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

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

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

2. הוספת CSS כדי לשפר את הפעולה של הטופס

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

בשלב הזה תוסיפו CSS כדי להקל על השימוש בטופס. מעתיקים ומדביקים את ה-CSS הזה לקובץ css/main.css.

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

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

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

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

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

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

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

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

השימוש בערך autocomplete name בשדה שם מלא הגיוני, אבל מה לגבי שדות הקלט האחרים?

  • ‫autocomplete="username" בשדה אימייל מציין שמנהל הסיסמאות של הדפדפן ישמור את כתובת האימייל בתור 'השם' של המשתמש הזה (שם המשתמש!) יחד עם הסיסמה.
  • ‫autocomplete="new-password" עבור 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

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

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

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

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

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

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

  • מתבצעת בדיקה לאיתור סיסמאות שנחשפו. אסור לאפשר שימוש בסיסמאות שנחשפו. מומלץ להשתמש בשירות לבדיקת סיסמאות כדי לזהות סיסמאות שנחשפו.

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

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

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