Form Fieldsets এবং Control Groups

Bulma CSS ফ্রেমওয়ার্কে ফর্ম তৈরির জন্য কিছু অত্যন্ত শক্তিশালী এবং সহজ ব্যবহারযোগ্য উপাদান প্রদান করা হয়েছে। এই উপাদানগুলোর মধ্যে Fieldsets এবং Control Groups অন্যতম। এগুলি ব্যবহার করে আপনি সুন্দর এবং ব্যবহারকারী-বান্ধব ফর্ম ডিজাইন করতে পারবেন। এখানে আমরা Bulma তে Form Fieldsets এবং Control Groups সম্পর্কে বিস্তারিত আলোচনা করব।

১. Form Fieldsets (ফর্ম ফিল্ডসেট)

ফর্মের একটি Fieldset হলো একটি কন্টেইনার যা ফর্মের এক বা একাধিক ফর্ম উপাদানকে গ্রুপ করতে ব্যবহৃত হয়। এটি সাধারণত একটি বর্ডার এবং টাইটেল প্রদর্শন করে, যা ফর্মের বিভিন্ন বিভাগকে আলাদা করে।

Fieldset Syntax

<fieldset>
  <legend>Personal Information</legend>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Enter your name">
    </div>
  </div>
  
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email">
    </div>
  </div>
</fieldset>

এখানে আমরা একটি fieldset ব্যবহার করেছি, যার মধ্যে একটি legend ট্যাগ আছে (যা ফর্মের শিরোনাম হিসেবে কাজ করে)। এই ফিল্ডসেটের মধ্যে দুটি ফর্ম উপাদান রয়েছে: একটি নামের জন্য ইনপুট ফিল্ড এবং একটি ইমেইল ইনপুট ফিল্ড।

২. Form Control Groups (ফর্ম কন্ট্রোল গ্রুপ)

Control Groups সাধারণত ফর্মের ইনপুট উপাদানগুলি গ্রুপ করে সাজানোর জন্য ব্যবহার করা হয়। Bulma এর control ক্লাসটি ব্যবহার করে ইনপুট, সিলেক্ট বক্স, রেডিও বাটন, চেকবক্স ইত্যাদি কন্ট্রোলগুলিকে সুন্দরভাবে গ্রুপ করা যায়। এর ফলে ফর্মের উপাদানগুলো আরও পরিষ্কার এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।

Control Group Syntax

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Enter your name">
  </div>
</div>

<div class="field">
  <label class="label">Gender</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select Gender</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <label class="label">Subscription</label>
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      Subscribe to newsletter
    </label>
  </div>
</div>

এখানে:

• Name ফিল্ডটি একটি সাধারণ ইনপুট ফিল্ড।
• Gender ফিল্ডটি একটি সিলেক্ট বক্স (ড্রপডাউন)।
• Subscription ফিল্ডটি একটি চেকবক্স।

এই সব ফর্ম উপাদানকে field ক্লাসে রাখা হয়েছে, এবং control ক্লাস দ্বারা প্রত্যেকটি উপাদানকে গ্রুপ করা হয়েছে।

৩. Fieldsets এর মধ্যে Control Groups

আপনি fieldset এবং control group একসাথে ব্যবহার করে ফর্মের বিভিন্ন অংশকে আরও সাজানো এবং গ্রুপ করা ফিচার পাবেন।

উদাহরণ: Fieldset এর মধ্যে Control Groups

<fieldset>
  <legend>Contact Information</legend>
  
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email">
    </div>
  </div>

  <div class="field">
    <label class="label">Phone Number</label>
    <div class="control">
      <input class="input" type="tel" placeholder="Enter your phone number">
    </div>
  </div>

  <div class="field">
    <label class="label">Subscribe</label>
    <div class="control">
      <label class="checkbox">
        <input type="checkbox">
        I want to receive updates
      </label>
    </div>
  </div>
</fieldset>

এখানে একটি Contact Information নামে fieldset ব্যবহার করা হয়েছে, যার মধ্যে ইমেইল, ফোন নম্বর এবং একটি চেকবক্সের মতো কন্ট্রোল গ্রুপ রয়েছে।

৪. Bulma এর অন্যান্য Form কন্ট্রোল উপাদান

Bulma আরও কিছু ফর্ম কন্ট্রোল উপাদান প্রদান করে যা আপনি আপনার ফর্মে ব্যবহার করতে পারেন। এগুলোর মধ্যে রয়েছে:

1. Select (ড্রপডাউন):

   <div class="field">
     <label class="label">Gender</label>
     <div class="control">
       <div class="select">
         <select>
           <option>Select Gender</option>
           <option>Male</option>
           <option>Female</option>
         </select>
       </div>
     </div>
   </div>
   

2. Radio Buttons:

   <div class="field">
     <label class="label">Gender</label>
     <div class="control">
       <label class="radio">
         <input type="radio" name="gender">
         Male
       </label>
       <label class="radio">
         <input type="radio" name="gender">
         Female
       </label>
     </div>
   </div>
   

3. Checkboxes:

   <div class="field">
     <label class="label">Subscribe to newsletter</label>
     <div class="control">
       <label class="checkbox">
         <input type="checkbox">
         Yes, I want to subscribe
       </label>
     </div>
   </div>
   

4. Textareas:

   <div class="field">
     <label class="label">Message</label>
     <div class="control">
       <textarea class="textarea" placeholder="Enter your message"></textarea>
     </div>
   </div>
   

৫. Form Layouts এবং Alignments

Bulma আপনাকে ফর্মের উপাদানগুলোর লেআউট কাস্টমাইজ করতে is-grouped, is-horizontal, এবং is-centered ক্লাসও প্রদান করে।

Horizontal Form Example

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Name</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Enter your name">
      </div>
    </div>
  </div>
</div>

এটি একটি horizontal form উদাহরণ যেখানে লেবেল এবং ইনপুট এক লাইনে প্রদর্শিত হয়।

Grouped Form Elements Example

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-text">Cancel</button>
  </div>
</div>

এখানে দুটি বাটন একসাথে grouped অবস্থায় রাখা হয়েছে।

সারাংশ

Bulma তে Fieldsets এবং Control Groups ব্যবহার করে আপনি খুব সহজেই সুন্দর এবং কার্যকরী ফর্ম ডিজাইন করতে পারবেন। Fieldsets ব্যবহার করে আপনি ফর্মের বিভিন্ন সেগমেন্ট আলাদা করতে পারেন, এবং Control Groups ব্যবহার করে ইনপুট উপাদানগুলিকে পরিষ্কারভাবে গ্রুপ করতে পারবেন। Bulma এর ফর্ম কন্ট্রোল উপাদানগুলি, যেমন ইনপুট ফিল্ড, সিলেক্ট বক্স, রেডিও বাটন, চেকবক্স ইত্যাদি ব্যবহার করে আপনি আধুনিক, ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে পারেন।