فرم 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اینطور است که می‌توانید اطمینان حاصل کنید که عرض و ارتفاع کل عنصر شامل حاشیه‌ها (پرکننده‌ها) و لبه‌های نهایی است.

لطفاً در Box Sizing 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 در این فصل بیشتر در مورد 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 پیکسل باشد، دو ستون به صورت عمودی به جای افقی روی هم قرار می‌گیرند.

پیشرفته: مثال‌های بعدی از استفاده جستجوهای رسانه‌ای برای ایجاد فرم واکنش‌گرا بیایید. در فصل بعدی، شما اطلاعات بیشتری خواهید آموخت.

منو واکنش‌گرا را مشاهده کنید