לפי גוגל מילוי אטומטי של טפסים מקצר ב30% את זמן מילוי הטופס, אבל מפתחי אינטרנט לא מקדישים לחלק הזה מספיק מחשבה ולכן ברוב הטפסים המורכבים לא תוכלו להיעזר בשירות המילוי האוטומטי של הדפדפן.
מדוע זה קורה?
עד לאחרונה לא היה קיים סטנדרט שמגדיר איך לייצר טופס שמאפשר מילוי אוטומטי וכל דפדפן הגדיר צורת עבודה שונה שעל פיה הוא מזהה את השדות וממלא אותם. אנחנו המפתחים היינו צריכים ללקט את המידע הזה ולהתייחס לדרישות של כל דפדפן בנפרד.
פיירפוקס ואדג' למשל שומרים שדות עם תג ה name שלהם כדי להציע אותם בעתיד אך כרום וספארי מנהלים את המילוי האוטומטי בצורה שונה.
מדוע זה חשוב?
זה חשוב בעיקר בטפסים ארוכים או באתרי מסחר אלקטרוני. אנחנו רוצים שאנשים יעבדו איתנו, יקנו מאיתנו, או ישתמשו במערכת שיצרנו. כדי להשיג יותר פניות וליצור מערכות טובות יותר אנחנו חייבים להקל על המשתמשים ולהקל על פעולות מורכבות.
מילוי טפסים זו אחת מהפעולות המורכבות ולגן רצוי להקל על המשתמש כמה שיותר.
מה ניתן לעשות?
לאחרונה הורחבה התכונה autocomplete של HTML5 כך שהיא מאפשרת לספק מידע לדפדפן אודות המידע המתבקש משדות וכך מאפשרת לדפדפן למלא אותם אוטומטית בצורה חכמה יותר. האפשרויות החדשות נקראות autofill detail tokens.
הערכים של autofill detail tokens מופרדים ברווחים. כך למשל אם נרצה לשמור מידע אודות הכתובת למשלוח נשתמש בקטע הקוד הבא:
<!-- כתובת למשלוח --> <textarea name="shipping-address" autocomplete="shipping street-address"></textarea> <!-- מדינה למשלוח --> <input type="text" name="shipping-country" autocomplete="shipping country-name">
בשתי השדות התייחסנו אל הכתובת למשלוח אך חילקנו את הנתונים והעברנו לדפדפן הסבר אודות החלוקה באמצעות התכונה autocomplete.
בצורה דומה, ניתן להתייחס גם אל שדה טלפון:
<!-- טלפון בבית --> <input type="tel" name="home-phone" autocomplete="home tel"> <!-- טלפון בעבודה --> <input type="tel" name="work-phone" autocomplete="work tel">
בדוגמה זו ביקשנו מהגולש שני מספרי טלפון, והסברנו גם לדפדפן את ההבדל ביניהם כך שהוא יוכל להשלים אותם אוטומטית במידה והמידע מאוחסן כבר בזיכרון.
ניתן למצוא את רשימת השדות המלאה במפרט שבאתר W3C.
אפשרות נוספת שהצטרפה לאחרונה לתכונה זו היא האפשרות לחלק את השדה לאיזורים (sections) ומאפשרת לבחור את שם האיזור ללא הגבלה.
אם נעשה שימוש מלא בתכונות החדשות הHTML של כל שדה בטופס שלנו אמור להראות כך:
<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">
הtokens צריכים להיות כתובים לפי הסדר הבא:
[section-](optional) [shipping|billing](optional) [home|work|mobile|fax|pager](optional) [autofill field name]
לא כל הדפדפנים תומכים באפשרויות המורחבות אבל מומלץ מאוד לאמץ את התקן החדש כבר עכשיו כך שבתוך כמה חודשים התמיכה תתרחב ונוכל לראות תוצאות.