Codelab שיטות מומלצות לשימוש בטופסי כתובת

Sam Dutton

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

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

שלב 1: מפיקים את המרב מהרכיבים ומהמאפיינים של HTML

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

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

  • מוסיפים שדה שם לרכיב <form> באמצעות הקוד הבא:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

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

שייכתם את label ל-input על ידי התאמת המאפיין for של label ל-name או ל-id של input. הקשה או לחיצה על תווית מעבירים את המיקוד לקלט שלה, ויוצרת יעד הרבה יותר גדול מהקלט בפני עצמו, והיא מתאימה לאצבעות, לאגודלים ולקליקים על העכבר! קוראי מסך מכריזים על טקסט התווית כשהמיקוד הוא על התווית או על הקלט של התווית.

מה לגבי 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". הדפדפן לא רק מנחש מה מתאים: יש לכם שליטה. תוכלו לראות גם את האפשרות Manage... (ניהול...) כדי להציג ולערוך את השמות והכתובות שנשמרו על ידי הדפדפן.

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

עכשיו צריך להוסיף מאפייני אימות אילוצים 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 מדינות שונות, כולל כתובות לדוגמה). התווית Country or region משמשת במקום Country, כי חלק מהאפשרויות ברשימה המלאה (כמו בריטניה) אינן מדינות בודדות (למרות הערך 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).
שני צילומי מסך של טופס ב-Android שמראים איך מאפיין הקלט Enterkeyhint משנה את הסמל של לחצן Enter.
משתמשים במאפיין Enterkeyhint כדי להגדיר את התווית של לחצן Enter: 'next' ו-'done'.

טופס הכתובת המלא אמור להיראות כך:

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

יש כמה דרכים לבדוק את הטופס במכשירים שונים:

להגיע רחוק יותר

  • Analytics ו-Real User Monitoring: תוכלו לבדוק את הביצועים ונוחות השימוש של עיצוב הטופס כדי לבדוק משתמשים אמיתיים ולעקוב אחריהם, ולבדוק אם השינויים מוצלחים. מומלץ לעקוב אחרי ביצועי הטעינה ופעולות אחרות של Web Vitals, וכן אחרי ניתוח של דפים (איזה שיעור משתמשים יוצאים מטופס הכתובת בלי להשלים אותו? כמה זמן המשתמשים מבלים בדפי הטופס של הכתובות?) וניתוחי נתונים של האינטראקציות (עם אילו רכיבי דף המשתמשים מקיימים אינטראקציה, או לא?)

  • איפה נמצאים המשתמשים שלך? מה הפורמט של הכתובת שלהם? באילו שמות הם משתמשים במרכיבי הכתובת, כמו מיקוד או מיקוד? המדריך הכפייתי של פרנק לכתובות דואר כולל קישורים שימושיים והנחיות מקיפות, שבהן מפורטים הפורמטים של כתובות ביותר מ-200 מדינות.

  • בוררי המדינות ידועים לשמצה בנוחות השימוש נמוכה. עדיף להימנע מבחירת רכיבים לרשימה ארוכה של פריטים. בתקן קוד המדינה לפי תקן ISO 3166 יש כרגע 249 מדינות ברשימה! במקום <select>, מומלץ לשקול חלופה, כמו בורר המדינות ב-Baymard Institute.

    האם תוכלו לעצב בורר טוב יותר לרשימות שמכילות הרבה פריטים? איך תוודאו שהעיצוב נגיש במגוון מכשירים ופלטפורמות? (האלמנט <select> לא פועל כמו שצריך במספר גדול של פריטים, אבל לפחות אפשר להשתמש בו כמעט בכל הדפדפנים ובכל המכשירים המסייעים!)

    בפוסט בבלוג <input type="country" /> מתוארים המורכבות של קביעת תקן לבורר מדינות. הלוקליזציה של שמות מדינות עלולה להיות בעייתית. רשימות מדינות כולל כלי להורדת קודי מדינה ושמות של מדינות במספר שפות ובפורמטים מרובים.