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

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

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

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

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

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

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

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

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

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

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

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

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

בחינת ההבנה

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

משאבים

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