تأثير خلل

تساعد النماذج المصمّمة جيدًا المستخدمين وتزيد من معدّلات الإحالات الناجحة. يمكن أن يحدث إصلاح بسيط فرقًا كبيرًا.

إذا كنت تفضّل الاطّلاع على أفضل الممارسات هذه من خلال دليل تعليمي، يمكنك الاطّلاع على هذين الجدولَين الواردَين في الدليل التعليمي لأفضل الممارسات المتعلّقة بنموذج الدفع والدليل التعليمي لأفضل الممارسات المتعلّقة بنموذج العنوان.

في ما يلي مثال على نموذج دفع يعرض جميع أفضل الممارسات:

في ما يلي مثال على نموذج عنوان بسيط يعرض جميع أفضل الممارسات:

على سبيل المثال، يحدّد رمز 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;
}

يمكن أيضًا استخدام الشبكة لإنشاء تصاميم شبكية عادية، بأكبر عدد ممكن من العناصر. سينخفض عدد الأغاني المتاحة مع تصغير حجم الشاشة. في العرض التجريبي، لدينا عدد البطاقات الذي يمكن أن يناسب كل صف، بحد أدنى للحجم يبلغ 200px.

مزيد من المعلومات حول تنسيق CSS Grid Layout

تنسيق متعدّد الأعمدة

بالنسبة إلى بعض أنواع التنسيق، يمكنك استخدام التنسيق المتعدّد الأعمدة (Multicol)، الذي يمكنه إنشاء أعداد متغيّرة من الأعمدة باستخدام السمة column-width. في العرض الترويجي، يمكنك ملاحظة أنّه تتم إضافة الأعمدة إذا كان هناك مساحة لعمود 200px آخر.