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

12 جولای 2021

شکل یک فرم HTML را می توان با CSS بسیار بهبود بخشید:


یک ظاهر سازی زمینه های ورودی

از widthویژگی برای تعیین عرض قسمت ورودی استفاده کنید:

مثال

input {
  width: 100%;
}

مثال بالا برای همه عناصر <input> اعمال می شود. اگر فقط می خواهید نوع ورودی خاصی را سبک کنید ، می توانید از انتخابگرهای ویژگی استفاده کنید:

  • input[type=text] – فقط فیلدهای متنی را انتخاب می کند
  • input[type=password] – فقط قسمتهای رمز عبور را انتخاب می کند
  • input[type=number] – فقط فیلدهای عددی را انتخاب می کند
  • و غیره..

ورودی های پر شده

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

نکته: وقتی ورودی های زیادی بعد از یکدیگر دارید ، ممکن است بخواهید مقداری marginاضافه کنید تا فضای بیشتری در خارج از آنها اضافه کنید:

مثال

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

توجه داشته باشید که ما تعیین کرده اند box-sizingاموال را به border-box. این اطمینان حاصل می کند که بالشتک و در نهایت حاشیه ها در کل عرض و ارتفاع عناصر گنجانده شده اند.


ورودی های مرزی

از 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هنگامی که تمرکز می شود ، از انتخابگر برای انجام کاری با قسمت ورودی استفاده کنید:

مثال

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

مثال

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

ورودی با نماد / تصویر

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

مثال

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

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

در این مثال ما از transitionویژگی CSS برای متحرک سازی عرض ورودی جستجو در هنگام تمرکز استفاده می کنیم.

مثال

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

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

یک ظاهر طراحی شده در Textareas

نکته: از 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 */

فرم پاسخگو

اندازه پنجره مرورگر را تغییر دهید تا اثر را ببینید. وقتی عرض صفحه کمتر از 600 پیکسل است ، دو ستون را به جای اینکه کنار یکدیگر قرار بگیرند ، روی هم قرار دهید.

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.