צוות כלי הפיתוח של Chrome מפתח תכונות חדשות נוספות שיעזרו לכם למצוא בעיות בטפסים ולפתור באגים במילוי האוטומטי.
ב-Chrome Canary אנחנו בודקים תכונות חדשות בכלי הפיתוח, שנועדו לעזור למפתחים להבין איך עובד המילוי האוטומטי של טפסים, ולמה הוא נכשל לפעמים:
- איך המילוי האוטומטי בדפדפן ממפה ערכים שמורים לשדות בטופס?
- אילו קריטריונים משמשים את המילוי האוטומטי כדי למלא שדה בטופס?
- אילו שדות לא מולאו על ידי המילוי האוטומטי?
- למה שדה בטופס לא מתמלא באמצעות המילוי האוטומטי?
במאמר הזה נסקור את התכונות החדשות ב-Chrome DevTools, ונסביר איך אפשר לבדוק אותן ולשלוח משוב.
מהו מילוי אוטומטי?
Chrome עוזר למשתמשים לנהל את הכתובות, פרטי התשלום והפרטים של כניסה לחשבון, על ידי שמירת קבוצות של נתונים באופן מאובטח והצעה למלא שדות של טפסים בלי שהמשתמשים יצטרכו להזין טקסט. התכונה הזו נקראת 'מילוי אוטומטי'.
כששולחים טופס, Chrome מציע לשמור את נתוני המילוי האוטומטי. בנייד:
לאחר מכן, Chrome יציע למלא טפסים באופן אוטומטי באמצעות הנתונים שנשמרו.
בנייד:
במחשב:
אתם יכולים לנהל את נתוני המילוי האוטומטי בהגדרות של Chrome.
בנייד:
במחשב:
יכול להיות שגם ראיתם הצעות של Chrome לשדות קלט שלא קשורים לכתובת, לכרטיס אשראי או לנתוני כניסה. בנוסף להצעת מילוי אוטומטי לקבוצות של נתונים מובְנים, כמו כתובת ופרטי תשלום, Chrome עוזר למשתמשים להימנע מזנת נתונים מחדש בשדות בודדים בטופס שלא ניתן לטפל בהם באמצעות המילוי האוטומטי. אם בטופס יש שדה עם מאפיין שם ש-Chrome נתקל בו בעבר, Chrome יכול להציע ערכים כדי שלא תצטרכו להזין שוב את הנתונים.
הנה דוגמה פשוטה:
ב-Chrome DevTools מוצג ששדה הטופס הזה לא מכיל מאפיינים שמשמעותיים לדפדפן. במקום זאת, הוא רק מאפיין name של n300.
השדה לא תואם לערך בקבוצה של נתונים מובְנים, ולכן הוא לא מתאים למילוי האוטומטי של Chrome. עם זאת, Chrome עדיין יכול לעזור למשתמש אם הוא נתקל בשדה עם השם הזה בעתיד.
בדיקת התכונות החדשות של מילוי אוטומטי בכלי הפיתוח ל-Chrome
אנחנו בודקים ב-Chrome יכולות חדשות לחלונית בעיות ב-DevTools, כדי לעזור בניפוי באגים של שגיאות במילוי אוטומטי.
אתם יכולים לנסות את היכולות החדשות האלה ב-Chrome Canary. מסמנים את האפשרות 
הגדרות > ניסויים > 
הדגשת צומת או מאפיין שמפירים את הכלל בעץ ה-DOM של חלונית הרכיבים ב-DevTools, ומטעינים מחדש את DevTools כשמוצגת בקשה לעשות זאת.
לחלופין, אפשר להריץ את Chrome Canary משורת הפקודה עם הדגל AutofillEnableDevtoolsIssues:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
כדי לבדוק אם יש בעיות, פותחים את החלונית בעיות ב-DevTools בדף שיש בו טופס. form-problems.glitch.me הוא מקום טוב להתחיל בו.
כמו שאפשר לראות, הטופס הזה הוא בלגן! יש:
- שדות קלט ללא מאפיין
idאוname. - רכיבים עם מזהים כפולים.
<label>עם מאפייןforשלא תואם למזהה של אלמנט.- שדה עם מאפיין
autocompleteריק.
כדי לקבל מידע נוסף, מעבירים את העכבר מעל רכיב מודגש בעץ ה-DOM ולוחצים על הצגת הבעיה.
לוחצים על Violating node (צומת שמפר את המדיניות) כדי להציג את המשאבים המושפעים מכל בעיה. בטופס הזה יש שמונה תוויות עם מאפיין for שלא תואם ל-id של שדה טופס.
שימוש בכלי הפיתוח כדי לשפר את הנגישות של טפסים
כלי הפיתוח יכולים גם להדגיש בעיות נגישות של מילוי אוטומטי, כמו שדה טופס שאין לו מאפיין aria-labelledby או <label> משויך.
בדוגמה הזו, לרכיב <input> יש תווית תואמת. המשמעות היא שמכשירים מסייעים יכולים להכריז על מטרת הרכיב. עם זאת, בדוגמה הבאה לא נמצאה תוויות או מאפיין aria-labelledby תואמים.
שליחת משוב על התכונות החדשות של המילוי האוטומטי בכלי הפיתוח
אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים שפורסמו בפוסט, או בכל דבר אחר שקשור ל-DevTools:
- אתם יכולים לשלוח לנו הצעה או משוב דרך הבאג הכללי בכתובת crbug.com.
- דיווח על בעיה מ-DevTools: אפשרויות נוספות > עזרה > דיווח על בעיה ב-DevTools.
- שולחים ציוץ אל @ChromeDevTools.
למידע נוסף
- Learn Forms: קורס בנושא טופסי HTML שיעזור לכם לשפר את המומחיות שלכם כמפתחי אתרים. אידיאלי למי שרק מתחיל להשתמש בטפסים ובמילוי אוטומטי.
- web.dev/tags/forms: הנחיות, שיטות מומלצות וקורסים ב-Codelab בנושא טפסים לתשלום, כניסה וכתובות.