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

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

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

איך מטמיעים

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

שימוש ב-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" בשדות להזנת כתובת אימייל – הדפדפן יאמת את הפורמט באופן אוטומטי. כדי למנוע שליחת טפסים ריקים, מוסיפים את המאפיין 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="current-password" לסיסמה קיימת

חובה: צריך להשתמש ב-autocomplete="current-password" בשדה להזנת הסיסמה בטופס הכניסה. כך הדפדפן יודע שאתם רוצים שהוא ישתמש בסיסמה הנוכחית ששמורה בו לאתר.

בטופס כניסה:

<input type="password" autocomplete="current-password" id="current-password" …>

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

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

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

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

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

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

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

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

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

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

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