• Telegram
  • Google Plus
  • Linked In

ایجاد فرم در Bootstrap

ایجاد فرم در Bootstrap

تاریخ درج: خلاصه

طراحی سایت با بوت استرپ، طراحی وب سایت، bootstrap، آموزش بوت استرپ، نحوه ایجاد فرم در بوت استرپ

ایجاد فرم در Bootstrap

در این بخش نحوه ایجاد فرم های زیبا با استفاده از بوت استرپ را خواهید آموخت.
فرم های HTML اجزاء مکمل (لازم) صفحه های وب و برنامه ها هستند ولی سبک دادن به این فرم ها به صورت دستی و تک به تک با استفاده از CSS معمولاً خسته کننده و کسل کننده است. بوت استرپ از طریق مجموعه ای از کلاس های از پیش تعریف شده، فرآیند سبک دادن و تنظیم مشخصه های فرم ها مانند برچسب ها، فیلدهای ورودی، جعبه های انتخاب، فیلدهای متنی، دکمه ها و غیره را ساده و راحت میکند.
بوت استرپ سه نوع مختلف از ساختار فرم را ارائه میدهد :

  • فرم عمودی (حالت پیش فرض ساختار فرم)
  • فرم افقی
  • فرم خطی (inline)

ایجاد فرم عمودی :

این حالت، پیش فرض ساختار فرم در بوت استرپ است که سبک ها بدون نیاز به اضافه کردن هیچگونه کلاس پایه به تگ فرم یا ایجاد تغییر بزرگی در کد، به فرم ها اعمال میشوند.
مشخصه های (کنترل کننده ها) فرم در این ساختار دارای برچسب های چپ نویس در قسمت بالای خود هستند.















خروجی مثال بالا به شکل زیر خواهد بود :











نکته : در Bootstrap3 تمام عناصر متنی مانند input، textarea و select به همراه کلاس form-control. به صورت پیش فرض دارای پهنای 100% میباشند.

ایجاد فرم افقی :

در فرم افقی برچسب ها راست نویس هستند و به سمت چپ float شده اند تا در کنار هم در یک خط قرار بگیرند. فرم افقی نیازمند تغییرهای متنوع در کد نسبت به حالت پیش فرض ساختار فرم است. مراحل رسیدن به این ساختار به شرح ذیل میباشد :
  1. اضافه کردن کلاس form-horizontal. به تگ فرم
  2. قرار دادن برچسب ها و مشخصه های فرم در یک div و اعمال کردن کلاس form-group. بر روی آن ها
  3. استفاده از کلاس های grid از پیش تعریف شده بوت استرپ جهت تنظیم(align) برچسب ها و مشخصه های فرم
  4. اضافه کردن کلاس control-label. به تگ label
























خروجی مثال بالا به شکل زیر خواهد بود :








ایجاد فرم های خطی (inline) :

گاهی اوقات نیاز است که مشخصه های فرم را کنار یکدیگر در یک خط قرار دهید تا ساختار فشرده شود. این کار را به راحتی میتوانید با اضافه کردن کلاس form-inline. به تگ فرم انجام دهید.














خروجی مثال بالا به شکل زیر خواهد بود :




نکته : پیشنهاد میشود که برای هر ورودی فرم یک برچسب در نظر گرفته شود در غیر این صورت مفسر صفحه نمایش با فرم ایجاد شده مشکل خواهد داشت. هر چند که در حالت خطی میتوانید برچسب ها را با استفاده از کلاس sr-only. مخفی نمایید.

مشخصه های ثابت در فرم ها :

گاهی اوقات ممکن است لازم باشد که به جای مشخصه فرم، یک متن ثابت در کنار برچسب فرم قرار دهید. میتوانید این کار را در داخل یک فرم افقی با استفاده از کلاس form-control-static. بر روی تگ پاراگراف ( p ) ، انجام دهید.

























خروجی مثال بالا به شکل زیر خواهد بود :








تغییر ارتفاع فیلدهای ورودی و جعبه های انتخاب :

به راحتی میتوانید ارتفاع فیلدهای ورودی و جعبه های انتخاب را کنترل کنید تا با اندازه دکمه ها هماهنگ شوند. کلاس هاس تغییر ارتفاع در بوت استرپ مانند input-lg. و input-sm. برای ایجاد اندازه های بزرگتر یا کوچکتر میتوانند بر روی هر دو تگ input و select اعمال شوند.





























خروجی مثال بالا به شکل زیر خواهد بود :






تغییر اندازه ستون فیلدهای ورودی، فیلدهای متنی و جعبه های انتخاب :

همچنین میتوانید اندازه مشخصه های فرم را با اندازه ستون های grid هماهنگ کنید. تنها لازم است که مشخصه های فرم (input، textarea و select) را داخل ستون های grid یا هر عنصر دلخواه دیگری قرار داده و کلاس های grid را به آن ها اعمال کنید.






























خروجی مثال بالا به شکل زیر خواهد بود :








تغییر ارتفاع گروه های فرم :

میتوانید با اضافه کردن کلاس های تغییر ارتفاع فرم مانند form-group-lg. یا form-group-sm. به کلاس form-group. ، برچسب ها و مشخصه های فرم را در داخل فرم های افقی همزمان بزرگتر یا کوچکتر کنید.












خروجی مثال بالا به شکل زیر خواهد بود :






ایجاد فیلدهای ورودی غیرفعال یا فقط قابل خواندن (readonly) :

جهت ایجاد فیلدهای ورودی غیر فعال کافیست attribute (ویژگی) disabled را به تگ input اضافه کنید و بوت استرپ بقیه کارها را انجام خواهد داد.





همچنین میتوانید با اضافه کردن ویژگی readonly به تگ input حالت readonly به فیلد داده و از وارد کردن هرگونه کاراکتر توسط کاربر به آن فیلد جلوگیری نمایید.




ایجاد مجموعه ای از فیلدهای غیرفعال :

به جای غیرفعال کردن تک به تک مشخصه های فرم، میتوانید آن ها را به صورت گروهی در داخل یک fieldset قرار داده و با اضافه کردن ویژگی disabled به تگ fieldset آن ها را غیرفعال کنید.


























قرار دادن متن راهنما در اطراف مشخصه های فرم :

قرار دادن متن راهنما در مشخصه های فرم عملی بسیار تأثیرگذار جهت راهنمایی کاربر برای وارد کردن اطلاعات صحیح در فرم میباشد. میتوانید با استفاده از کلاس help-block. یک متن راهنما از نوع block level به مشخصه فرم خود اضافه نمایید. متن راهنما معمولاً در پایین فیلد نمایش داده میشود.







خروجی مثال بالا به شکل زیر خواهد بود :




متن های تأیید اعتبار (اعتبار سنجی) فرم در Bootstrap :

بوت استرپ مکانیزم ساده و قدرتمندی جهت سبک دادن به فیلدهای ورودی جهت نمایش متن های اعتبار سنجی در حالت های مختلف ارائه میدهد. بوت استرپ شامل سبک های اعتبارسنجی برای پیام های خطا، هشدار و موفقیت میباشد. جهت استفاده، کلاس مناسب را به کلاس form-group. مربوطه اضافه کنید.



























خروجی مثال بالا به شکل زیر خواهد بود :













همچنین میتوانید با استفاده از کلاس has-feedback. بر روی form-group. ، آیکون های بازخوردی (feedback) دلخواه را هم اضافه کنید.





























خروجی مثال بالا به شکل زیر خواهد بود :









مشخصه های فرم پشتیبانی شده در Bootstrap :

بوت استرپ کلیه مشخصه های فرم استاندارد و همچنین انواع ورودی های جدید در HTML5 مانند datetime، number، emial، url، search، tel و ... را پشتیبانی میکند. مثال زیر نحوه استفاده از مشخصه های فرم استاندارد در بوت استرپ را نشان میدهد.
































































































خروجی مثال بالا به شکل زیر خواهد بود :

























در مطلب بعدی نحوه ایجاد فیلدهای ورودی متنی واکنش گرا (interactive) برای فرم ها با استفاده از گروه های ورودی در بوت استرپ را خواهید آموخت.


مطالب مرتبط


نظرات

0
0

عالی بود خسته نباشید

0
0

سلام خسته نباشید من میخوام متنو ریسپانسیو کنم اما فقط حرکت میکنه و جابه جا میشه چه طوری ثابتش کنم؟؟؟؟

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In