فرم CSS

من خلال استخدام CSS، يمكنك تحسين بشكل كبير مظهر نماذج HTML

جرب بنفسك

لإعداد نمط حقل الإدخال

استخدام width لتحديد عرض حقل الإدخال:

مثال

input {
  width: 100%;
}

جرب بنفسك

في المثال السابق، ينطبق على جميع عناصر <input>. إذا كنت ترغب في تعيين نمط لنوع معين من الحقول الإدخالية فقط، يمكنك استخدام محدد الخصائص:

  • input[type=text] - سيقوم بالاختيار فقط من الحقول النصية
  • input[type=password] - سيقوم بالاختيار فقط من الحقول الخاصة بالكلمات المرور
  • input[type=number] - سيقوم بالاختيار فقط من الحقول الرقمية
  • الخ

ملء حقل الإدخال

استخدام padding لإضافة مساحة داخل حقل النص.

نصيحة:إذا كان هناك العديد من الحقول الإدخالية، قد تحتاج أيضًا إلى إضافة مسافات جانبية لتضيف مساحة إضافية خارجها:

مثال

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

جرب بنفسك

لاحظ أننا قمنا بإعداد box-sizing لإعداد الخصائص border-boxإذا كان هذا يمكن أن يضمن أن مجموع الارتفاع والعرض للعنصر يشمل الحواف الداخلية (ملء) والحواف النهائية.

يرجى استخدام حجم الصندوق CSS في هذا الفصل، ستعلم عن box-sizing للتعرف على المزيد من الخصائص للنمط.

حقل إدخال به حواف

يُرجى استخدام border لتحديد سمك وحجم الحافة باستخدام border-radius لإضافة رؤوس دائرية:

مثال

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

جرب بنفسك

إذا كنت بحاجة إلى حافة أسفل فقط، استخدم border-bottom الخصائص:

مثال

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

جرب بنفسك

حقل إدخال ملون

يُرجى استخدام background-color لإضافة لون خلفية إلى حقل الإدخال باستخدام color لتبديل لون النص:

مثال

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

جرب بنفسك

حقل الإدخال الذي حصل على التركيز

بالتشابه، بعض المتصفحات تضيف محيط زرقاء حول حقل الإدخال عند حصوله على التركيز (النقر) يمكنك من خلال إضافة outline: none; لتجنب هذا السلوك.

استخدام :focus المحول يمكنه تعيين النمط له عند حصوله على التركيز في حقل الإدخال:

مثال 1

input[type=text]:focus {
  background-color: lightblue;
}

انقر في نافذة النص:

جرب بنفسك

مثال 2

input[type=text]:focus {
  border: 3px solid #555;
}

انقر في نافذة النص:

جرب بنفسك

حقل الإدخال مع الشعار/الصورة

إذا كنت ترغب في تضمين الشعار في حقل الإدخال، يمكنك استخدام background-image الخصائص، وإلى background-position لإعداد النمط مع بعض الخصائص. يجب الانتباه أيضًا إلى أننا أضفنا مساحة أكبر للنص (padding-left) لتوفير مساحة للشعار:

مثال

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

جرب بنفسك

حقل البحث مع تأثير الحركة

في هذا المثال، نستخدم CSS transition لإعداد تحويل عرض الحقل النصي عند التركيز عليه، ستجد أننا نستخدم CSS 过渡 CSS في هذا الفصل تعلمت المزيد عن transition معرفة الخصائص.

مثال

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

جرب بنفسك

تعيين نمط منطقة النص

نصيحة:استخدام resize الخصائص يمكن أن تمنع تقليل حجم textareas (تعطيل القابض في الزاوية اليمنى السفلية):

مثال

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

جرب بنفسك

تعيين نمط قائمة الإختيار

مثال

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

جرب بنفسك

تعيين نمط زر الإدخال

مثال

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* نصيحة: استخدم width: 100% لتحقيق زر واسع تمامًا */

جرب بنفسك

للتعلم المزيد عن كيفية ضبط نمط الأزرار باستخدام CSS، يرجى قراءة أزرار CSS دليل.

قائمة التشغيل المدمجة

الرجاء تعديل حجم نافذة محرر TIY لرؤية التأثير. عند انخفاض عرض الشاشة إلى أقل من 600 بكسل، يتم ت堆يع العمودين أعلى بعضها البعض بدلاً من ت堆يعهما على الجانبين.

مقدمة متقدمة: يستخدم المثال التالي استعلام الإعلام لإنشاء استمارة مدمجة. في الفصل التالي، ستتعلم المزيد من المعلومات ذات الصلة.

اعرض قائمة التشغيل المدمجة