מאפיינים של רכיבי HTML יכולים לשפר את <form> ואת פקדי הטפסים.
עזרה למשתמשים למלא את אמצעי הבקרה בטפסים
כדי להקל על המשתמשים למלא טפסים,
כדאי להשתמש במאפיין type מתאים לרכיבי <input>.
בדפדפנים מוצג ממשק משתמש שמתאים ל-type,
כמו חלונית לבחירת תאריך ל-<input> מסוג date.
בדפדפנים בניידים מוצגת מקלדת מותאמת במסך,
כמו לוח מקשים של מספר טלפון עבור type="tel".
סוגים מסוימים של <input> משנים גם כללי אימות של רכיב כששולחים את הטופס שלו.
לדוגמה, <input type="url"> חוקי רק אם הוא לא ריק והערך הוא כתובת URL.
מוודאים שהמשתמשים מזינים נתונים
יש מאפיינים שונים לשליחת מקלדת מתאימה שמופיעה במסך במכשירי מגע.
האפשרות הראשונה היא להשתמש במאפיין type, כפי שהוזכר למעלה.
אפשרות נוספת היא המאפיין inputmode שנתמך ב-Android וב-iOS.
בניגוד למאפיין type, המאפיין inputmode משנה רק את המקלדת שמופיעה במסך
ולא את התנהגות הרכיב עצמו. כדאי להשתמש ב-inputmode אם רוצים להשאיר את ממשק המשתמש שמוגדר כברירת מחדל ואת כללי האימות שמוגדרים כברירת מחדל ב-<input>, אבל להמשיך עם מקלדת שמופיעה במסך שעברה אופטימיזציה.
אפשר לשנות את המקש Enter במקלדות שמופיעות במסך באמצעות המאפיין enterkeyhint.
לדוגמה, הקשה על enterkeyhint="next" או enterkeyhint="done" תוביל לשינוי של תווית הלחצן לסמל מתאים.
כך יהיה למשתמשים ברור יותר מה קורה כשהם שולחים את הטופס הנוכחי.
מוודאים שהמשתמשים יכולים לשלוח טופס
נניח שאתם ממלאים <form> ולוחצים על הלחצן שליחה, אבל כלום לא קורה.
יכול להיות שהבעיה היא שהלחצן הושבת עם המאפיין disabled.
בדרך כלל, הלחצן שלח מושבת עד שהטופס יהיה תקף.
תיאוריה, זה נשמע הגיוני, אבל לא כדאי להשבית את הלחצן Submit (שליחה) בזמן שממתינים לקלט מלא ותקף מהמשתמשים. במקום, כדאי להדגיש נתונים לא חוקיים כשהם מוזנים, ולהדגיש שדות בעייתיים למשתמש בזמן שליחת הטופס.
עם זאת, יכול להיות שתרצו להשבית את הלחצן Submit (שליחה) אחרי שהטופס יישלח אבל עדיין לא עבר עיבוד. מידע נוסף על לחצנים מושבתים.
הצגת הנתונים שהם הזינו בעבר תעזור למשתמשים
נניח שיש לכם טופס תשלום שכולל כמה שלבים.
איך תוודאו שהערכים שהזנתם לפני כן עדיין יופיעו כשהמשתמשים יחזרו לשלב הקודם?
אפשר להשתמש במאפיין value כדי להציג ערכים שכבר הושלמו.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
יש כמה דרכים לאחזר את הערך של פקד טופס ב-JavaScript.
אפשר להשתמש בנכס
value או לגשת לערך באמצעות getAttribute('value').
יש הבדל אחד גדול,
המאפיין value תמיד מחזיר את הערך הנוכחי,
ושימוש ב-getAttribute() תמיד מחזיר את הערך הראשוני.
רוצים לנסות?
משנים את הטקסט בשדה השם וצופים במסוף.
שימו לב שהמאפיין value מחזיר את הטקסט הגלוי הנוכחי, ו-getAttribute('value') תמיד מחזיר את הערך הראשוני.
מידע נוסף על ההבדלים בין מאפייני DOM לנכסי DOM
לרכיבי <input> מסוג checkbox או radio יש להשתמש במאפיין checked.
יש להוסיף אותו אם המשתמש בחר אפשרות, ולהסיר אותה בכל מקרה אחר.
מוודאים שהמשתמשים מבינים את הפורמט הצפוי
הערך של המאפיין placeholder הוא רמז לסוג המידע הצפוי.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
זה עלול לבלבל את המשתמשים, כי לפעמים נראה לא הגיוני למה נראה שהטופס כבר הוזן מראש. בנוסף, אם מוסיפים placeholder, יכול להיות שיהיה קשה לראות אילו שדות בטופס עדיין צריך למלא. בנוסף, קשה לקרוא את סגנון ברירת המחדל של הטקסט שמופיע כ-placeholder.
באופן כללי, צריך להיזהר כשמשתמשים במאפיין placeholder ולעולם לא להשתמש במאפיין placeholder כדי להסביר אמצעי בקרה על טופס.
במקומו צריך להשתמש ברכיב <label>.
למידע נוסף על הסיבות להימנע ממאפיין placeholder
דרך טובה יותר לתת למשתמשים רמז לגבי סוג המידע הצפוי היא להשתמש ברכיב HTML נוסף מתחת לבקרת הטופס כדי להוסיף הסבר או דוגמה.
בדיקה שפקדי הטפסים מוכנים לאימות
קיימים מאפייני HTML שונים שאפשר להפעיל כדי להפעיל אימות מובנה.
אפשר להשתמש במאפיין required כדי למנוע שליחה של שדות ריקים.
אפשר לאכוף אימותים נוספים באמצעות המאפיין type.
לדוגמה, הערך של <input> של type="url" חייב להיות כתובת URL.
כדי להבטיח שמשתמש יזין מספר מינימלי של תווים, צריך להשתמש במאפיין minlength.
אם לא רוצים להזין ערך שכולל יותר ממספר התווים המקסימלי, משתמשים במאפיין maxlength.
לסוגי קלט מספריים כמו <input type="number">, יש להשתמש במקום זאת במאפיינים min ו-max.
מידע נוסף על אימות: איך עוזרים למשתמשים להזין את הנתונים הנכונים בטפסים.
בחינת ההבנה
בוחנים את הידע שלכם על מאפייני טפסים
באיזה מאפיין אפשר להשתמש כדי לשנות את התווית של המקש Enter במקלדת שמופיעה במסך?
enterkeyenterkeyhintenterkeytextenterkeylabelמה ההבדל בין הנכס value לבין getAttribute('value')?
value מחזיר את הערך הנוכחי, getAttribute('value') מחזיר את הערך הראשוני.value מחזיר את הערך הראשוני, getAttribute('value') מחזיר את הערך הנוכחי.value מחזיר את המפתח והערך, getAttribute('value') מחזיר רק את הערך.