תקלה

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

אם אתם מעדיפים ללמוד את השיטות המומלצות האלה באמצעות הדרכה, תוכלו לעיין בשני הקודלאבסים הבאים: קודלאב בנושא שיטות מומלצות לטופס תשלום וקודלאב בנושא שיטות מומלצות לטופס כתובת.

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

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

לדוגמה, הקוד הבא ב-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.