עוזרים לגולשים באתר שלנו למלא טפסים עם Autocomplete

השבוע יצא במקרה שאנחנו מדברים פעמיים על טפסים ואיך לשפר אותם – בפוסט הקודם דיברנו על תגי קלט שימושיים שמגיעים עם HTML5 והיום, פוסט אשר מגיע בעקבות פרסום מהבלוג למנהלי אתרים של גוגל הזכיר נקודה ישנה אשר חוזרת להיות מעניינת ונקראת השלמה אוטומטית של טפסים (הפרסום המקורי: Helping users fill out online forms) ועוזרת למשתמשים למלא טפסים בקלות ומאוד מאוד מהר – אז בין אם אתם מקדמי אתרים או בוני אתרים, מדובר על תכונה שכדאי להכיר וליישם באתר שלכם.

אז איך עושים את זה? קדימה לקוד

מכיוון ש… הכי קל ללמוד מדוגמאות – הנה טופס לדוגמה בלי שום השלמה אוטומטית

קוד לדוגמה של טופס נקי

דוגמת קוד:

<form action="">
	<label for="name"><input type="text" name="name" placeholder="* השם שלך" /></label>
	<label for="email"><input type="text" name="email" placeholder="* האימייל שלך" /></label>
	<label for="tel"><input type="text" name="tel" placeholder="* הטלפון שלך" /></label>
	<label for="desc"><input type="text" name="desc" placeholder="תיאור פניה" /></label>
	<input type="submit" value="שליחת פנייה" />
</form>

קוד של טופס עם השלמה אוטומטית

דוגמת קוד:

<form action="">
	<label for="name"><input type="text" name="name" autocomplete="name" placeholder="* השם שלך" /></label>
	<label for="email"><input type="text" name="email" autocomplete="email" placeholder="* האימייל שלך" /></label>
	<label for="tel"><input type="text" name="tel" autocomplete="tel" placeholder="* הטלפון שלך" /></label>
	<label for="desc"><input type="text" name="desc" autocomplete="" placeholder="תיאור פניה" /></label>
	<input type="submit" value="שליחת פנייה" />
</form>

מה נשתנה? (וחג שמח לכם)

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

לדוגמה: שדה קלט עבור שם הגולש דוגמת קוד:

 <input type="text" name="name" placeholder="* השם שלך" /> 

הופך לזה דוגמת קוד:

 <input type="text" name="name" autocomplete="name" placeholder="* השם שלך" /> 

הוספנו את התג הזה דוגמת קוד:

 autocomplete="name" 

רשימת כל התגים בהתאם לסוג השדה

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

• שם שדה: שם
• ערך: name
• דוגמת קוד:

   <input type="text" name="name" autocomplete="name" /> 

• שם שדה: מר. (Mr / Mrs)
• ערך: honorific-prefix
• דוגמת קוד:

   <input type="text" name="name" autocomplete="honorific-prefix" /> 

• שם שדה: שם פרטי
• ערך:given-name
• דוגמת קוד:

   <input type="text" name="name" autocomplete="given-name" /> 

• שם שדה: שם אמצעי
• ערך:additional-name
• דוגמת קוד:

   <input type="text" name="name" autocomplete="additional-name" /> 

• שם שדה: שם אמצעי
• ערך:family-name
• דוגמת קוד:

   <input type="text" name="name" autocomplete="family-name" /> 

• שם שדה: תואר כבוד
• ערך:honorific-suffix
• דוגמת קוד:

   <input type="text" name="name" autocomplete="honorific-suffix" /> 

• שם שדה: כינוי
• ערך:nickname
• דוגמת קוד:

   <input type="text" name="name" autocomplete="nickname" /> 

• שם שדה: שם תפקיד
• ערך:organization-title
• דוגמת קוד:

   <input type="text" name="name" autocomplete="organization-title" /> 

• שם שדה: שם משתמש
• ערך:username
• דוגמת קוד:

   <input type="text" name="name" autocomplete="username" /> 

• שם שדה: שם בית עסק
• ערך:organization
• דוגמת קוד:

   <input type="text" name="name" autocomplete="organization" /> 

• שם שדה: רחוב ומספר
• ערך:street-address
• דוגמת קוד:

   <input type="text" name="name" autocomplete="street-address" /> 

• שם שדה: מידע נוסף כתובת
• ערך:address-line1
• דוגמת קוד:

   <input type="text" name="name" autocomplete="address-line1" /> 

• שם שדה: מידע נוסף כתובת
• ערך:address-line2
• דוגמת קוד:

   <input type="text" name="name" autocomplete="address-line2" /> 

• שם שדה: קידומת מדינה
• ערך:country
• דוגמת קוד:

   <input type="text" name="name" autocomplete="country" /> 

• שם שדה: שם מדינה
• ערך:country-name
• דוגמת קוד:

   <input type="text" name="name" autocomplete="country-name" /> 

• שם שדה: מיקוד
• ערך:postal-code
• דוגמת קוד:

   <input type="text" name="name" autocomplete="postal-code" /> 

• שם שדה: מין הגולש
• ערך:sex
• דוגמת קוד:

   <input type="text" name="name" autocomplete="sex" /> 

• שם שדה: כתובת אתר
• ערך:url
• דוגמת קוד:

   <input type="text" name="name" autocomplete="url" /> 

• שם שדה: טלפון
• ערך:tel
• דוגמת קוד:

   <input type="text" name="name" autocomplete="tel" /> 

• שם שדה: אימייל
• ערך:email
• דוגמת קוד:

   <input type="text" name="name" autocomplete="email" /> 

הרשימה המלאה כאן: Autocomplete Attr

אל תפספסו – שלבו באתר שלכם

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

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

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