איך אפשר לעצב טופס שמתאים למגוון שמות ופורמטים של כתובות? תקלות קלות בטופס מרגיזות את המשתמשים ויכולות לגרום להם לעזוב את האתר או לוותר על השלמת רכישה או הרשמה.
בשיעור הזה תלמדו איך ליצור טופס נגיש וקל לשימוש שמתאים לרוב המשתמשים.
שלב 1: ניצול מיטבי של רכיבים ומאפיינים של HTML
בחלק הזה של הקודלאב נתחיל עם טופס ריק, עם כותרת ועם לחצן בלבד. לאחר מכן מתחילים להוסיף קלט. (CSS וקצת JavaScript כבר כלולים).
לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
מוסיפים שדה שם לרכיב
<form>באמצעות הקוד הבא:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
זה אולי נראה מסובך וחוזר על עצמו בשביל שדה שם אחד בלבד, אבל הוא כבר עושה הרבה.
שיויכת את label ל-input על ידי התאמה של המאפיין for של label למאפיין name או id של input. הקשה או לחיצה על תווית מעבירות את המיקוד לקלט שלה, וכך יוצרות יעד גדול בהרבה מהקלט עצמו – יתרון משמעותי כשמשתמשים באצבעות, באגודלים ובקליקים בעכבר. קוראי מסך מכריזים על טקסט התווית כשהתווית או הקלט של התווית מקבלים את המיקוד.
מה דעתך על name="name"? זהו השם (שנקרא 'name') שמשויך לנתונים מהקלט הזה, שנשלחים לשרת כששולחים את הטופס. המשמעות של הכללת המאפיין name היא גם שאפשר לגשת לנתונים מהרכיב הזה באמצעות FormData API.
שלב 2: מוסיפים מאפיינים שיעזרו למשתמשים להזין נתונים
מה קורה כשמקישים או לוחצים על השדה שם ב-Chrome? אמורות להופיע הצעות למילוי אוטומטי שהדפדפן שמר, והן אמורות להיות רלוונטיות להזנה הזו, בהתאם לערכי name ו-id.
עכשיו מוסיפים את autocomplete="name" לקוד הקלט כך שייראה כך:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
טוענים מחדש את הדף ב-Chrome ומקישים או לוחצים על השדה שם. אילו הבדלים אתם רואים?
שימו לב לשינוי קל: כשמשתמשים ב-autocomplete="name", ההצעות הן עכשיו ערכים ספציפיים ששימשו בעבר בנתוני קלט של טפסים שכללו גם את autocomplete="name". הדפדפן לא רק מנחש מה יכול להיות מתאים: יש לכם שליטה. תוצג גם האפשרות ניהול… כדי להציג ולערוך את השמות והכתובות ששמורים בדפדפן.
עכשיו מוסיפים את מאפייני אימות האילוצים
maxlength, pattern ו-required כך שקוד הקלט ייראה כך:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
הערך
maxlength="100"מציין שהדפדפן לא יאפשר קלט ארוך מ-100 תווים.ב-
pattern="[\p{L} \-\.]+"נעשה שימוש בביטוי רגולרי שמאפשר להשתמש באותיות בתקן Unicode, מקפים ונקודות. כלומר, שמות כמו Françoise או Jörg לא מסווגים כ'לא חוקיים'. המצב הזה לא רלוונטי אם משתמשים בערך\w, שמאפשר רק תווים מהאלפבית הלטיני.requiredפירושו… חובה! הדפדפן לא יאפשר לשלוח את הטופס בלי נתונים בשדה הזה, ויופיע אזהרה והקלט יודגש אם תנסה לשלוח אותו. אין צורך בקוד נוסף.
כדי לבדוק איך הטופס פועל עם המאפיינים האלה ובליהם, נסו להזין נתונים:
- נסו להזין ערכים שלא מתאימים למאפיין
pattern. - מנסים לשלוח את הטופס עם קלט ריק. תופיע אזהרה מובנית בדפדפן על השדה הנדרש הריק, והפוקוס יועבר אליו.
שלב 3: מוסיפים לשדה הכתובת בטופס אפשרות להזין כתובת גמישה
כדי להוסיף שדה כתובת, מוסיפים את הקוד הבא לטופס:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea היא הדרך הגמישה ביותר שבה המשתמשים יכולים להזין את הכתובת שלהם, והיא נהדרת לחיתוך ולהדבקה.
מומלץ לא לפצל את טופס הכתובת לרכיבים כמו שם הרחוב ומספר הבית, אלא אם אתם באמת צריכים לעשות זאת. אל תאלצו את המשתמשים לנסות להתאים את הכתובת שלהם לשדות שלא הגיוניים.
עכשיו מוסיפים שדות למיקוד ולמדינה או אזור. כדי לפשט את העניין, רק חמש המדינות הראשונות נכללות כאן. רשימה מלאה מופיעה בטופס הכתובת המלא.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
המיקוד הוא אופציונלי כי במדינות רבות לא משתמשים במיקוד.
(ב-Global Sourcebook מפורט מידע על פורמטים של כתובות ב-194 מדינות שונות, כולל כתובות לדוגמה). התווית מדינה או אזור משמשת במקום מדינה, כי חלק מהאפשרויות מהרשימה המלאה (כמו בריטניה) הן לא מדינות בודדות (למרות הערך autocomplete).
שלב 4: מאפשרים ללקוחות להזין בקלות את הכתובות למשלוח ולחיוב
יצרתם טופס כתובת פונקציונלי מאוד, אבל מה קורה אם באתר שלכם נדרשות יותר מכתובת אחת, למשל למשלוח ולחיוב? כדאי לנסות לעדכן את הטופס כדי לאפשר ללקוחות להזין את הכתובות למשלוח ולחיוב. איך אפשר להקל על הזנת הנתונים, במיוחד אם שתי הכתובות זהות? במאמר שמצורף ל-Codelab הזה מוסבר על שיטות לטיפול בכתובות מרובות.
חשוב להשתמש בערכי autocomplete הנכונים!
שלב 5: הוספת שדה של מספר טלפון
כדי להוסיף קלט של מספר טלפון, מוסיפים את הקוד הבא לטופס:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
במספרי טלפון, יש להשתמש בקלט יחיד: לא לפצל את המספר לחלקים. כך קל יותר למשתמשים להזין נתונים או להעתיק ולהדביק, קל יותר לבצע אימות ומאפשרים לדפדפנים לבצע מילוי אוטומטי.
יש שני מאפיינים שיכולים לשפר את חוויית המשתמש בהזנת מספר טלפון:
type="tel"מוודא שמשתמשים בניידים מקבלים את המקלדת המתאימה.enterkeyhint="done"מגדיר את התווית של מקש ה-Enter במקלדת בנייד כדי להראות שזה השדה האחרון ואפשר לשלוח עכשיו את הטופס (ברירת המחדל היאnext).
טופס הכתובת המלא אמור להיראות כך:
- כדאי לנסות את הטופס במכשירים שונים. לאילו מכשירים ודפדפנים אתם מטרגטים? איך אפשר לשפר את הטופס?
יש כמה דרכים לבדוק את הטופס במכשירים שונים:
- משתמשים במצב המכשיר (Device Mode) בכלי הפיתוח ל-Chrome כדי לדמות מכשירים ניידים.
- שולחים את כתובת ה-URL מהמחשב לטלפון.
- אפשר להשתמש בשירות כמו BrowserStack כדי לבדוק במגוון מכשירים ודפדפנים.
מידע נוסף
Analytics ומעקב אחר משתמשים אמיתיים: מאפשרים לבדוק את הביצועים ואת נוחות השימוש של עיצוב הטופס אצל משתמשים אמיתיים, ולעקוב אחריהם, כדי לבדוק אם השינויים מוצלחים. כדאי לעקוב אחרי ביצועי הטעינה ומדדים נוספים של חוויית המשתמש באינטרנט, וגם אחרי ניתוח נתוני דפים (מהו שיעור העזיבה של המשתמשים מטופס הכתובת בלי להשלים אותו? כמה זמן המשתמשים מבלים בדפי טופס הכתובת?) וניתוח נתוני אינטראקציה (אילו רכיבי דף המשתמשים מקיימים איתם אינטראקציה, ואילו לא?)
איפה נמצאים המשתמשים שלכם? איך הם פורמטים את הכתובת? אילו שמות הם משתמשים בהם לרכיבי הכתובת, כמו מיקוד? במדריך האובססיבי של פרנק לכתובות מופיעים קישורים שימושיים והנחיות מפורטות לגבי פורמטים של כתובות ביותר מ-200 מדינות.
בוררי מדינות ידועים בנוחות השימוש הנמוכה שלהם. מומלץ להימנע מבחירת רכיבים ברשימה ארוכה של פריטים, ותקן קודי המדינות ISO 3166 כולל כרגע 249 מדינות. במקום
<select>, כדאי לשקול אפשרות חלופית כמו בורר המדינות של Baymard Institute.האם אפשר לעצב בורר טוב יותר לרשימות עם הרבה פריטים? איך תבטאו שהעיצוב שלכם יהיה נגיש במגוון מכשירים ופלטפורמות? (הרכיב
<select>לא פועל טוב עם מספר רב של פריטים, אבל לפחות אפשר להשתמש בו כמעט בכל הדפדפנים ובמכשירים מסייעים).בפוסט בבלוג <input type="country" /> מוסבר על המורכבות של יצירת סטנדרט לבורר מדינות. גם תרגום שמות של מדינות יכול להיות בעייתי. ברשימות המדינות יש כלי להורדת שמות וקידומי מדינות בכמה שפות ובכמה פורמטים.