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

Sam Dutton

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

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

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

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

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

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

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

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

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

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

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

המשך

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

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

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

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

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