באילו שדות טופס אפשר להשתמש?
כדי לספק את חוויית המשתמש הטובה ביותר, חשוב להשתמש ברכיב וברכיב 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"
.