פירוט של שדות הטופס

באילו שדות טופס אפשר להשתמש?

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

משאבים