جاري التحميل...

عناصر النماذج في CSS

النماذج حيث يكتب الناس ويختارون ويرسلون. CSS يجعل input وtextarea وselect أوضح وأهدأ — حشو كافٍ وحدود مرتبة وإشارة تركيز تُرى فعلًا — بينما يبقي HTML الدلالة.

مجموعة أدوات عنصر النموذج

📊 عناصر النموذج بنظرة واحدة

الجزء دوره اليومي
input / textarea / select العناصر الأساسية التي تنسّقها معًا لنموذج متسق
padding + border امنح الحقول مساحة وحافة واضحة
border-radius ليّن الزوايا ليبدو الحقل حديثًا لا قاسيًا
:focus-visible أظهر حلقة تركيز للوحة المفاتيح/المؤشر
:disabled خفّف الحقول غير القابلة للتحرير الآن

نسّق فئة مشتركة (أو مجموعة عناصر) مرة واحدة ليشعر كل حقل بأنه من العائلة نفسها. مظهر الأزرار درس لاحق.

حقول النص — مساحة وحواف

حقول المتصفح الافتراضية غالبًا غير متسقة بين الأجهزة. اضبط العرض والحشو وحجم الخط وحدًا خفيفًا ليكون الكتابة مريحة.

حقل نص أساسي

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — مساحة للكتابة

يحتاج textarea ارتفاعًا ونفس لغة الحشو مثل input. اسمح بالتكبير العمودي إن توقعت إجابات طويلة؛ اقفلها إن وجب ثبات التخطيط.

textarea مريح

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — نفس العائلة

القوائم المنسدلة يجب أن تشارك الحدود والزوايا والحشو مع حقول النص كي لا يبدو النموذج مرقّعًا.

select في العائلة نفسها

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

تركيز يمكن رؤيته

لا تزيل أنماط التركيز بلا بديل. :focus-visible يرسم حلقة واضحة لمستخدمي لوحة المفاتيح مع مظهر هادئ.

حلقة تركيز مرئية

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

الحقول المعطّلة

يجب أن تبدو عناصر disabled غير متاحة — شفافية أقل أو خلفية باهتة — دون أن تختفي من التخطيط.

نبرة disabled

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

عادة هادئة للحقول

أبقِ أسلوب حقل مشتركًا واحدًا، احترم تباعد التسمية القريبة، حافظ على التركيز، واترك مظهر الزر الأساسي لدرس الأزرار.

فئة حقل مشتركة

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

جرّب بنفسك

  1. نسّق حقول نص/بريد بحشو وحد وborder-radius.
  2. طابق textarea بنفس المظهر؛ اضبط resize: vertical.
  3. نسّق select بنفس عائلة الحدود.
  4. أضف outline :focus-visible ولون حد — لا تترك outline: none عاريًا.
  5. خفّف input:disabled وتحقق أنه ما زال يُقرأ كحقل.

أخطاء شائعة

  • outline: none بلا بديل تركيز (مستخدمو لوحة المفاتيح يضيعون)
  • حشو وخط صغير يجعل الكتابة على الجوال مؤلمة
  • تنسيق كل عنصر بشكل مختلف فيبدو النموذج عشوائيًا
  • تحويل هذا الدرس إلى تصميم أزرار (ذلك التالي)
  • الخلط مع border-collapse وصفوف الجداول المتناوبة (الجلسة السابقة)

ملخص

  • الحشو والحد ونصف القطر المشترك توحّد input وtextarea وselect
  • امنح textarea ارتفاعًا وسلوك تكبير معقولًا
  • أبقِ إشارة :focus-visible مرئية
  • خفّف حقول :disabled؛ لا تخفِها
  • اترك مظهر الأزرار للدرس التالي

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 33 من 35
Css درس تعليمي