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