צורות עיצוב

איך לעזור למשתמשים להשתמש בטופס באמצעות הדפדפן המועדף עליהם

כדי להבטיח שהטופס נגיש לכמה שיותר אנשים, צריך להשתמש ברכיבים שמיועדים משימה: <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;
}

בדיקת ההבנה

בוחנים את הידע שלכם בסגנונות עיצוב

משאבים

• מידע על CSS
• שיטות פריסה של CSS
• עיצוב של סימני מיקוד
• ביטול סגנון ברירת המחדל של <button>.