فرم های خوب طراحی شده به کاربران کمک می کند و نرخ تبدیل را افزایش می دهد. یک اصلاح کوچک می تواند تفاوت بزرگی ایجاد کند!
در اینجا نمونه ای از یک فرم پرداخت ساده است که همه بهترین روش ها را نشان می دهد:
در اینجا نمونه ای از یک فرم آدرس ساده است که همه بهترین روش ها را نشان می دهد:
به عنوان مثال، HTML زیر ورودی را برای سال تولد بین 1900 و 2020 مشخص می کند. استفاده از type="number" مقادیر ورودی را فقط به اعداد، در محدوده تعیین شده توسط min و max محدود می کند. اگر بخواهید عددی خارج از محدوده وارد کنید، وضعیت ورودی نامعتبر تنظیم می شود.
مثال زیر از pattern="[\d ]{10,30}" برای اطمینان از یک شماره کارت پرداخت معتبر استفاده می‌کند و در عین حال فاصله‌ها را در نظر می‌گیرد:
مرورگرهای مدرن همچنین برای ورودی‌ها با نوع email یا url اعتبارسنجی اولیه را انجام می‌دهند.
طرح بندی شبکه CSS
CSS Grid Layout امکان ایجاد ساده شبکه های انعطاف پذیر را فراهم می کند. اگر مثال شناور قبلی را در نظر بگیریم، به جای ایجاد ستون های خود با درصد، می توانیم از طرح بندی شبکه و واحد fr استفاده کنیم که نشان دهنده بخشی از فضای موجود در ظرف است.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
از Grid می‌توان برای ایجاد طرح‌بندی‌های شبکه‌ای منظم، با هر تعداد آیتم که مناسب است استفاده کرد. با کوچک شدن اندازه صفحه، تعداد آهنگ های موجود کاهش می یابد. در نسخه ی نمایشی زیر، به تعداد کارت هایی که در هر ردیف جا می شود، با حداقل اندازه 200px داریم.
درباره CSS Grid Layout بیشتر بخوانید
طرح چند ستونی
برای برخی از انواع طرح‌بندی، می‌توانید از طرح‌بندی چند ستونی (Multicol) استفاده کنید، که می‌تواند تعداد ستون‌های پاسخگو با ویژگی column-width ایجاد کند. در نسخه ی نمایشی زیر، می بینید که در صورت وجود فضا برای ستون 200px دیگر، ستون ها اضافه می شوند.