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

فرم ها در CSS

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

قبل از شروع هر چیزی، بیاین به تفاوت یک فرم معمولی با CSS ابتدایی و فرمی که توسط 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 در عناصر فرم

این تصویر از مثال بالاست، مثالی که توی اون هیچ خاصیتی از 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 در فرم

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

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

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

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

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

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

تغییر دادن outline در عناصر فرم

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

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

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

عنصر ورودی 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

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

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

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

عنصر ورودی textarea

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

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

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

textarea{
   resize: none;
}

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

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

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

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

با کمک کد HTML زیر، یک فرم مناسب و جذاب طراحی کنین.

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

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

کد های خودتون رو در یک فایل zip با نام “پاسخ کوییز مقاله ۶۶” در قسمت نظرات پایگاه دانش میزفا آپلود کنین.

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

[/box]

نتیجه گیری

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

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

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

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

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

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

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

    1. ممنون متین منوی خوبیه 🙂
      ببین استفاده کردن از margin اشتباه نیست، ولی بیشتر ترجیح داده میشه که از روش های منعطف تر مثل flexbox استفاده بشه. وسط چین بودن تو flexbox بستگی به حجم داشتن عنصر والد در راستای عمودی و افقیه. دلیلی هم که باعث میشه فرم از لحاظ عمودی وسط چین نشه، اینه که عنصر والد form، یعنی body و Html ارتفاعشون auto باشه و تمام صفحه رو در بر نگیره. برای همین فرم در راستای عمودی صفحه نمیتونه وسط چین شه چون جایی نداره که بره!
      برای حل این مشکل، پیشنهاد میکنم کد زیر رو استفاده کنی:

      html , body{
         height: 100vh;
      }
  1. سلام نمیدونم ارسال شده یا نه فرمم به خاطر همین دوباره میفرستم من یه سوال داشتم من برا وسط چین کردن فرمم یعنی بیارمش وسط از مارجین استفاده کردم که به احتمال زیاد فکر کنم اشتباه هست کارم میخواستم ببینم چطور فرمم رو بیارم وسط صفحه چون وقتی justify content رو سنتر مذاشتم و align items کار نمیکردن و وقتی دیسپلی فلکس میدادم از حالت عمودی به افقی تبدیل میشدن میشه یه راهنمایی کنید که چطور یه چیزی مثل فرم رو وسط چین کنم چون تو این بحث خیلی مشکل دارم

  2. سلام این فرم من فقط من برای وسط چین کردن فرم یعنی بیارمش وسط صفحه از مارجین استفاده کردم که فک کنم کار کاملا اشتباهی هست و میخواستم ببینم چطور من فرمم رو درست بیارم وسط صفحه چون وقتی justify content رو میذاشتم سنتر با
    align items هیچ تغییری رخ نمیداد ولی وقتی دیسپلی فلکس اضافه میکردم وسط چین میشد ولی inline میشد اگه میشه راهنمایی کنید که چطور یه چیزی رو مثل این وسط چین کنم چون خیلی در این رابطه مشکل دارم

    1. سلام متین. نه تو این نظر و نه تو نظر دومی که فرستادی، کدات آپلود نشده. میخوای به ایمیل من کدارو ارسال کن تا هم پاسخ رو بررسی کنیم و هم مشکلات رو برطرف کنیم.

      navidproject283@gmail.com
  3. سلام . در فایل ارسالی اقای ابوالفضل ایراداتی هست
    مثلا تگ head رو نوشته سریع بسته و تگ
    style داخلش نیست. اینو موقع اجرا چرا اخطار نمیده؟
    تگ بسته body هم دوبار تکرار کرده .

    1. سلام محمود. داخل بدنه head از تگ تایتل استفاده کرده اوکیه 🙂
      تگ style هم نوشته شده اگه دقت کنی. اما اره تگ بسته body رو دو بار تکرار کرده.
      ببین HTML رو ما میتونیم بدون تگ هم بنویسیم، و هیچ اروری نگیریم، دلیلش هم اینه که html یک زبان نشانه گذاریه نه برنامه نویسی. اما بهتره که از اصول و قواعد تبعیت کنیم (مثل نوشتن تگ body یکبار و …) چون در غیر این صورت تو پروژه های بزرگ که حجم کد بیشتری دارن صد درصد به مشکل میخوریم. برای مطالعه بیشتر در این مورد به مقاله کنوانسیون های کد نویسی ارجاعت میدم

    1. سلام
      افرین ابوالفضل و خوب بود.
      اکانتت شارژ شد

دیدگاهتان را بنویسید

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=