جلسه ۶۶ – استایل دهی به فرم ها در CSS

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

فرم طراحی شده با CSS ابتدایی:

و حالا یه نگاه به فرمی بندازیم که استفاده مناسب تری از CSS کرده:

همونطور که می‌بینیم، فرم دوم شانس بیشتری برای جذب کاربرای سایت داره! اما چطور می‌تونیم فرم مناسبی طراحی کنیم؟

قدم های طراحی فرم

برای طراحی یک فرم، مسلما توجه به یک یا دو خاصیت کافی نیست و ما با ترکیبی از خاصیت های مختلف سر و کار داریم.

اگر تا امروز مقاله ای در رابطه با فرم ها مطالعه نداشتید، مقاله آشنایی با فرم ها و آشنایی با input ها در HTML را مطالعه نمایید.

این قدم ها رو برای دو عنصر اصلی فرم، یعنی ورودی متنی (text input , password input) و دکمه (submit input) بررسی می‌کنیم. بقیه عناصر به مراتب قدم های راحت تری رو در بر دارن.

قدم ها و مراحل طراحی ما عبارتند از:

• عرض عناصر فرم (width)
• فاصله محتوا از مرز های ورودی (padding)
• مرز های ورودی (border)
• تصاویر و رنگ های پس زمینه (background-color , background-image)
• حالت انتخاب در فرم ها

عرض عناصر فرم (width)

عرض نقش مهمی رو تو عناصر ما بازی می‌کنه. تمامی عناصر موجود در فرم، دارای نحوه نمایش inline هستن. به این ترتیب که اگه تعدادی عنصر فرم رو وارد صفحمون کنیم، تماما پشت سر هم قرار می‌گیرن.

<form>
   <input type="text" placeholder="یه چیزی بنویس...">
   <input type="submit" value="لایک!">
   <input type="radio">
   <input type="checkbox">
   <input type="button">
</form>

*{
   direction: rtl;
   font-family: iransansweb;
}

بنابراین برای تغییر دادن عرضشون از خاصیت width استفاده می‌کنیم.

به کد های HTML و CSS زیر توجه کنین:

<form>
   <input type="text" placeholder="Write something">
   <input type="submit">
</form>

*{
   direction: rtl;
   font-family: iransansweb;
}
form{
   width:30%;
}
form input{
   width:100%;
   box-sizing: border-box;
}

نتیجه به شکل زیر خواهد بود:

فاصله محتوا از مرز های ورودی و عناصر دیگر (padding , margin)

مسلما ما نمی‌تونیم تو عنصر ورودی ای که فضای مناسبی نداره، متنی بنویسیم، نه تنها باعث سخت دیده شدن متن ورودی ما می‌شه، بلکه چندان جلوه مناسبی به فرم ما نمی‌ده.

همینطور نیاز داریم که فاصله مناسبی بین عناصر مختلف فرم برقرار کنیم، این مسئله اجزای فرم ما رو قابل تشخیص تر می‌کنه.

مثلا شکل زیر رو در این آموزش طراحی وب سایت ببینین:

برای بهتر شدن شکل فوق، می‌تونیم به سادگی از خاصیت های margin و padding استفاده کنیم. کد HTML و CSS زیر رو ببینین:

<form>
   <input type="text" placeholder="Write something">
   <input type="submit">
</form>

*{
   direction: rtl;
   font-family: iransansweb;
}
form{
   width:30%;
}
form input{
   width:100%;
   padding: 10px;
   margin-top:20px;
   box-sizing: border-box;
}

نتیجه رو به فرم زیر مشاهده می‌کنیم:

تصاویر و رنگ های پس زمینه (background-color , background-image)

ما می‌تونیم رنگ ها و تصاویر مختلفی رو برای عناصرمون قائل باشیم، از جمله:

• رنگ های پس زمینه از جمله مقادیر HEX، مقادیر rgba و hsl، گرادینت های مختلف و رنگ های ساده
• تصاویر پس زمینه

تو مثال زیر برای ورودی نوع submit، عنصر فرم، و عنصر body سه رنگ پس زمینه مناسب در نظر می‌گیریم تا جذابیت فرم رو افزایش بدیم.

به کد HTML و CSS زیر توجه کنین:

<form>
   <input type="text" placeholder="Write something">
   <input type="submit">
</form>

*{
   direction: rtl;
   font-family: iransansweb;
   background-color: #f2f2f2;
}
form{
   width:30%;
}
form input{
   width:100%;
   padding: 10px;
   margin-top:20px;
   box-sizing: border-box;
   background-color: white;
}
form input[type="submit"]{
   background-color: #4caf50;
   color:white;
}

نتیجه رو به شکل زیر مشاهده می‌کنیم:

مرز های ورودی (border)

عناصر فرم، به صورت پیش فرض، دارای مرز و border هستن.

برای حذف کردن اون مرز ها می‌تونیم از دستور border:none استفاده کنیم.

به فرم زیر توجه کنین:

این تصویر از مثال بالاست، مثالی که توی اون هیچ خاصیتی از border رو استفاده نکردیم. پس به همین دلیل، می‌تونیم شاهد مرز های هر دو ورودی submit و text باشیم که فرممون رو چندان خوب جلوه نمیده!

حالا توسط کد زیر، سعی می‌کنیم که تغییراتی رو تو border هر دو ورودی به وجود بیاریم.

به کد HTML و CSS زیر توجه کنین:

<form>
   <input type="text" placeholder="Write something">
   <input type="submit">
</form>

*{
   direction: rtl;
   font-family: iransansweb;
   background-color: #f2f2f2;
}

form{
   width:30%;
}

form input{
   width:100%;
   padding: 10px;
   margin-top:20px;
   box-sizing: border-box;
   background-color: white;
   border-radius: 5px;
}

form input[type="submit"]{
   background-color: #4caf50;
   color:white;
   border:none;
}

form input[type="text"]{
   border:none;
   border-right: 2px solid #4caf50;
}

و شاهد نتیجه زیر خواهیم بود:

حالت انتخاب در فرم ها

در حالت طبیعی، اگه روی یکی از عناصر فرم کلیک کنیم، ممکنه با نتیجه زیر روبرو بشیم:

همونطور که می‌بینیم، دور عنصر ورودی ما، یه خط آبی رنگ و متوالی به وجود میاد. حالا اگه این خط رو نخوایم، یا حتی اگه بخوایم تغییرش بدیم، باید چیکار کنیم؟

نکته اینجاست که این خط، یک border نیست، بلکه یک outline هست!

برای تغییر دادن این outline، کافیه از شبه کلاس focus کمک بگیریم و بنویسیم:

/* --- برای از بین بردن حالت فوق مینویسیم--- */
form input[type="text"]:focus{
   outline: none;
}
/* --- برای تغییر دادن حالت فوق مینویسیم --- */
form input[type="text"]:focus{
   outline: none;
   border: 2px solid #4caf50;
}

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

طراحی عناصر ورودی دیگر

تو این بخش، طراحی و استایل دهی به عناصر دیگه ی فرم رو بررسی می‌کنیم. استایل دهی تو این عناصر به راحتی عناصر ورودی متنی و دکمه ای نیست، به همین دلیل، اگه نکاتشون رو ندونین ممکنه یکم عصبانیتون کنه!

عنصر ورودی select

همونطور که می‌دونیم، ساختار HTML عنصر select به شکل زیر تعریف می‌شه:

<select>
   <option value="0"></option>
   <option value="1"></option>
   <option value="2"></option>
   <option value="3"></option>
   <option value="4"></option>
   <option value="5"></option>
</select>

نکته ای که در مورد این عنصر باید بهش توجه کنیم، اینه که به عناصر option نمی‌شه استایل اختصاص داد.

پس هر کاری که می‌خوایم انجام بدیم، باید رو عنصر select انجام بدیم و بس.

به کد HTML و CSS زیر توجه کنین:

<select>
   <option value="0">محصول ۱</option>
   <option value="1">محصول ۲</option>
   <option value="2">محصول ۳</option>
   <option value="3">محصول ۴</option>
   <option value="4">محصول ۵</option>
   <option value="5">محصول ۶</option>
</select>

*{
   box-sizing: border-box;
   font-family: iransansweb;
   direction: rtl;
}
select{
   width:20%;
   background-color:#4caf50;
   color:white;
}
select{
   padding:5px;
   border:none;
}

اما بعضی اوقات، ممکنه با عناصر selectای روبرو بشیم که option های موجود در اون ها، دارای استایل هستن.

چطور می‌شه این کار رو انجام داد؟

فقط بدونین که کافیه از جاوا اسکریپت کمک بگیریم 🙂 به این مثال مفید از سایت w3school.com توجه کنین.

عنصر ورودی textarea

این عنصر دقیقا مثل عنصر ورودی type=text عمل می‌کنه و می‌تونه تمامی خاصیت های CSS مورد قبول اون عنصر ورودی رو قبول کنه.

عموما این عناصر قابلیت اینو دارن که توسط نشانگر اندازشون رو تغییر بدیم.

برای جلوگیری از این موضوع، می‌تونین از کد زیر استفاده کنین:

textarea{
   resize: none;
}

عناصر ورودی checkbox و radio

این عناصر، دقیقا مثل عنصر ورودی select، محدودیت زیادی دارن.

ما توی استایل دهی به عناصر ورودی radio و checkbox، نمی‌تونیم به راحتی شکل دایره‌ای ورودی های radio و شکل مربعی ورودی های checkbox رو تغییر بدیم و نیازمند استفاده از خاصیت های دیگه هستیم.

به دو مثال زیر توجه کنین:

• مثال ورودی های radio
• مثال ورودی های checkbox

همونطور که می‌بینیم، تو مثال های بالا مجبوریم برای تغییر دادن ورودی های انتخاب شده، عنصر های دیگه ای رو وارد میدان کنیم و توسط دستوراتی مثل position:absolute، اون ها رو جای علامت های اصلی، داخل ورودی جا بدیم.

پایان ترم

<form>
   <input type="text" placeholder="لطفا نام خود را وارد نمایید...">
   <input type="email" placeholder="ایمیل...">
   <input type="password" placeholder="رمز عبور...">
   <input type="submit" value="ثبت نام">
</form>

نتیجه گیری

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

یک سری از کار هایی که بر form ها انجام دادیم می‌تونن به صورت کامل شخصی سازی بشن، مثل نحوه تعیین outline و عرض عناصر درون فرم.

اما یک سری از کار ها هم بودن که برای داشتن یک فرم مناسب ضروری بودن، مثل تعیین padding و margin برای هرکدوم از عناصر حاضر در فرم.

تو مقاله بعد، چند مثال مناسب از فرم های جذاب تر رو بررسی می‌کنیم 🙂

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

مدیر محتوا: علی اسماعیلی‌