تنسيق النماذج وحقول الإدخال في لغة CSSCSS Forms

ترسم المتصفحات عناصر <input> و<textarea> و<select> و<button> افتراضياً بأنماط نظام التشغيل القديمة، ولذلك لا ترث نوع الخط العربي أو حجمه المحدد على وسم body! كما يؤدي منح الحقل عرضاً كاملاً width: 100% مع حشوة وإطار دون توحيد تحجيم الصندوق إلى خروجه عن حدود البطاقة.

لذلك يبدأ تنسيق النماذج الاحترافية دائماً بقاعدة التوحيد input, select, textarea, button { font: inherit; } مع box-sizing: border-box وعرض متجاوب width: 100% وارتفاع نقر مريح لا يقل عن 44px على الشاشات اللمسية.

بما أن وسم <input> يمثل حقولاً نصية ومربعات اختيار وأزرار انتقاء في آن واحد، تجنب منح المحدد العام input عرضاً كاملاً بصورة عشوائية! واستهدف الحقول النصية بفئة موحدة مثل .form-control أو بمحددات السمات الدقيقة مثل input[type="email"] وinput[type="password"].

وفي مساحات الكتابة متعددة الأسطر <textarea> اضبط دائماً resize: vertical; min-height: 110px; ليتمكن الزائر من توسيع الصندوق رأسياً عند الحاجة دون سحبه أفقياً وإفساد أعمدة الشبكة. أما القوائم المنسدلة <select> فتلغي الخاصية القياسية appearance: none مظهر النظام القديم لتمنحها إطاراً وحشوة متطابقة تماماً مع بقية الحقول.

ضع كل تسمية <label> أعلى الحقل المرتبط بها مباشرة عبر display: block; margin-bottom: 6px; font-weight: 700; بدلاً من حشر التسميات بجانب الحقول في الشاشات الضيقة؛ إذ تسرّع التسميات العلوية مسح العين للنموذج وتستوعب النصوص العربية والإنجليزية الطويلة دون انكسار مزعج.

رتب مجموعات الحقول داخل شبكة CSS Grid تبدأ بعمود واحد grid-template-columns: 1fr; gap: 16px; على الهاتف، ثم تتحول داخل @media (min-width: 640px) إلى عمودين متوازنين repeat(2, 1fr) للحقول المتجاورة كالاسم الأول والأخير، مع منح مساحة الرسالة وزر الإرسال الامتداد الكامل عبر grid-column: 1 / -1.

تتعطل حقول البحث والحقول المزودة بأيقونة داخلية فور تحويل الواجهة إلى العربية عندما يثبت المطور موضع الأيقونة مادياً عبر left: 12px وحشوة الحقل عبر padding-left: 38px؛ فتبقى الأيقونة في اليسار أو يصطدم بها النص المكتوب!

والحل الهندسي الصحيح هو تثبيت الأيقونة عبر inset-inline-start: 12px ومنح الحقل حشوة بادئة مطابقة padding-inline-start: 38px لينعكس التصميم تلقائياً بين العربية والإنجليزية. أما البيانات اللاتينية بطبيعتها كالبريد الإلكتروني والروابط داخل نموذج عربي فيُفضل إعطاؤها السمة dir="ltr" على الحقل نفسه مع إبقاء تسميته العلوية بالعربية.

إياك وحذف إطار التركيز عبر outline: none دون تعويضه بحلقة تركيز عالية التباين! إذ يتيح المحدد :focus-visible على الحقول والقوائم والأزرار استبدال الإطار الافتراضي بحلقة واضحة ومتناسقة مثل border-color: #7750b2; outline: 3px solid rgba(119, 80, 178, 0.28); ليعرف مستخدم لوحة المفاتيح موضعه بدقة في كل لحظة.

وميز الحقول غير القابلة للتعديل بهدوء بصري؛ فالحقول المعطلة :disabled تأخذ خلفية هادئة مع opacity: 0.65 ومؤشر cursor: not-allowed، بينما تحافظ الحقول المخصصة للقراءة فقط :read-only على وضوح نصها الكامل لتسهيل قراءته ونسخه.

تمنحك ثلاث خصائص حديثة مواءمة فورية لتفاصيل النموذج الدقيقة مع هوية موقعك. أولاها accent-color: #7750b2 التي تلون مربعات الاختيار وأزرار الانتقاء وأشرطة التمرير بسطر واحد دون هدمها وإعادة بنائها! وثانيتها caret-color: #7750b2 التي تلون مؤشر الكتابة النابض داخل الحقول مع إبقاء النص المكتوب داكناً وواضحاً، إلى جانب تنسيق النص الإرشادي عبر ::placeholder.

وعندما يتطلب التصميم مفتاح تبديل مخصصاً على هيئة كبسولة منزلقة، نجمع الخاصية القياسية appearance: none على مربع اختيار حقيقي <input type="checkbox" class="toggle"> مع مقبض دائري عبر ::before ينزلق عند تحقق الحالة .toggle:checked::before بحفاظ كامل على دعم لوحة المفاتيح وبصفر برمجة.

يؤدي استخدام المحدد الخام input:invalid إلى تجربة مربكة ومزعجة؛ لأن جميع الحقول الإلزامية الفارغة تشتعل باللون الأحمر فور فتح الصفحة قبل أن يلمس الزائر لوحة المفاتيح! وتعالج اللغة الحديثة هذه المشكلة بأناقة عبر :user-invalid و:user-valid اللذين لا ينشطان إلا بعد تفاعل المستخدم الفعلي مع الحقل أو محاولة الإرسال.

احرص دائماً على إرفاق ألوان الصحة الخضراء والخطأ الحمراء بنص إرشادي واضح أو رمز مساعد، ولا تعتمد على اللون وحده مراعاةً للمستخدمين المصابين بعمى الألوان.

ومع ختام مسار CSS المتكامل، رسّخ هذه القاعدة الهندسية الحاسمة: تنسيقات الصحة والتعطيل في المتصفح وسائل لتحسين تجربة المستخدم وليست ضوابط أمنية على الإطلاق! فإخفاء زر عبر display: none أو تعطيله عبر :disabled أو تلوين الحقل بالأخضر عبر :user-valid يجري بالكامل على جهاز الزائر.

يستطيع أي شخص فتح أدوات المطور وحذف سمة disabled أو required أو إرسال طلب شبكي مباشر إلى الخادم متجاوزاً المتصفح برمته. لذلك يظل التحقق الصارم من البيانات والصلاحيات والتعقيم على الخادم إلزامياً في كل نموذج دون استثناء.