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

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

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

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

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

<form method="post" action="/form" autocomplete="off">
  …
</form>

או ברמת ה input:

<input type="text" id="cc" name="cc" autocomplete="off" />

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

נ.ב. דוגמה? יאללה דוגמה. הנה קודפן: https://codepen.io/ynonp/pen/RwJPYYX. בקישור הזה אפשר לראות אותו על מסך מלא:

https://cdpn.io/pen/debug/RwJPYYX

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