:checked و:disabled وأصناف حالات النماذج الزائفة
نسّق عناصر النماذج استنادًا إلى حالاتها التفاعلية مثل checked وdisabled وrequired
:checked و:disabled وأصناف حالات النماذج الزائفة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
نظرة عامة على الفئات الزائفة لحالات النماذج
يوفر CSS فئات زائفة تعكس حالات عناصر نماذج HTML. وتتيح هذه الفئات تنسيق عناصر التحكم في النماذج باستخدام CSS فقط، من دون JavaScript.
:checked
تُطبَّق :checked على مربعات الاختيار وأزرار الاختيار عند تحديدها، وعلى عناصر <option> داخل عناصر select عند اختيارها.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked لمربعات الاختيار المخصصة
حيلة :checked: أخفِ حقل الإدخال الأصلي، ونسّق مربعًا مخصصًا باستخدام محدد العنصر الشقيق المجاور الذي تُفعّله :checked:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled و:enabled
تحدد :disabled عناصر النماذج التي تحمل السمة disabled. وتحدد :enabled العناصر التي يمكن التفاعل معها.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required و:optional
تحدد :required حقول الإدخال التي تحمل السمة required. وتحدد :optional حقول الإدخال التي لا تحملها.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid و:invalid
تعكس :valid و:invalid حالة التحقق الأصلية للنموذج في المتصفح، بناءً على قيود النوع والنمط وmin/max وrequired.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid و:user-invalid
يُجري المتصفح التحقق فور تحميل الصفحة، حتى قبل تفاعل المستخدم. ولا تُطبَّق :user-valid و:user-invalid إلا بعد أن يتفاعل المستخدم مع الحقل — وهذا أفضل بكثير لتجربة المستخدم.
<input type="email" value="not-an-email" required />
:placeholder-shown
تُطبَّق :placeholder-shown عندما يعرض حقل الإدخال نص العنصر النائب، ما يعني أن الحقل فارغ حاليًا. استخدمها لاكتشاف حقول الإدخال الفارغة من دون JavaScript.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only و:read-write
تحدد :read-only حقول الإدخال التي تحمل السمة readonly. وتحدد :read-write حقول الإدخال القابلة للتحرير.
<input type="text" value="Read-only field" readonly />
:indeterminate
تُطبَّق :indeterminate على مربعات الاختيار التي تكون في حالة intermediate، أي ليست محددة ولا غير محددة — وتُضبط عبر JavaScript، وعلى أزرار الاختيار عندما لا يكون قد تم اختيار أي عنصر في المجموعة.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range و:out-of-range
بالنسبة إلى حقول الإدخال من النوع type="number" أو type="range" التي تحتوي على min/max، تعكس :in-range و:out-of-range صلاحية القيمة الحالية مقارنةً بهذه الحدود.
<input type="number" min="1" max="10" value="15" />
تحقق سريع
أي فئة زائفة تطبّق أنماط التحقق من النموذج فقط بعد أن يتفاعل المستخدم مع حقل الإدخال؟
مراجعة
تعكس الفئات الزائفة لحالات النماذج في CSS حالة التحقق الأصلية للنموذج والتفاعل معه من دون JavaScript، ومنها: :checked و:disabled و:required و:valid و:invalid وغيرها. فضّل :user-invalid على :invalid للحصول على تجربة مستخدم أفضل. واستخدم :placeholder-shown لاكتشاف الحقول الفارغة.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «:checked و:disabled وأصناف حالات النماذج الزائفة» مجاني؟
نعم — نص درس «:checked و:disabled وأصناف حالات النماذج الزائفة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «:checked و:disabled وأصناف حالات النماذج الزائفة»؟
نسّق عناصر النماذج استنادًا إلى حالاتها التفاعلية مثل checked وdisabled وrequired تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «:checked و:disabled وأصناف حالات النماذج الزائفة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- :hover و:focus و:active و:visited
- :nth-child و:nth-of-type
- :not() و:is() و:where()
- :checked و:disabled وأصناف حالات النماذج الزائفة