বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)

বুটস্ট্র্যাপ এর ডিফল্ট সেটিংস

বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়:

সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর  বিস্তার ১০০%

বুটস্ট্র্যাপ ফরম লেআউট

Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ

• Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে)
• Horizontal form বা আড়াআড়ি ফর্ম
• Inline form

এই সকল ফর্ম layouts এর জন্য কিছু আদর্শ বিধিমালা আছে

• সবসময় <form role="form"> ব্যবহার করতে হবে (স্ক্রিন রিডার ব্যবহার করে মানুষের জন্য প্রবেশযোগ্যতা উন্নত করতে সাহায্য করে)
• ফর্ম গুছাতে এবং নিয়ন্ত্রন করতে <div class="form-group"> ব্যবহার করতে হয় (সর্বোত্তম ফাঁকা স্থান দেয়ার জন্য প্রয়োজন)
• সকল টেক্সট বেজ এলিমেন্ট <input>, <textarea>, এবং <select> এর জন্য .form-control ক্লাস কোয করা হয়।

বুটস্ট্র্যাপ উল্লম্ব ফরম Vertical Form (default)

দুইটা input fields, একটি চেকবক্স এবং একটি submit button এর সাহায্যে নিচের উদাহরন এর মতো একটি উলম্ব ফর্ম গঠন করা যায়:

উদাহরনঃ

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

বুটস্ট্র্যাপ ইনলাইন ফরম

একটি inline form এ সকল উপাদানগুলো একটা সরল রেখায় থাকে , left-aligned, এবং লেবেল পাশাপাশি থাকে

বিশেষ দ্রস্টব্যঃ এটা শুধু মাত্র তখনই প্রদর্শিত হবে যখন viewports এর প্রসস্থতা 768px হবে।

কিছু অতিরিক্ত নিয়ম আছে এটা ব্যবহার করার জন্যঃ

• .form-inline class টা <form> এর মাঝে স্থাপন করতে হয়

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Bootstrap Inline Form

সতর্কতাঃ প্রত্যেক input এর জন্য যদি label ব্যবহার না করা হয় তাহলে screen readers ফর্ম গঠনে সমস্যা করতে পারে ।

শধু মাত্র screen reader ছাড়া .sr-only class ব্যবহার করে সকল devices এর জন্য labels hide করে রাখা যাবে।

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Inline form with sr-only class

বুটস্ট্র্যাপ অনুভূমিক ফর্ম

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.

উভয় markup এবং presentation ফর্ম এর ক্ষেত্রে আড়াআড়ি ফর্ম গুলো অন্য ফর্মগুলো থেকে দূরত্ব বজায় রাখে

টা ব্যবহার করার কিছু নিয়ম আছে:

• <form> এলিমেন্ট এর মধ্যে .form-horizontal class স্থাপন করতে হয়
• সকল <label> এলিমেন্ট এর মাঝে .control-label class ব্যবহার করতে হয়

উদাহরনঃ

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> 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-default">Submit</button>
    </div>
  </div>
</form>

ফলাফল : Bootstrap Horizontal Form