איך לעזור למשתמשים להשתמש בטופס באמצעות הדפדפן המועדף עליהם
כדי להבטיח שהטופס נגיש לכמה שיותר אנשים, צריך להשתמש ברכיבים שמיועדים
משימה: <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
?
איך אפשר להגדיל את המרווח בין פקדי הטופס?
boundary
.padding
.spacer
.margin
.