מילוי אוטומטי

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

איך פועל המילוי האוטומטי?

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

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

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

<label for="name">Name</label>
<input name="name" id="name">

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

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

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

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

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

לא בכל טופס כתובת יש את אותם שדות, וגם סדר השדות משתנה. שימוש בערכים הנכונים עבור autocomplete מבטיח שהדפדפן ימלא את הערכים הנכונים בטופס. יש ערכים ל-country,‏ postal-code ועוד רבים.

לוודא שהמשתמשים יכולים להיכנס לחשבון במהירות ולהשתמש בסיסמאות מאובטחות

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

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

אתם יכולים להשתמש ב-autocomplete="email" בשדה אימייל, כדי שהמשתמשים יקבלו את האפשרות למילוי אוטומטי של כתובת אימייל.

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

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

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

האם לא יהיה נהדר אם המקלדת הווירטואלית תציע את הקוד שקיבלתם בהודעת ה-SMS, ותוכלו לבחור אותו ישירות כדי למלא את הערך? בדפדפן Safari מגרסה 14 ואילך, אפשר להשתמש ב-autocomplete="one-time-code" כדי לעשות זאת. ב-Chrome ב-Android, אפשר להשתמש ב-WebOTP API כדי לעשות את זה באמצעות JavaScript.

מידע נוסף על אימות מספרי טלפון באינטרנט באמצעות שיטות מומלצות לשימוש בטופס קוד חד-פעמי ב-SMS

שימו לב: אימות באמצעות SMS הוא לא השיטה הכי מאובטחת לאימות, כי אפשר לעשות שימוש חוזר במספרי טלפון ולחטוף אותם. כדאי להשתמש בשיטות אחרות לאימות דו-שלבי או באימות רב-שלבי.

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

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

כדי לוודא שהדפדפנים יציעו את האפשרויות הנכונות למילוי אוטומטי, אפשר להשתמש שוב במאפיין autocomplete.

יש ערכים למספר כרטיס האשראי cc-number, לתאריך התפוגה של כרטיס האשראי cc-exp ולכל שאר הפרטים שנדרשים לתשלום בכרטיס אשראי.

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

מידע נוסף על עזרה למשתמשים להימנע מהזנה חוזרת של פרטי תשלום

איך מוודאים שהמילוי האוטומטי פועל בכל השדות

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

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

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

איך עוזרים לדפדפנים להבין ששדה מסוים לא צריך להיות מלא אוטומטית

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

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

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

תרחיש לדוגמה נוסף לשימוש ב-autocomplete="off" הוא שדה honeypot (ראו מודול קודם). גם אם השדה לא גלוי, הדפדפנים עשויים למלא אותו אוטומטית עם שאר השדות. השבתת המילוי האוטומטי מבטיחה שמשתמש אמיתי לא יזוהה כבוט, כי השדה לא יושלם באופן אוטומטי.

כדאי להשבית את המילוי האוטומטי רק אם בטוחים שההשבתה תעזור למשתמשים.

בדיקת ההבנה

בדיקת הידע שלכם בנושא מילוי אוטומטי

משאבים

• מאפיין ההשלמה האוטומטית.
  • שיטות מומלצות למילוי טופס התשלום והכתובת