איך ליצור טופס הרשמה בהתאם לשיטות המומלצות

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

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

איך מטמיעים

בהמשך מפורטות ההנחיות החשובות ביותר ליצירת טופסי הרשמה מוצלחים.

שימוש ב-HTML תקין ומשמעותי

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

• <form>, <input>, <label> וגם <button>
• ‫type,‏ autocomplete וגם inputmode

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

משתמשים ברכיב <label> כדי לתייג שדות בטופס להזנת נתונים

כדי לתייג <input>, <select> או <textarea>, משתמשים ב-<label>. כדי לשייך תווית לקלט, נותנים למאפיין for של התווית את אותו ערך כמו של המאפיין id של הקלט.

איך להפיק את המקסימום ממאפייני HTML

כדי להקל על המשתמשים להזין נתונים, משתמשים במאפיין המתאים של רכיב <input> <type> כדי לספק את המקלדת הנכונה בנייד ולהפעיל אימות בסיסי מובנה בדפדפן.

תמיד צריך להשתמש ב-type="email" לכתובות אימייל וב-type="tel" למספרי טלפון.

כדי לשפר את הנגישות ולעזור למשתמשים להימנע מהזנה חוזרת של נתונים, כל רכיב <input>,‏ <select> ו-<textarea> צריך לכלול מאפיין autocomplete מתאים.

שדות הקלט של שם המשתמש וכתובת האימייל מכילים מזהים, לא טקסט. צריך להוסיף את spellcheck="false" כדי שהדפדפן לא ישכתב אותם למשהו שלא תואם לחשבון. האפשרויות autocorrect ו-autocapitalize תמיד מושבתות ב-input type="email", אבל הן נדרשות לשמות משתמשים שהם לא כתובות אימייל.

כפתורים מועילים

שימוש ב<button> לכפתורים. אפשר גם להשתמש ב-<input type="submit">, אבל אל תשתמשו ב-div או ברכיב אקראי אחר שפועל כלחצן. רכיבי כפתורים מספקים התנהגות נגישה, פונקציונליות מובנית של שליחת טפסים, וקל לעצב אותם.

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

אם אפשר, השתמשו בשדה אחד להזנת השם

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

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

הצגת ההתקדמות בהרשמה

בכל שלב בתהליך ההרשמה, השתמשו בכותרות דפים ובערכי לחצנים תיאוריים שמבהירים מה צריך לעשות עכשיו ומה השלב הבא.

משתמשים במאפיין enterkeyhint בשדות הקלט של הטופס כדי להגדיר את התווית של מקש Enter במקלדת בנייד. לדוגמה, אפשר להשתמש ב-enterkeyhint="previous" וב-enterkeyhint="next" בטופס עם כמה דפים, ב-enterkeyhint="done" לקלט האחרון בטופס וב-enterkeyhint="search" לקלט של חיפוש.

איך לעזור למשתמשים להימנע מהזנה חוזרת של נתוני ההרשמה

חשוב להוסיף ערכי autocomplete מתאימים בטופסי ההרשמה.

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

חשוב לבדוק את הפרטים בקפידה

אימות של הזנת הנתונים גם בזמן אמת וגם לפני שליחת הטופס. השתמשו ב-type="email" בשדות להזנת כתובת אימייל – הדפדפן יאמת את הפורמט באופן אוטומטי. בשדות של סיסמאות, השתמשו במאפיין pattern כדי לאכוף דרישות חוזק ולספק הודעות שגיאה ברורות כשהאימות נכשל. כדי למנוע שליחת טפסים ריקים, מוסיפים את המאפיין required לשדות החובה.

הצבת ההרשמה ברכיב <form> משלה

תמיד צריך להשתמש ברכיב <form> כשמבקשים מהמשתמשים להזין נתונים

אל תעטפו את הקלט בתג <div> וטפלו בשליחת נתוני הקלט רק באמצעות JavaScript. בדרך כלל עדיף להשתמש ברכיב <form>. כך האתר שלכם יהיה נגיש לקוראי מסך ולמכשירים מסייעים אחרים, יתאפשרו מגוון תכונות מובנות בדפדפן, יהיה קל יותר ליצור הרשמה פונקציונלית בסיסית לדפדפנים ישנים יותר, והאתר עדיין יוכל לפעול גם אם JavaScript נכשל.

אל תזינו את אותם נתונים פעמיים

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

שמירה על פרטיות הסיסמאות – אבל מאפשרת למשתמשים לראות אותן אם הם רוצים

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

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

הצגת המקלדת המתאימה למשתמשים בנייד

אפשר להשתמש ב-<input type="email"> כדי לתת למשתמשים בנייד מקלדת מתאימה ולהפעיל אימות בסיסי מובנה של כתובת אימייל על ידי הדפדפן… בלי צורך ב-JavaScript.

אם אתם צריכים להשתמש במספר טלפון במקום בכתובת אימייל, <input type="tel"> מפעיל לוח חיוג בנייד. אפשר גם להשתמש במאפיין inputmode במקומות שבהם הוא נדרש: inputmode="numeric" מתאים במיוחד לקודי אימות.

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

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

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

עוזרים למשתמשים להימנע מהזנה חוזרת של נתונים

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

1. המאפיינים autocomplete,‏ name,‏ id ו-type עוזרים לדפדפנים להבין את התפקיד של הקלט כדי לאחסן נתונים שאפשר להשתמש בהם מאוחר יותר למילוי אוטומטי. כדי לאפשר אחסון של נתונים למילוי אוטומטי, דפדפנים מודרניים דורשים גם שלרכיבי הקלט יהיה ערך name או id יציב (שלא נוצר באופן אקראי בכל טעינת דף או פריסת אתר), ושהם יהיו ברכיב <form> עם לחצן submit.
2. המאפיין autocomplete עוזר לדפדפנים למלא באופן אוטומטי קלט באמצעות נתונים מאוחסנים.

בשדות להזנת כתובת אימייל, צריך להשתמש ב-autocomplete="username", כי מנהלי סיסמאות בדפדפנים מודרניים מזהים את username – למרות שצריך להשתמש ב-type="email" ואולי תרצו להשתמש ב-id="email" וב-name="email". בשדות להזנת סיסמה, השתמשו בערך המתאים של autocomplete כדי לעזור לדפדפנים להבדיל בין סיסמאות חדשות לסיסמאות קיימות.

שימוש ב-autocomplete="new-password" לסיסמה חדשה

חובה: בטופס הרשמה, צריך להשתמש ב-autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

הדפדפן יכול להציע סיסמה חזקה

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

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

עוזרים למשתמשים לא לפספס בטעות קלט

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

אפשר להדביק סיסמאות

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

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

הצעת התחברות באמצעות צד שלישי

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

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

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

היזהרו עם שמות משתמשים

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

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

חשוב גם להשתמש ב-autocomplete="username" לשמות משתמשים.

אסטרטגיות חלופיות

מילוי אוטומטי הוא שיפור הדרגתי (progressive enhancement). בדפדפנים שלא תומכים במילוי אוטומטי, המשתמשים יצטרכו להזין ידנית את פרטי ההרשמה שלהם. האילוצים הסמנטיים של HTML (כמו type,‏ inputmode ו-required) עדיין יפעלו כראוי כדי לאמת את הקלט של המשתמשים ולספק את המקלדות הווירטואליות הנכונות.