צרו טופס שמאפשר למשתמשים להזין נתוני כתובת בקלות רבה ככל האפשר במחשב ובנייד. מוודאים שהטופס מנצל את התכונות המובנות בדפדפן למילוי אוטומטי, לאימות ולהגבלות על הזנת נתונים.
איך מטמיעים
בהמשך מפורטות ההנחיות החשובות ביותר ליצירת טפסים מוצלחים להזנת כתובת.
שימוש ב-HTML תקין ומשמעותי
כדאי להפיק את המרב מהרכיבים ומהמאפיינים שנועדו ליצירת טפסים:
<form>,<input>,<label>וגם<button>-
type,autocompleteוגםinputmode
התפקידים האלה מפעילים פונקציונליות מובנית בדפדפן, משפרים את הנגישות ומוסיפים משמעות לתגי העיצוב.
משתמשים ברכיב <label> כדי לתייג שדות בטופס להזנת נתונים
כדי לתייג <input>, <select> או <textarea>, משתמשים ב-<label>. כדי לשייך תווית לקלט, נותנים למאפיין for של התווית את אותו ערך כמו של המאפיין id של הקלט.
איך להפיק את המקסימום ממאפייני HTML
כדי להקל על המשתמשים להזין נתונים, משתמשים במאפיין המתאים של רכיב <input> <type> כדי לספק את המקלדת הנכונה בנייד ולהפעיל אימות בסיסי מובנה בדפדפן.
תמיד צריך להשתמש ב-type="email" לכתובות אימייל וב-type="tel" למספרי טלפון.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
כדי לשפר את הנגישות ולעזור למשתמשים להימנע מהזנה חוזרת של נתונים, כל רכיב <input>, <select> ו-<textarea> צריך לכלול מאפיין autocomplete מתאים.
כפתורים מועילים
שימוש ב<button> לכפתורים. אפשר גם להשתמש ב-<input type="submit">, אבל אל תשתמשו ב-div או ברכיב אקראי אחר שפועל כלחצן. רכיבי כפתורים מספקים התנהגות נגישה, פונקציונליות מובנית של שליחת טפסים, וקל לעצב אותם.
צריך לתת לכל לחצן שליחת טופס ערך שאומר מה הוא עושה. בכל שלב בתהליך התשלום, כדאי להשתמש בקריאה לפעולה שמתארת את השלב, מראה את ההתקדמות ומבהירה מה השלב הבא. לדוגמה, תווית כפתור השליחה בטופס הכתובת למשלוח צריכה להיות המשך לתשלום ולא המשך או שמירה.
אם אפשר, השתמשו בשדה אחד להזנת השם
אפשרו למשתמשים להזין את השם שלהם בשדה אחד, אלא אם יש לכם סיבה טובה לשמור בנפרד שמות פרטיים, שמות משפחה, תארים או חלקים אחרים של השם. שימוש בשדה אחד להזנת שם הופך את הטפסים לפחות מורכבים, מאפשר העתקה והדבקה ומפשט את המילוי האוטומטי.
לאפשר שמות בינלאומיים. כדי לבצע אימות, אל תשתמשו בביטויים רגולריים שתואמים רק לתווים לטיניים. אם תבחרו באפשרות "רק לטינית", לא תוכלו לשלוח אימיילים למשתמשים שהשמות או הכתובות שלהם כוללים תווים שלא שייכים לאלפבית הלטיני. במקום זאת, אפשרו התאמה של אותיות Unicode, וודאו שה-backend שלכם תומך ב-Unicode באופן מאובטח גם כקלט וגם כפלט. דפדפנים מודרניים תומכים היטב ב-Unicode בביטויים רגולריים.
לאפשר מגוון פורמטים של כתובות
כשיוצרים טופס כתובת, חשוב לזכור שיש מגוון פורמטים של כתובות, אפילו במדינה אחת. אל תניחו הנחות לגבי כתובות "רגילות".
אם אפשר, השתמשו ברכיב <textarea> אחד לכתובת הרחוב.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
זו האפשרות הגמישה ביותר למגוון פורמטים של כתובות מקומיות ובינלאומיות.
אם מודל הנתונים שלכם דורש שורות נפרדות לכתובת, השתמשו ב-<input> אחד לכל שורה עם האסימונים address-line1, address-line2 (ואם צריך, address-line3) autocomplete כדי שהמילוי האוטומטי עדיין יפעל. אל תפצלו את הכתובת בין שדות קלט שאין בהם את האסימונים האלה, ורק השורה הראשונה צריכה להיות שדה חובה.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
עוזרים למשתמשים לא לפספס בטעות שדות נתונים
מוסיפים את המאפיין required לשדות החובה.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
אסטרטגיות חלופיות
מילוי אוטומטי הוא שיפור הדרגתי (progressive enhancement). בדפדפנים שלא תומכים במילוי אוטומטי, המשתמשים יצטרכו להזין את פרטי הכתובת שלהם באופן ידני. האילוצים הסמנטיים של HTML (כמו type, inputmode ו-required) עדיין יפעלו כראוי כאימות טופס רגיל.