جلسه ۶۷ – مثال های بیشتر از فرم ها در CSS

در این مقاله قصد داریم تا با طراحی فرم ها به صورت کلی تر آشنا شویم و مثال های پیشرفته تری را با همدیگه بررسی کنیم.

یاد آوری مبحث فرم ها

تو مقاله طراحی فرم ها در CSS با هم یاد گرفتیم که چطور می‌تونیم با کمک CSS، اندازه های یک عنصر ورودی یا (input) رو تغییر بدیم، یا مثلا چطور می‌تونیم رنگ قسمت ها و عناصر مختلف یک فرم رو عوض کنیم.

همینطور که در آموزش طراحی سایت قبلی یاد گرفتیم که با چه روشی، می‌تونیم یک ورودی رو در حالتی که روش کلیک شده، به شکل دلخواه و مورد نظر خودمون در بیاریم.

تو این مقاله چند مثال دیگه رو با هم بررسی می‌کنیم. ممکنه تعداد خیلی کمی از کد ها تو مثال ها براتون نا آشنا باشه، پس اگه کد مشکوکی دیدین نگران نباشین، در مقالات آینده اون رو با هم یاد می‌گیریم.

مهم درک درست کارکرد کد ها و تاثیر اجزای مختلف اون بر هم دیگست.

مثال ها

مثال ۱: یه فرم ساده ولی شیک!

تو این مثال، یه فرم ساده ولی شیک رو بررسی می‌کنیم.

به کد های اون توجه کنین:

36873

حالا نکاتی که بهتره ذکر بشن:

• در قسمت CSS، توسط کد زیر که از نون شب هم برای صفحاتتون لازم تره، تمام paddingها و marginهای اضافی رو از بین بردیم، با استفاده از دستور box-sizing:border-box بسیاری از عرض های پیش فرض، از جمله عرض عناصر input متنی رو حذف کردیم و فونت roboto رو به تمام صفحه اختصاص دادیم.

*{
   padding:0px;
   margin:0px;
   box-sizing:border-box;
   font-family:roboto;
}

• در قسمت input styles، توسط کد زیر،‌حالت ورودی های انتخاب شده رو تعریف می‌کنیم:

form.signInformation input:focus{
   outline:none;
}

مثال ۲: فرم برجسته

این فرم با کمک چند دستور مختصر CSS، برجسته به نظر میاد.

به کد هایی که برای اون نوشته شده، توجه کنین:

36873

قبل از اینکه نکات رو مطالعه کنین، یکم روش فکر کنین.

حالا می‌پردازیم به نکاتی که ارزش بررسی کردن دارن:

• در قسمت CSS، از کد زیر استفاده کردیم که وظیفه ی اون، حذف ابعاد اضافی و اختصاص دادن یک فونت مشخص به کل صفحه هست:

*{
   font-family:sans-serif;
   padding:0px;
   margin:0px;
   box-sizing:border-box;
}

• یکی از ویژگی های قابل توجهی که تو این مثال به اون بر می‌خوریم، حالت برجسته ی فرم ماست که با استفاده از دستور box-shadow، این موضوع امکان پذیره:

form{
   min-width:350px;
   height:400px;
   background-color:white;
   border-right:25px solid #1a53ff;
   padding: 60px 50px;
   box-shadow: 2px 4px 4px #3b3b3b;
}

اگه جایی از کد ها و مطالب براتون ابهام برانگیزه، حتما در قسمت نظرات بپرسین تا راهنماییتون کنیم.

مثال ۳: فرم دو منظوره

این مثال، برای هنرجو های خیلی پیگیره، یا به قول معروف، اونایی که می‌خوان همیشه ۲۰ باشن. و البته همین ۲۰ بودن هست که باعث موفقیته!

تو بیشتر از ۹۰ درصد سایت هایی که وارد می‌شیم، دو بخش ثبت نام و ورود می‌بینیم. ولی آیا می‌تونیم فقط توسط یک فرم این کار رو انجام بدیم؟

پاسخ این سوال، مثبته!

کافیه یه مقدار چاشنی جاوااسکریپت به کدمون اضافه کنیم:

36873

مثال بالا، نکته ای در مورد HTML و CSS برای گفتن نداره و نکات مربوط به جاوااسکریپت می‌شن که جای اون تو آموزش جاوااسکریپت میزفاست!

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

• تو این مثال، ما چهار کلاس مختلف ساختیم به نام های displayNone، displayFlex، noneActive و active. تمام روند داینامیک بودن و پویا بودن فرم، با اضافه کردن و حذف کردن این کلاس ها به عناصر مختلف صورت می‌گیره.
• برای مثال، با زدن دکمه sign up، کلاس displayFlex به فرم sign up اضافه می‌شه که در اون دستور display:flex قرار داره و همزمان کلاس displayNone به فرم log in اضافه می‌شه که در اون دستور display:none قرار داره!
• نتیجه چی می‌شه؟ یه فرم محو می‌شه و دیگری جای اون رو می‌گیره!
• عوض شدن رنگ دکمه ها هم دقیقا با همین سیستم صورت می‌گیره.

پایان ترم

سوال:

یه فرم مناسب طراحی کنین.

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

نکته: کد هاتون رو در یک فایل به اسم خودتون در قسمت نظرات آپلود کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

به انتهای این فصل از آموزش CSS می‌رسیم. خیلی چیزا از فرم یاد گرفتیم و همزمان چند تا مثال کلی با هم بررسی کردیم.

امیدوارم که براتون مفید بوده باشه 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسماعیلی / متخصص و برنامه نویس‌