مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، استفاده از فرم ها ( Form )

آموزش بوت استرپ ، استفاده از فرم ها ( Form )

آموزش بوت استرپ ، استفاده از فرم ها ( Form )

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

انواع فرم ها در Bootstrap

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

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

هر سه نوع فرمی که در بالا نام برده شد از استانداردهایی مشترک استفاده می کنند. این قوانین مشترک عبارتند از:

۱- جهت دسترسی استفاده کنندگان از screen reader بایستی مقدار خصوصیت rol برای تگ <form> برابر form باشد.

۲- برچسب <label> و کلیه عناصر مرتبط به آنها را درون یک <div> دارای کلاس form-group قرار دهید.

۳- کلیه عناصر <input>,<textarea>, <select> بایستی دارای کلاس form-control باشند.

فرم های عمودی در Bootstrap

عناصر فرم عمودی مانند label و دیگر اجزای فرم زیر یکدیگر قرار می گیرند. برای ساخت فرم به صورت عمودی در Bootstrap تمامی label ها و کنترلهای مربوط به هر label را در یک <div> جداگانه و با کلاس form-group قرار می دهیم. سپس به کلیه عناصر متنی input و textarea و همچنین تگ های select کلاس form-control را اضافه می کنیم.

در ساخت شکل بالا به این صورت عمل می کنیم :

فرم خطی یا inline-form در Bootstrap

کلیه عناصر یک فرم به صورت خطی در بوت استرپ در یک خط قرار می گیرند. برای ساخت فرم به صورت خطی کافی ست به تگ <form> درفرم عمودی کلاس inline-form را اضافه کنید. در مثال بالا با اضافه کردن کلاس inline-form به <form> فرم عمودی را به فرم خطی تبدیل می کنیم

فرم افقی یا Horizontal Form در Bootstrap

فرق بین فرم های افقی و فرم های عمودی در Bootstrap در این است که در فرم افقی label ها قبل از عنصر مربوط به خود نمایش داده می شوند. (  نه بالای عنصر ) به این نکته توجه داشته باشید که فرم های افقی در bootstrap فقط برای نمایشگرهای عریض یا اندازه های large و medium قابل استفاده است. در نماشگرهای کوچک small یا اندازه کمتر از ۷۶۷ پیکسل فرم به صورت عمودی نمایش داده می شود. برای ساخت فرم به صورت عمودی کافی ست به تگ <form> کلاس form-horizontal را اضافه کنید و همچنین به هر یک از تگ های <label> کلاس control-label را نیز بایستی اضافه کرد.

کلاس sr-only در bootstrap :

با استفاده از کلاس sr-only ( مخفف screen reader only ) می توانید عناصر را در تمامی دستگاه ها مخفی کرده و فقط برای نرم افزارهای screen reader یا صفحه خوان ها نمایان کنید. صفحه خوان ها به افراد ناتوان کمک می کنند.

 

 

 

 

تاریخ آخرین بروزرسانی : ۱۸ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.