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

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

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

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

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

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

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

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

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

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

ניתן לעזור לדפדפנים להציע את האפשרויות הטובות ביותר למילוי אוטומטי על ידי שימוש של המאפיין 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.

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

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

בדיקת ההבנה

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

משאבים

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