نمادها

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

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

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

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

سلام برنامه در این جلسه ادامه مبحث رسپانسیو کردن فرم ها را دنبال می کند

در این جلسه درباره رسپانسیو کردن Input ها بحث می کنیم

هر فرمی تشکیل شده از چند ورودی (input) است

پس رسپانسیو کردن این Input ها موضوعی است که حتما باید بررسی شود

در این ورودی ها مواردی مثل نام و نام خانوادگی ، شماره تلفن ، آدرس ایمیل و … وارد می شود

شما می توانید ورودی ها را به صورت تمام صفحه یا در کادری مشخص قرار دهید

 

input ها

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

  • برای گرفتن نام و نام خانوادگی که از نوع type آنها text است.
  • برای گرفتن ایمیل که type آن از نوع email است.
  • برای گرفتن رمز عبور که type آن از نوع password است.
  • برای ارسال اطلاعات که type آن از نوع submit است.
  • و …

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

  1. input : درباره آن حبت کردیم و نحوه استفاده از آن را نیز در ادامه آموزش میگوییم
  2. textarea : این بخش برای نوشتن توضیحات ، آدرس ، پیام  و موارد این چنین استفاده می شود
  3. checkbox : مواردی که شما تیک میزنید مثل برگه هایی که از شما میپرسد اگر خدمت سربازی رفته اید مورد را تیک بزنید
  4. radio : سوالات چهار گزینه ای که در امتحانات دیده اید همین مورد است که با انتخاب تنها یک مورد گزینه صحیح را انتخاب میکنید
  5. select : اگر تا به حال خرید اینترنتی کرده باشید بخشی برای انتخاب استان و شهرستان وجود دارد که از آن لیست شهر خود را انتخاب میکنید.

در آموزش Bootstrap جلسه بیست و چهارم (Forms) مفصل درباره input ها صحبت کردیم و از آن مثال های عملی زدیم پس از این مورد میگذریم و به باقی گزینه ها میپردازیم و از آن مثال میزنیم.

textarea

از این مورد برای نوشتن متن های طولانی استفاده میشود که یک تگ دارد با نام textarea که مانند تگ body باز و بسته دارد برای اینکه این مووع را بهتر متوجه شوید برای شما مثالی از textarea میزنیم:

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

 

checkbox

همانطور که گفتیم با checkbox میتوانید موردی را ایجاد کنید که کاربر تواند با زدن تیک مورد مد نظر خود را انتخاب کند. برای اینکه با کار و نحوه استفاده از checkbox آشنا شوید برای شما مثالی آماده کرده ایم:

همانطور که در کد بالا میبینید با type که از نوع checkbox انتخاب کردیم توانستیم گزینه تیک زدن را به فرم اضافه کنیم همچنین با اضافه کردن مقدار disabled میتوانید امکان انتخاب چک باکس را غیر فعال کنید.

چک باکسی که بالا مثال زدیم از نوع پیشفرض بود شما میتوانید با اضافه کردن کلاس checkbox-inline چک باکس خود را در یک خط بسازید برای واضح شدن موضوع کد زیر را دنبال کنید:

 

radio

این موضوع همان چهار گزینه ای است که بالا را معرفی کردیم از این مورد برای پرسش های بلی و خیر نیز استفاده میشود که در radio شما تنها میتوانید یکی از موارد را انتخاب کنید و انتخاب ۲ مورد امکان پذیر نیست برای اینکه این مورد را بهتر متوجه شوید میتوانید از کد زیر استفاده کنید:

در کد بالا با استفاده از type مد نظر که radio است توانستیم مورد من نظر را ایجاد کنیم مانند checkbox با استفاده از disabled میتوانید گزینه ای را غیر فعال کنید.

مانند checkbox المان های خود را در یک خط بنویسید مجددا میتوانید مشابه checkbox از کلاس radio-inline استفاده کنید.

 

select

و در نهایت میپردازیم به آخرین مورد یعنی select.
برای اینکه موضوع را بهتر متوجه شوید همین ابتدای کار برای شما مثالی میزنیم:

select هم مانند textarea تگ باز و بسته دارد

گزینه های select بین باز و بسته آن با تگ option قرار میگیرند.

اگر شما مد نظر شما است که چند گزینه هم زمان انتخاب شود  از multiple در تگ خود استفاده کنید
می توانید دیگر قسمت ها را در لینک زیر ببینید

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

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

 

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

 

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

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

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

دانلود آموزش Bootstrap جلسه بیست و پنجم (Inputs): نوع فایل:mp4 حجم فایل:30.31 مگابایت

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

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

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

*

code

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