جلسه هفدهم: استایل دهی فرم در CSS

استایل دهی فرم در CSS

خوش اومدین به هفدهمین جلسه از دوره آموزش رایگان CSS. در این جلسه به سراغ فرم ها رفتیم و قراره که در مورد استایل فرم در css با همدیگه صحبت کنیم. ما قبلا در دوره آموزش HTML یاد گرفتیم که چگونه یک فرم ایجاد کنیم. امروز قرار هست که فرم های ایجاد شده در HTML رو استایل دهی کنیم. پس در این جلسه همراه من باشید تا با استایل دهی فرم در CSS آشنا بشیم.

استایل دهی فیلد Input

همونطور که میدونید تگ input یکی از پرکاربردترین تگ ها در ایجاد فرم بود. این تگ انواع مختلفی داشت که ما با استفاده از صفت (attribute) type نوعش رو تعریف میکردیم. با استفاده از امکانی که در درس انتخابگر صفات یادگرفتیم ما خیلی راحت میتونیم به هر نوع input استایل اختصاصی خودمون رو بدیم.

نمونه های زیر رو ببینید:

• input[type=text] – فقط برای تگ های input که type اونها برابر با text هست، استایل دهی میکنیم.
• input[type=password] – فقط برای تگ های input که type اونها برابر با password هست، استایل دهی میکنیم.
• input[type=number] – فقط برای تگ های input که type اونها برابر با number هست، استایل دهی میکنیم.
• و…

کد زیر رو ببینید:

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

در کد بالا من برای inputهایی که type اونها برابر text هست، استایل تعریف کردم.

ما میتونیم با ترکیب نکاتی که تا کنون یاد گرفته ایم حالتهای مختلف و منحصربفردی رو ایجاد کنیم. مثلا اگر قصد داشته باشیم برای زمانی که کاربر یک input که type اون برابر است با text هست رو روش کلیک کرد، استایل خاصی رو تعریف کنیم میتونیم بگیم:

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

در مثال بالا من برای لحظه ای که کاربر روی یک input که type اون برابر با text هست، کلیک میکنه و اصطلاحات روی اون فوکس میکنه، استایل تعریف کردم. من با ترکیب سودو focus و انتخابگر صفت (attribute selector) تونستم این کار رو انجام بدم.

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

در این قطعه کد من برای text input ها این استایل رو تعریف کردم و یک تصویر رو در بک گراند اونها قراردادم. حالا اگه فرض کنیم که چندین input text در فرم ما باشه و ما فقط بخوایم برای اون input که مقدار name اون برابر search هست این استایل دهی رو انجام بدیم میتونیم به شکل زیر بنویسیم:

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

به این ترتیب این استایل به تگ های input که type آنها برابر text هست و name اونها برابر search هست تعلق میگیره.

استایل دهی textarea

ما میتونیم با استفاده از نام تگ های دیگه که در فرم ازشون استفاده میکردیم برای اون استایل اختصاصی تعریف کنیم. تگ هایی مثل select ، textarea و ….

مثلا تگ textarea دارای قابلیتی resize بود و ما میتونستیم با گرفتن و کشیدن گوشه پایین سمت راست اون، textarea خودمون رو تغییر اندازه بدیم. ما میتونیم با استفاده از کد زیر این قابلیت رو حذف کنیم.

textarea{
  resize: none;
}

قطعه کد پایین رو ببینید:

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

استایل بالا برای تگ textarea که مقدار name اون برابر با description هست تعریف شده.

استایل دهی select

ما همچنین میتونیم با استفاده از نام تگ select برای این بخش هم استایل دهی انجام بدیم. نمونه کد زیر رو ببینید:

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

استایل دهی به دکمه های ورودی داخل فرم

در این بخش از فرم در css به سراغ دکمه های فرم میریم. ما معمولا از ۳ کلید توی فرم های خودمون استفاده میکنیم. میتونیم اونها رو بصورت یکجا یا تک تک استایل دهی کنیم. قطعه کد زیر رو ببینید:

input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

در کد بالا من برای ۳ دکمه متفاوت بصورت همزمان استایل تعریف کردم.

در این جلسه من نکات مهم در مورد فرم در css رو براتون مطرح کردم. در ویدیو این جلسه نکات مهم و زیادی رو درباره فرم در css بررسی کردم که پیشنهاد میکنم این ویدیو رو از دست ندید.

همه ویدیوهای دوره آموزش CSS