באילו שדות טופס אפשר להשתמש?
כדי לספק את חוויית המשתמש הטובה ביותר, הקפידו להשתמש ברכיב ובאלמנט type שהם המתאימים ביותר לנתונים שהמשתמש מזין.
עזרה למשתמשים למלא טקסט
כדי לספק למשתמשים שדה להוספת טקסט, צריך להשתמש ברכיב <input>.
זו האפשרות הטובה ביותר למילים בודדות ולטקסטים קצרים.
לטקסט ארוך יותר, יש להשתמש ברכיב <textarea>.
הפעולה הזו מאפשרת להציג מספר שורות טקסט, ועוזרת למשתמשים לראות בקלות את הטקסט שהוזן, מכיוון שניתן לגלול ולשנות את הגודל של הרכיב.
מוודאים שהמשתמשים מזינים את הנתונים בפורמט הנכון
האם ברצונך לעזור למשתמשים למלא מספר טלפון?
צריך לשנות את המאפיין type ל-type="tel" עבור המאפיין <input>.
משתמשים במכשירים ניידים מקבלים מקלדת מותאמת במסך,
וכך אפשר להזין את מספר הטלפון מהר יותר ובקלות רבה יותר.
לכתובת אימייל, יש להשתמש ב-type="email".
תוצג שוב מקלדת מותאמת במסך.
צריך להשתמש במאפיין required כדי ששדה הטופס יהיה חובה.
כששולחים את הטופס, הדפדפן בודק שיש לקלט ערך ושהוא חוקי. במקרה הזה, מדובר בכתובת אימייל בפורמט תקין.
מידע נוסף על סוגי הקלט השונים. הן כוללות גם תכונות אימות מובנות.
לעזור למשתמשים להשלים תאריכים
מתי ברצונך להתחיל את הנסיעה הבאה?
כדי לעזור למשתמשים למלא תאריכים, אפשר להשתמש בפונקציה type="date".
חלק מהדפדפנים מציגים את הפורמט כ-placeholder, כמו yyyy-mm-dd, שמדגים איך להזין את התאריך.
כל הדפדפנים המודרניים מציעים ממשקים מותאמים אישית לבחירת תאריכים בצורת בורר תאריכים.
איך לעזור למשתמשים לבחור אפשרות
כדי לוודא שהמשתמשים יוכלו לבחור או לבטל את הבחירה באחת מהאפשרויות, צריך להשתמש במדיניות type="checkbox".
רוצים להציע כמה אפשרויות?
יש כמה חלופות, בהתאם לתרחיש לדוגמה שלכם.
תחילה נבחן פתרונות אפשריים, אם לאפשר למשתמשים לבחור באפשרות אחת בלבד.
אפשר להשתמש בכמה רכיבי <input> עם type="radio" ועם אותו ערך name. המשתמשים רואים את כל האפשרויות בו-זמנית, אבל הם יכולים לבחור רק אחת.
אפשרות נוספת היא להשתמש ברכיב <select>.
המשתמשים יכולים לגלול ברשימה של האפשרויות הזמינות ולבחור אחת מהן.
בתרחישים מסוימים, כמו בחירת טווח מספרים, מומלץ להשתמש ב-<input> מסוג range.
האם אתם צריכים להציע את האפשרות לבחור כמה אפשרויות?
יש להשתמש ברכיב <select> עם המאפיין multiple או עם כמה רכיבי <input> מסוג checkbox.
אפשר גם להשתמש ב-<input> בשילוב עם האלמנט <datalist>.
הפעולה הזו יוצרת שילוב של שדה טקסט ורשימה של רכיבי <option>.
מוודאים שהמשתמשים יכולים למלא סוגים שונים של נתונים
יש יותר סוגים של קלט לתרחישים ספציפיים.
יש <input> מסוג color כדי לספק למשתמשים בוחר צבעים בדפדפנים נתמכים,
ויש כל מיני סוגים אחרים. כדי להבטיח שהמשתמשים יוכלו להזין את הסיסמה שלהם, צריך להשתמש ב-<input>
עם type="password". כל תו שהוזן מוסתר באמצעות כוכבית ("*") או נקודה ("•"), כדי לוודא שלא ניתן לקרוא את הסיסמה.
רוצה לכלול אסימון אבטחה ייחודי בנתוני הטופס?
יש לך אפשרות להשתמש באתר <input> עם החשבון type="hidden".
המשתמשים לא יכולים לראות או לשנות את הערך של <input> מסוג hidden.
כדי לאפשר למשתמשים להעלות ולשלוח קבצים, צריך להשתמש ב-<input> עם type="file".
אפשר גם להגדיר רכיבים מותאמים אישית אם יש לכם תרחיש מיוחד לדוגמה, שבו אף רכיב מובנה או סוג לא מתאימים.
איך לעזור למשתמשים למלא את הטופס
קיימים סוגים רבים של אלמנטים וסוגים, אבל באיזה מהם כדאי לבחור?
בתרחישים מסוימים, קל לבחור את הרכיב והסוג המתאימים, למשל <input type="date">. לאחרים זה תלוי.
לדוגמה, אפשר להשתמש בכמה רכיבי <input> עם רכיב type="checkbox" או <select>.
למידע נוסף על בחירה בין תיבות רשימה ורשימות נפתחות.
באופן כללי, חשוב לבדוק את הטופס בקרב משתמשים אמיתיים כדי למצוא את הרכיב והסוג הטובים ביותר.
בחינת ההבנה
בחינת הידע שלך על שדות טפסים
האם ניתן להעלות מספר קבצים באמצעות פקד טופס?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.מה ההבדל בין type="text" לבין type="password"?
type="password".type="password", כל תו שהוזן מוסתר על ידי כוכבית (*) או נקודה (•).type="password".