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

Sam Dutton

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

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

שלב 1: ניצול מיטבי של רכיבים ומאפיינים של HTML

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

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

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

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

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

מידע נוסף

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

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

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

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

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