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

CSS Forms Styling

0 499

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

همانطور که میدانید می توان ظاهر فرم های HTML را، مانند عناصر دیگر HTML، با استفاده از CSS بسیار زیباتر نشان داد. کد زیر یک فرم عادی HTML بدون استایل دهی است:

مشاهده ی خروجی در JSBin

همانطور که می بینید ظاهر این فرم بسیار زشت است اما اگر به کدهای بالا کمی استایل CSS اضافه کنیم می توانیم چنین کد زیبایی را پدید بیاوریم:

مشاهده ی خروجی در JSBin

در این مقاله میخواهیم برخی از مواردی را که میتواند ظاهر فونت ها را اینچنین زیبا کند به شما نشان دهیم.

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

همانطور که میدانید از خصوصیت width برای تعیین عرض عناصر استفاده می شد. از طرفی یکی از دلایل زشتی فرم های پیش فرض کوچک بودن input هایشان است بنابراین ما می توانیم به این input ها width مناسب بدهیم:

مشاهده ی خروجی در JSBin

در کد بالا این مقدار را 100 درصد تعیین کرده ایم تا تمام عرض صفحه گرفته شود. همچنین به نوع سلکتورمان دقت کنید؛ این سلکتور تمام <input> ها را هدف میگیرد. اگر بخواهیم به جای هدف گرفتن تمام input ها، فقط input های خاصی هدف گرفته شوند می توانستیم از کد هایی مانند کد های زیر استفاده کنیم:

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

یکی دیگر از مشکلات ظاهری فرم های پیش فرض این است که آن ها به متن داخلشان میچسبند و جای تنگی دارند. برای حل این مشکل می توانیم از padding استفاده کنیم:

مشاهده ی خروجی در JSBin

همانطور که میبینید فیلد های مربوطه بزرگ تر و جا دار تر شده اند اما هنوز مشکلی هست! دو فیلدی که پشت سر هم گذاشته ایم به هم چسبیده اند بنابراین می توانیم به آن ها یک margin نیز اضافه کنیم تا از هم کمی فاصله بگیرند:

مشاهده ی خروجی در JSBin

سوال: دلیل اضافه کردن خاصیت box-sizing به کد بالا چیست؟

پاسخ: در قسمت های قبلی همین دوره توضیح داده ایم که اگر خاصیت box-sizing روی مقدار border-box تنظیم نشده باشد باعث بروز مشکلی می شود؛ با زیاد شدن padding عرض عنصر نیز زیاد می شود! در CSS خصوصیتی به نام box-sizing وجود دارد و باعث می شود عناصر عرض خود را ثابت نگه دارند. اگر از box-sizing با مقدار border-box استفاده کنید و سپس مقدار padding را افزایش دهید به جای زیاد شدن عرض، فضای content کمتر می شود.

از مشکلات دیگر فرم های پیش فرض، زیبا نبودن مرز دور هر فیلد است. برای رنگی کردن و مشخص تر کردن این مرز ها می توان از خاصیت border استفاده کرد. همچنین برای آنکه فیلد هایمان زیبا تر شوند و زاویه ی دور آنها گِرد باشد می توانیم از خاصیت border-radius نیز استفاده کنیم:

مشاهده ی خروجی در JSBin

حتما دیده اید که برخی از فرم ها تنها مرز پایین دارند. برای طراحی چنین فیلدی می توانید از خصوصیت border-bottom استفاده کنید:

مشاهده ی خروجی در JSBin

البته باید ذکر کنیم که شما می توانید با استفاده از background-color به فیلد ها رنگ نیز بدهید. همچنین با استفاده از خاصیت color میتوانیم رنگ متن درون آن فیلد را مشخص کنیم. به طور مثال به کد زیر دقت کنید:

مشاهده ی خروجی در JSBin

حالت focus

خیلی از طراحان front end به درستی نمی دانند که حالت focus (در لغت به معنی «تمرکز» و «مرکز توجه») در عناصر به چه صورت است. به زبان ساده می توان گفت که هر عنصری با کلیک کردن یا شروع تعامل با آن به حالت focus در می آید؛ یعنی توجه شما و مرورگر روی آن عنصر است. ما می توانیم از این خاصیت برای زیباسازی فرم هایمان استفاده کنیم.

یکی از رفتار های پیش فرض مرورگر ها در مواجهه با فرم های HTML این است که دور فیلد هایمان یک خط آبی اضافه می کنند. اگر شما از این خاصیت خوشتان نمی آید می توانید از دستور ;outline: none استفاده کنید. همچنین استفاده از focus: نیز می تواند بسیار به نفع ما باشد.

مثال اول: در این مثال به مرورگر گفته ایم که هنگام focus شدن یک عنصر باید به فیلد ما رنگ پس زمینه ی آبی اضافه کند:

مشاهده ی خروجی در JSBin

مثال دوم: در این فیلد کار جالب تری انجام داده ایم. به مرورگر گفته ایم زمانی که فیلد به حالت focus در می آید رنگ border آن را پر رنگ تر کن تا کاربر متوجه فعال بودن فیلد بشود:

مشاهده ی خروجی در JSBin

حتی می توانیم این فیلد را از این هم بهتر کنیم! می توانیم با اضافه کردن خاصیت transition به آن حالت انیمیشن بدهیم:

مشاهده ی خروجی در JSBin

همانطور که می بینید هنگامی که روی فیلد مورد نظر کلیک کنید پر رنگ شدن border به آرامی انجام می شود و حالت انیمیشن گونه ای دارد. در دوره ی CSS پیشرفته با دستوراتی مانند transition آشنا خواهیم شد.

اضافه کردن آیکون و انیمیشن

حتما مشاهده کرده اید که برخی از فیلد ها (مانند فیلد های جست و جو در سایت) دارای آیکون خاصی هستند. برای اضافه کردن آن ها می توانید از خصوصیت background-image استفاده کرده و سپس آن را با background-position موقعیت دهی کنید:

مشاهده ی خروجی در JSBin

در کد بالا باید توجه داشته باشید که padding از سمت چپ را زیاد داده ایم تا نوشته ی جست و جو روی آیکون نوشته نشود! حالا نوبت انیمیشن است. ساده ترین حالت ایجاد انیمیشن در فیلد ها این است که عرض آن ها را کوتاه قرار دهید و سپس در کد ها به مرورگر بگویید اگر فیلد وارد حالت Focus شد عرض اش را زیاد کن و در عین حال به آن خاصیت transition را نیز بدهیم:

مشاهده ی خروجی در JSBin

با کلیک کردن روی فیلد جست و جو تغییر زیبا را مشاهده می کنید!

استایل دهی textarea

فرم های HTML تنها از فیلد های متنی تشکیل نشده اند بلکه برخی اوقات از نوع textarea هستند. البته پیچیدگی خاصی ندارند و می توانیم آن ها را دقیقا مانند فیلد ها استایل دهی کنیم اما یکی از ویژگی های textarea ها این است که قابل resize شدن هستند بنابراین کاربر می تواند اندازه شان را برای خودش تغییر دهد. این قابلیت به شما ضرر نمی زند بلکه ممکن است کاربران آن را دوست داشته باشند اما اگر به هر دلیلی خواستید جلوی این کار را بگیرید باید از خاصیت resize استفاده کنید:

مشاهده ی خروجی در JSBin

استایل دهی Select Menu

منو های SELECT از مواردی هستند که می توانند استایل دهی شوند. به این منو نگاه کنید:

مشاهده ی خروجی در JSBin

استایل دهی دکمه ها

دکمه ها نیز قابل استایل دهی هستند:

مشاهده ی خروجی در JSBin

فرم های واکنش گرا

در دوره ی CSS پیشرفته یاد خواهیم گرفت که با استفاده از media query ها فرم هایمان را واکنش گرا کنیم تا در گوشی های همراه نیز به خوبی نمایش داده شوند:

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle