תקלה

טפסים מעוצבים היטב עוזרים למשתמשים ומגדילים את שיעורי ההמרות. שינוי קטן אחד יכול לחולל הבדל גדול!

דוגמה לטופס תשלום פשוט שמדגים את כל השיטות המומלצות:

דוגמה לטופס כתובת פשוט שמדגים את כל השיטות המומלצות:

לדוגמה, קוד ה-HTML הבא מציין קלט עבור שנת לידה בין 1900 ל-2020. השימוש ב-type="number" מגביל את ערכי הקלט למספרים בלבד, בטווח שצוין על ידי min ו-max. אם תנסו להזין מספר מחוץ לטווח, הערך של הקלט יוגדר בסטטוס לא חוקי.

בדוגמה הבאה נעשה שימוש ב-pattern="[\d ]{10,30}" כדי להבטיח מספר כרטיס תשלום תקין, עם הקצאת רווחים:

דפדפנים מודרניים מבצעים גם אימות בסיסי עבור קלט מסוג email או url.

פריסת רשת CSS

פריסת רשת CSS מאפשרת יצירה ישירה של רשתות גמישות. אם נתייחס לדוגמה הצפה הקודמת, במקום ליצור את העמודות עם אחוזים, אפשר להשתמש בפריסת רשת וביחידה fr, שמייצגת חלק מהמקום הזמין בקונטיינר.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

אפשר גם להשתמש ברשת כדי ליצור פריסות רשת רגילות, עם כמה פריטים שרוצים. מספר הטראקים הזמינים יצטמצם ככל שגודל המסך יצטמצם. בהדגמה שלמטה, יש לנו מספר בלתי מוגבל של כרטיסים בכל שורה, בגודל מינימלי של 200px.

מידע נוסף על פריסת רשת של CSS

פריסה עם יותר מעמודה

בחלק מסוגי הפריסות אפשר להשתמש בפריסה עם כמה עמודות (Multicol) וליצור מספרים רספונסיביים של עמודות באמצעות הנכס column-width. בהדגמה שלמטה אפשר לראות שהעמודות נוספו אם יש מקום לעמודה 200px נוספת.