כדי לספק את חוויית המשתמש הטובה ביותר, חשוב להשתמש ברכיב וב-element type שהכי מתאימים לנתונים שהמשתמש מזין.
עזרה למשתמשים במילוי טקסט
משתמשים ברכיב <input> כדי לספק שדה בטופס. התג <input> הוא הבחירה הטובה ביותר למילים בודדות, לביטויים ולערכים קצרים. אם הטקסט ארוך יותר, צריך להשתמש ברכיב <textarea>. כך אפשר להזין כמה שורות של טקסט, וקל יותר למשתמש לראות את הטקסט שהוא הזין, כי אפשר לגלול ולשנות את הגודל של הרכיב.
לוודא שהמשתמשים מזינים את הנתונים בפורמט הנכון
רוצים לעזור למשתמשים למלא מספר טלפון?
משנים את מאפיין type ל-type="tel" עבור <input>.
משתמשים במכשירים ניידים מקבלים מקלדת וירטואלית מותאמת,
כך שהם יכולים להזין את מספר הטלפון מהר יותר.
לכתובת אימייל, משתמשים ב-type="email".
שוב, מוצגת מקלדת וירטואלית מותאמת.
כדי להגדיר שדה בטופס כשדה חובה, משתמשים במאפיין required.
כששולחים את הטופס, הדפדפן בודק אם יש ערך לקלט ואם הוא תקין: במקרה הזה, אם מדובר בכתובת אימייל בפורמט תקין.
מידע נוסף על סוגי הקלט השונים הן כוללות גם תכונות אימות מובנות.
עזרה למשתמשים במילוי תאריכים
מתי רוצים להתחיל את הנסיעה הבאה?
כדי לעזור למשתמשים למלא תאריכים, אפשר להשתמש ב-type="date".
בדפדפנים מסוימים הפורמט מוצג כפלייסלודר, כמו 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".