نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و چهارم (Forms)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و چهارم (Forms)

آموزش Bootstrap جلسه بیست و چهارم (Forms) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش درباره رسپانسیو کردن فرم ها صحبت می کند

تقریبا تمامی سایت ها دارای فرم هستند که می تواند فرم تماس یا فرم ورود یا فرم ثبت نام باشد

پس رسپانسیو بودن فرم ها هم موضوع مهمی است که باید به آن پرداخته شود

فرم ها شامل موارد مختلفی مثل input ها ، teaxtarea ، select و … می شوند که هر کدام باید بررسی شوند

تقریبا در تمام موارد بالا ما از کلاس form-control استفاده می کنیم

این کلاس از کلاس های تعریف شده خود بوت استرپ می باشد

 

فرم ها

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

  • خبرنامه ها
  • فرم های ثبت نام
  • فرم های ورود
  • فرم هاس استخدام
  • فرم های پاپ آپ
  • فرم های مشخصات فردی
  • و…

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

 

فرم ها در بوت استرپ

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

فرم ها تشکیل شده از input ها textarea ها select ها و باقی موارد هستند که در اینجا ما کلاس form-control که متعلق به بوت استرپ است را هم به آنها اضافه میکنیم. شما به واسطه بوت استرپ میتوانید ۳ نوع فرم ایجاد کنید:

  1. فرم های عمودی که حالت پیشفرض همه فرم ها است
  2. فرم های افقی
  3. فرم های درون خطی

ما هر ۳ حالت فرم را خدمت شما آموزش خواهیم داد و از هرکدام مثال خواهیم زد.

فرم های عمودی

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

در قطعه کد بالا ما یک فرم ساده شامل باکس email و رمز عبور ساختیم action در این فرم به معنی عملی است که باید انجام شود که ما اینجا گفته ایم موارد پر شده را به فایل action_page.php ارسال کند.
از آنجایی که بخش از فرم ما شامل ۱ قسمت است یکی لیبل عنوان و یکی input ما از کلاس form-group برای جمع بستن این ۲ مورد استفاده کرده ایم.

با استفاده از type در قسمت input ما نوع فیلد خود را مشخص میکنیم به عنوان مثال فیلد password زمان وارد کردن رمز محتویات را نشان نمیدهد که این خصوصیت در بخش type برای آن تعریف شده است ما type های متنوعی برای موارد مختلف داریم که در اینجا با password و email آشنا شدید.

همچنین type دیگری با عنوان  submit نیز میبینید که به دکمه ارسال اطلاعات معروف است. و برای ارسال اطلاعات درون فرم از آن استفاده میشود و با کلیک روی آن عمل action که قبلا توضیح دادیم اجرا میشود.

 

فرم های افقی

مورد بعدی فرم های افقی هستند منظور از فرم های افقی فرم هایی است که عنوان فیلد آن در ابتدای آن نوشته میشود در حالت عمودی عنوان و فیلد در خط هایی مجزا نوشته میشدند. بوت استرپ برای شناسایی فرم های افقی از کلاس form-horizontal در تگ form استفاده میکند و همینطور از کلاس control-label در تگ label برای درک بهتر موضوع کد زیر را دنبال کنید:

در کد بالا از col استفاده شده است برای حفظ ظاهر مناسب در حالت های رسپانسیو اگر نمیدانید col چیست میتوانید آموزش Bootstrap جلسه چهارم (col/row) را مشاهده کنید.

 

فرم های خطی

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

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و سوم (navbar)

آموزش Bootstrap جلسه بیست و پنجم (Inputs)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارات ببینید

و یا توسط آدرس زیر در یوتیوب ببینید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و چهارم (Forms): نوع فایل:mp4 حجم فایل:45.01 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

1 دیدگاه برای “آموزش Bootstrap جلسه بیست و چهارم (Forms)”

  1. saber گفت:

    بسیار عالی بود تقریبا به این کاملی جایی ندیدم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.