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

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

איך להפיק את המרב מהמילוי האוטומטי

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

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

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

איך פועל המילוי האוטומטי בדפדפן?

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

שימוש בדפדפנים היוריסטיקה לזיהוי שדה כתובת. מהם הערכים של המאפיינים name, type ו-id? האם יש מאפיין autocomplete בפקד הטופס?

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

עזרה לדפדפנים עם מילוי אוטומטי

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

שימוש בערכי מאפיינים הגיוניים

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

<label for="email">Email</label>
<input type="email" name="email" id="email">

האם יש לכם שדה שבו המשתמשים צריכים להזין את כתובת האימייל שלהם? שימוש ב-email כערך של המאפיינים name, id ו-type. שלושה רמזים לדפדפן שזהו שדה אימייל.

מאפיין ההשלמה האוטומטית

יש דוגמאות נוספות שבהן עדיין קשה לדפדפנים לזהות את סוג הנתונים רק לפי המאפיינים name, id ו-type. אפשר לעזור כאן באמצעות המאפיין autocomplete.

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

ניתן לקבל מידע נוסף על השימוש השלמה אוטומטית ומילוי אוטומטי במודול מאוחר יותר.

בדיקת ההבנה

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

משאבים

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