איך לעזור למשתמשים להשתמש בטופס באמצעות הדפדפן המועדף עליהם
כדי להבטיח שהטופס יהיה נגיש לכמה שיותר אנשים, צריך להשתמש ברכיבים המובנים של המשימה: <input>, <textarea>, <select> ו-<button>. זהו הבסיס לטופס שניתן להשתמש בו.
סגנונות הדפדפן המוגדרים כברירת מחדל לא נראים נהדר! בואו נשנה זאת.
חשוב לוודא שכולם יכולים לקרוא את אמצעי הבקרה של הטפסים
ברוב הדפדפנים, גודל הגופן שמוגדר כברירת מחדל לפקדי הטפסים קטן מדי. כדי לוודא שפקדי הטופס קריאים, צריך לשנות את גודל הגופן באמצעות CSS:
יש להגדיל את המדד font-size ואת הערך line-height כדי לשפר את הקריאות.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
איך לעזור למשתמשים לנווט בטופס
בשלב הבא, צריך לשנות את פריסת הטופס ולהגדיל את הריווח בין רכיבי הטופס, כדי לעזור למשתמשים להבין אילו רכיבים שייכים זה לזה.
מאפיין ה-CSS margin מגדיל את הרווח בין הרכיבים,
והמאפיין padding מגדיל את השטח מסביב לתוכן של הרכיב.
לפריסה הכללית, צריך להשתמש ב-Flexbox או ב-Grid. מידע נוסף על שיטות לפריסת CSS
חשוב לוודא שפקדי הטפסים נראים כמו פקדי טפסים
הקל על אנשים למלא את הטופס שלך באמצעות שימוש בסגנונות מובנים היטב בפקדי הטופס שלך.
לדוגמה, אפשר לעצב רכיבי <input> עם מסגרת אחידה.
input,
textarea {
border: 1px solid;
}
איך לעזור למשתמשים לשלוח את הטופס
כדאי להשתמש ב-background עבור <button> כדי להתאים לסגנון האתר,
ולבטל או להסיר את סגנונות ברירת המחדל של border.
יש לך אפשרות לעזור למשתמשים להבין את המצב הנוכחי
דפדפנים מחילים את סגנון ברירת המחדל על :focus.
אפשר לשנות את הסגנונות של :focus כדי להתאים את הצבע למותג.
button:focus {
outline: 4px solid green;
}
בחינת ההבנה
בחינת הידע שלכם בנושא עיצוב טפסים
למה כדאי להשתמש ביחידות יחסיות עבור font-size?
כיצד ניתן להגדיל את הריווח בין פקדי הטפסים?
padding.spacer.margin.boundary.