מאפיינים של רכיבי 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
במקלדת שמופיעה במסך?
enterkey
enterkeyhint
enterkeytext
enterkeylabel
מה ההבדל בין הנכס value
לבין getAttribute('value')
?
value
מחזיר את הערך הנוכחי, getAttribute('value')
מחזיר את הערך הראשוני.value
מחזיר את הערך הראשוני, getAttribute('value')
מחזיר את הערך הנוכחי.value
מחזיר את המפתח והערך, getAttribute('value')
מחזיר רק את הערך.