فرم‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:فرم‌ها)
پرش به ناوبری پرش به جستجو

ظاهر یک فرم HTML را می‌توان با استفاده از CSS به خوبی بهبود داد:[۱]

استایل دهی فیلدهای ورودی

از ویژگی width برای مشخص کردن اندازهٔ عرض فیلد ورودی استفاده کنید:

مثال

input {
  width: 100%;
}


مثال بالا روی تمامی عناصر <input> اعمال می‌شود. اگر می‌خواهید نوع خاصی از input را استایل دهی کنید، می‌توانید از انتخابگرهای خاصیت (attribute) استفاده کنید:

  • input[type=text] - تنها فیلدهای متنی را انتخاب خواهد کرد
  • input[type=password] - تنها فیلدهای password را انتخاب خواهد کرد
  • input[type=number] - تنها فیلدهای عددی را انتخاب خواهد کرد
  • و غیره …

فیلدهای ورودی دارای padding

از ویژگی padding برای اضافه‌کردن فاصله در داخل فیلد متنی استفاده می‌شود.

نکته: زمانی که چندین فیلد ورودی بصورت پشت سرهم دارید، ممکن است بخواهید حاشیه ای هم margin اضافه کنید، تا فضای بیشتری در خارج از آنها ایجاد کنید:

مثال

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


توجه داشته باشید که ویژگی box-sizing را با مقدار border-box مقداردهی کرده‌ایم. این امر باعث می‌شود که padding و در نهایت کادر در عرض و ارتفاع کل عنصر در نظر گرفته شود. نکته نکته: می توانید مطالب بیشتری را در مورد Box Sizing در فصل box-sizing در CSS بخوانید.

فیلدهای ورودی دارای کادر

از ویژگی 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;
}


فیلدهای ورودی انتخاب شده (Focused)

به طور پیش‌فرض، برخی از مرورگرهادر هنگامی که تمرکز روی فیلدهای وروردی قرار می‌گیرد(روی آنها کلیک می‌شود) یک خط خارجی (outline) آبی رنگ در اطراف کادر ایجاد می‌کنند . می‌توانید این حالت را با اضافه‌کردن outline: none; به کادر ورودی حذف کنید.

از انتخابگر :focus برای انجام اقدامی در هنگام قرار گرفتن تمرکز برروی فیلد استفاده کنید:

مثال

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

مثال

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

کادر ورودی با آیکن یا تصویر

اگر می خواهید آیکنی درون کادر ورودی قرار دهید، از ویژگی background-image استفاده کنید و آن را با استفاده از ویژگی background-position موقعیت دهی کنید. همچنین توجه داشته باشید که یک padding بزرگ سمت چپ برای معکوس کردن فضای آیکن اضافه کرده‌ایم:

مثال

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


ورودی جستجوی متحرک

در این مثال ما از ویژگی transition در CSS برای متحرک (animate) کردن عرض ورودی جستجو در هنگام قرار گرفتن تمرکز برروی آن، استفاده می‌کنیم. نکته نکته: در آینده می توانید مطالب بیشتری را در مورد ویژگی transition ، در فصل transition در CSS خواهید آموخت.

مثال

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

input[type=text]:focus {
  width: 100%;
}


استایل دهی حوزه های متنی

نکته: از ویژگی resize برای جلوگیری از تغییر سایز حوزه متن استفاده کنید ("grabber" را در گوشه سمت راست پایین غیرفعال می‌کند)

مثال

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;
}

/* Tip: use width: 100% for full-width buttons */


برای اطلاعات بیشتر دربارهٔ نحوه استایل دهی کلیدها با CSS، آموزش کلیدها در CSS را مطالعه کنید.

فرم واکنش گرا

اندازه پنجره مرورگر را تغییر دهید تا این حالت را ببینید. زمانی که پهنای صفحه از ۶۰۰ پیکسل کمتر است، دو ستون ساخته می‌شود و به جای اینکه کنار هم قرار بگیرند بالای یکدیگر قرارمی گیرند.

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


منابع آموزشی