في تصميم نموذج الويب، يعد التحقق من صحة الإدخال رابطًا رئيسيًا لضمان قيام المستخدمين بإرسال بيانات صالحة. يقدم HTML5 سمات min والحد max لعنصر <input> ، مما يجعل من الممكن تحديد نطاق الإدخال الرقمي في الواجهة الأمامية. يعمل CSS3 أيضًا على توسيع هذه الوظيفة من خلال السماح للمطورين بتقديم تعليقات مرئية للمدخلات الموجودة داخل أو خارج نطاق محدد مسبقًا من خلال الفئات الزائفة :in-range و :out-of-range . ستوضح هذه المقالة بالتفصيل كيفية استخدام هاتين الفئتين الزائفتين لتحسين تجربة المستخدم للتحقق من صحة الإدخال.
عندما يقوم المستخدم بملء نموذج، تحتاج بعض الحقول إلى تلبية نطاقات رقمية محددة. على سبيل المثال، لا يمكن أن يكون العمر رقمًا سلبيًا ويجب أن تتراوح درجات الاختبار بين 0 و100. التحقق من صحة النطاق الصحيح يخبر المستخدم على الفور ما إذا كانت مدخلاته صالحة.
يدعم عنصر <input> في HTML5 سمات min والحد max ، مما يسمح للمطورين بتحديد الحد الأدنى والحد الأقصى لقيم حقول الإدخال. عند دمجها مع type="number" أو type="range" ، يمكن لهذه الخصائص إنشاء حدود على المدخلات الرقمية.
يتم استخدام محدد الفئة الزائفة :in-range لتحديد حقول الإدخال التي تقع قيمتها الحالية ضمن النطاق المحدد بواسطة سمات min و max .
في المقابل، يتم استخدام محدد الفئة الزائفة :out-of-range لتحديد حقول الإدخال التي تكون قيمها الحالية خارج النطاق المحدد بواسطة سمات min و max .
فيما يلي مثال لـ HTML وCSS يوضح كيفية استخدام الفئتين الزائفتين :in-range و :out-of-range :
<النموذج>
<label for="age">العمر (0-120):</label>
<نوع الإدخال = "الرقم" معرف = "العمر" اسم = "العمر" دقيقة = "0" الحد الأقصى = "120">
<span class="error-message">عمر غير صالح</span>
<نوع الإدخال = "إرسال" القيمة = "إرسال">
</النموذج> /* نمط إدخال صالح*/
الإدخال: في النطاق {
الحدود: 2 بكسل أخضر خالص؛
}
/* نمط الإدخال غير صالح */
الإدخال: خارج النطاق {
الحدود: 2 بكسل أحمر خالص؛
}
/* نمط رسالة الخطأ*/
رسالة خطأ {
اللون: أحمر؛
العرض: لا شيء؛
}
الإدخال: خارج النطاق + رسالة خطأ {
عرض: كتلة؛
}من خلال تعيين ألوان حدود مختلفة أو ألوان خلفية للإدخالات الصالحة وغير الصالحة، يمكنك مساعدة المستخدمين على تحديد ما إذا كان الإدخال يلبي المتطلبات بشكل مرئي.
عند استخدام الفئات الزائفة :in-range و :out-of-range ، تأكد من أن الأنماط تعمل بشكل جيد على قدم المساواة عبر الأجهزة وأحجام الشاشات للحفاظ على النموذج الخاص بك متسقًا وقابلاً للاستخدام.
بالإضافة إلى الأسلوب البصري، يجب أيضًا مراعاة احتياجات مستخدمي التكنولوجيا المساعدة. على سبيل المثال، استخدم السمة aria-invalid="true" لتوفير سياق إضافي لبرامج قراءة الشاشة.
بالدمج مع ميزات التحقق من صحة النموذج في HTML5، يمكن استخدام الفئات الزائفة :in-range و :out-of-range مع الفئات الزائفة :valid و :invalid لتوفير تعليقات مرئية أكثر ثراءً للتحقق من صحة النموذج.
يتم دعم الفئات الزائفة :in-range و :out-of-range بواسطة معظم المتصفحات الحديثة، ولكن قد لا يتم التعرف عليها في بعض المتصفحات القديمة. وهذا يجب أن يؤخذ في الاعتبار عند التصميم.
في تطبيقات الويب الفعلية، يمكن استخدام الفئات الزائفة :in-range و :out-of-range في مجموعة متنوعة من السيناريوهات، بما في ذلك نماذج التسجيل، ونماذج تسجيل الدخول، ونماذج الإعدادات، وما إلى ذلك.
في حين أن فئات CSS الزائفة يمكن أن توفر تعليقات مرئية ثابتة، فإن دمجها مع JavaScript يمكن أن يخلق تفاعلات أكثر ديناميكية، مثل التحقق الفوري والتعليقات كمدخلات المستخدم.
عند تصميم النموذج الخاص بك، تأكد من اتباع أفضل ممارسات إمكانية الوصول، مثل استخدام تسميات واضحة وتباين معقول وعلامات الحقول المناسبة.
تعد الفئات الزائفة :in-range و :out-of-range أداتين قويتين في CSS يمكنهما مساعدة المطورين على تحسين التعليقات المرئية للتحقق من صحة الإدخال وتحسين تجربة المستخدم. من خلال مقدمة هذه المقالة، يجب أن تكون قادرًا على فهم المفاهيم الأساسية واستخدام هاتين الفئتين الزائفتين، ومعرفة كيفية تطبيقهما على تصميم نموذج الويب الفعلي. تذكر أن تصميم النموذج الجيد لا يقتصر فقط على تنفيذ الوظائف، بل يتعلق أيضًا بتوفير واجهة واضحة وبديهية وسهلة الاستخدام.
من خلال استكشاف المزيد لاستخدام الفئتين الزائفتين :in-range و :out-of-range ، يمكنك إنشاء نماذج جميلة وعملية تلبي احتياجات تطبيقات الويب الحديثة. آمل أن تصبح هذه المقالة مصدرًا قيمًا عند استخدام CSS لتحسين تصميم النموذج الخاص بك.
بهذا نختتم هذه المقالة حول كيفية تحسين الفئات الزائفة: داخل النطاق و: خارج النطاق لـ CSS للملاحظات المرئية للتحقق من صحة الإدخال. المزيد من CSS ذات الصلة: داخل النطاق و: خارج النطاق بالنسبة لمحتوى الفئة الزائفة، يرجى البحث المقالات السابقة على downcodes.com أو مواصلة تصفح المقالات ذات الصلة أدناه، وآمل أن تدعم downcodes.com أكثر في المستقبل!