تساعد النماذج جيدة التصميم المستخدمين على زيادة معدلات الإحالات الناجحة. يمكن أن يؤدي إصلاح واحد صغير إلى إحداث فرق كبير!
في ما يلي مثال لنموذج دفع بسيط يعرض جميع أفضل الممارسات:
فيما يلي مثال على نموذج عنوان بسيط يوضح جميع أفضل الممارسات:
على سبيل المثال، يحدد رمز 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
تخطيط متعدد الأعمدة
بالنسبة إلى بعض أنواع التنسيق، يمكنك استخدام التنسيق متعدد الأعمدة (متعدد الأعمدة)،
الذي يمكنه إنشاء أعداد متجاوبة من الأعمدة باستخدام السمة column-width.
في المثال التوضيحي أدناه، يمكنك ملاحظة إضافة الأعمدة إذا كان هناك مساحة لعمود "200px" آخر.