آموزش فرم ها در Bootstrap

1396/3/20 علیرضا حاتمی نیا 576

forms in Bootstrap

مقدمه:

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


فرم ها در Bootstrap 

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

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

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

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

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

<form rol="form">
.
.
.
</form>

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

<form rol="form">
<div class="form-group">
<label> name : </label>
.
.
.
</div>
</form>

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

<form rol="form">
<div class="form-group">
<label for="name"> name : </label>
<input class="form-control" id="name" type="text">
</div>
</form>

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

عناصر فرم عمودی مانند label و دیگر اجزای فرم زیر یکدیگر قرار می گیرند. شکل کلی فرمهای عمودی در Bootstap مانند تصویر زیر است :

bootstrap vertical form


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

<h2> Bootstrap Vertical form</h2>
  <form action="/signup.php" rol="form">
    <div class="form-group">
      <label for="email" for="email">Email:</label>
      <input type="email" id="email" class="form-control" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pass">Password:</label>
      <input type="password" class="form-control" id="pass" placeholder="Enter password" name="password">
    </div>
    <div class="checkbox">
      <label>
<input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
  </form>

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

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

Bootstrap inline form


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

<h2> Bootstrap inline form</h2>
  <form action="/signup.php" class="form-inline" rol="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pass">Password:</label>
      <input type="password" class="form-control" id="pass" placeholder="Enter password" name="password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
  </form>

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

فرق بین فرم های افقی و فرم های عمودی در Bootstrap در این است که در فرم افقی label ها قبل از عنصر مربوط به خود نمایش داده می شوند. ( نه بالای عنصر) شکل زیر یک فرم افقی در Bootstap را نمایش می دهد. 
 

Bootstrap horizontal form


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

<h2>Bootstrap Horizontal form</h2>
  <form class="form-horizontal" action="/signup.php" rol="form">
    <div class="form-group">
      <label class="control-label col-sm-3" for="email">Email:</label>
      <div class="col-sm-9">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-3" for="pass">Password:</label>
      <div class="col-sm-9">          
        <input type="password" class="form-control" id="pass" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>

کلاس sr-only در bootstrap : 

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

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="email">Email:</label>
<input type="email" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">Password</label>
<input type="password" id="pass" class="form-control" placeholder="Enter Password">
</div>
</form>

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت